Skip to content

Customize header on some pages. Fixes #6 #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jan 28, 2018
Merged

Customize header on some pages. Fixes #6 #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 2 additions & 9 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,7 @@
## Executable Examples

<div style="float:right">
<img src="img/cover-1.png" width="200" style="margin: 10px;"/>
</div>
This [page](https://makingdatavisual.github.io) and project contain a live copy of the figures for the book ["Making Data Visual"](https://shop.oreilly.com/product/0636920041320.do). The book's official O'Reilly source materials can be found at [its website](https://resources.oreilly.com/examples/0636920041320). These are here so that you can learn how to re-create this images for your own visualizations.

This [page](https://makingdatavisual.github.io) and project contain a live copy of the figures for the book ["Making Data Visual"](http://shop.oreilly.com/product/0636920041320.do). The book's official O'Reilly source materials can be found at [its website](https://resources.oreilly.com/examples/0636920041320). These are here so that you can learn how to re-create this images for your own visualizations.
The figures are written in [Vega and Vega-Lite](https://vega.github.io), a JSON-based web-based language for creating sophisticated data visualizations.

The figures are written in [Vega and Vega-Lite](http://vega.github.io), a JSON-based web-based language for creating sophisticated data visualizations.

{:.clear}
An illustrated list of all figures, with interactive code, is at the [Figure List](figurelist.html).

This page is hosted on [on GitHub](https://github.com/MakingDataVisual/makingdatavisual.github.io).
4 changes: 2 additions & 2 deletions _config.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
title: Executable Examples
description: Executable Examples for Making Data Visual
title: Making Data Visual
description: Executable Examples for the Book "Making Data Visual" by Danyel Fisher & Miriah Meyer
show_downloads: false
theme: jekyll-theme-cayman
5 changes: 3 additions & 2 deletions _layouts/examplepage.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
layout: default
layout: page
---

<script src="https://cdnjs.cloudflare.com/ajax/libs/vega/3.0.9/vega.js"></script>
Expand All @@ -19,7 +19,8 @@

</script>
<a href="../figurelist.html">◀ Back to List of Figures</a>
<h1> {{page.number}} {{page.title}} </h1>

<h2> {{page.number}} {{page.title}} </h2>

<p>
{{ page.description }}
Expand Down
42 changes: 42 additions & 0 deletions _layouts/page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
<!DOCTYPE html>
<html lang="{{ site.lang | default: "en-US" }}">
<head>
<meta charset="UTF-8">

{% seo %}
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#157878">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="{{ '/assets/css/style.css?v=' | append: site.github.build_revision | relative_url }}">
</head>
<body>
<section class="page-header small">
<a href="/">
<h1 class="project-name">{{ site.title | default: site.github.repository_name }}</h1>
</a>
</section>

<section class="main-content">
{{ content }}

<footer class="site-footer">
{% if site.github.is_project_page %}
<span class="site-footer-owner"><a href="{{ site.github.repository_url }}">{{ site.github.repository_name }}</a> is maintained by <a href="{{ site.github.owner_url }}">{{ site.github.owner_name }}</a>.</span>
{% endif %}
<span class="site-footer-credits">This page was generated by <a href="https://pages.github.com">GitHub Pages</a>.</span>
</footer>
</section>

{% if site.google_analytics %}
<script type="text/javascript">
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', '{{ site.google_analytics }}', 'auto');
ga('send', 'pageview');
</script>
{% endif %}
</body>
</html>
28 changes: 19 additions & 9 deletions assets/css/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,23 +3,33 @@

@import "{{ site.theme }}";

.page-header.small {
padding: 2rem 6rem;
h1 {
font-size: 2.5rem;
}
}

.page-header a {
color: white;
text-decoration: none;
}

.group {
margin: 0.6em 0;
}

img.figure {
width: 200px;
width: 220px;
float:left;
background: white;
padding: 10px;
border:1px black;
margin-right: 20px;
}

h1 {
clear:both;
padding-top: 20px;
}

h2 {
clear:both;
padding-top: 20px;
#view {
margin: 2em 0;
}

.note {
Expand Down
16 changes: 6 additions & 10 deletions figurelist.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,17 @@
---
layout: default
title: Executable Examples for Making Data Visual
layout: page
title: List of Figures
---

<a href="./">◀ Back to Homepage</a>

<h2>List of Figures</h2>

{% for group in site.data.figures %}
<a href="#{{group.name}}"><div class="group"> {{ group.group }}:</a>
{{ group.children | map: "title" | join: ", " }}
<!-- {% for figure in group.children %}
{% if figure.number %}
<span>{{ figure.title }} </span>
{% endif %}
{% endfor %}
!-->
<div class="group">
<a href="#{{group.name}}">{{ group.group }}:</a>
{{ group.children | map: "title" | join: ", " }}
</div>
{% endfor %}

{% for group in site.data.figures %}
Expand Down
15 changes: 15 additions & 0 deletions index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
---
title: Home
layout: default
---

<div style="float:right">
<img src="img/cover-1.png" width="200" style="margin: 10px;"/>
</div>

This [page](https://makingdatavisual.github.io) and project contain a live copy of the figures for the book ["Making Data Visual"](https://shop.oreilly.com/product/0636920041320.do). The book's official O'Reilly source materials can be found at [its website](https://resources.oreilly.com/examples/0636920041320). These are here so that you can learn how to re-create this images for your own visualizations.

The figures are written in [Vega and Vega-Lite](https://vega.github.io), a JSON-based web-based language for creating sophisticated data visualizations.

{:.clear}
An illustrated list of all figures, with interactive code, is at the [Figure List](figurelist.html).