Skip to content

Commit 4efb8f1

Browse files
jandotjandot
committed
Main conversion of vega-lite tutorial to this website
1 parent f185a06 commit 4efb8f1

24 files changed

+1667
-8
lines changed

‎_data/sidebars/vegalite_sidebar.yml‎

Lines changed: 73 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
entries:
22
- title: sidebar
33
product: Vega-Lite tutorial
4-
version: 1.0
54
folders:
65

76
- title:
@@ -17,11 +16,81 @@ entries:
1716
output: pdf
1817
type: frontmatter
1918

20-
- title: Vega-lite
19+
- title: Creating static images
2120
output: web, pdf
2221
folderitems:
23-
2422
- title: A simple barchart
2523
url: /simplest-barchart.html
2624
output: web, pdf
27-
type: homepage
25+
- title: Vega-Lite online editor
26+
url: /vegalite-online-editor.html
27+
output: web, pdf
28+
- title: Setting colour and shape
29+
url: /setting-colour-and-shape.html
30+
output: web, pdf
31+
- title: Changing the data
32+
url: /changing-the-data.html
33+
output: web, pdf
34+
- title: Data transformations
35+
output: web, pdf
36+
folderitems:
37+
- title: Creating data transformations
38+
url: /data-transformations.html
39+
output: web, pdf
40+
- title: Composing plots
41+
url: /composing-plots.html
42+
output: web, pdf
43+
folderitems:
44+
- title: Facetting
45+
url: /facetting.html
46+
output: web, pdf
47+
- title: Placing views side-by-side
48+
url: /placing-views-side-by-side.html
49+
output: web, pdf
50+
- title: Interacting with the images
51+
url: /interaction.html
52+
output: web, pdf
53+
folderitems:
54+
- title: Tooltips
55+
url: /tooltips.html
56+
output: web, pdf
57+
- title: Selecting datapoints
58+
url: /selecting-datapoints.html
59+
output: web, pdf
60+
- title: Zooming and panning
61+
url: /zooming-and-panning.html
62+
output: web, pdf
63+
- title: Brushing and linking
64+
url: /brushing-and-linking.html
65+
output: web, pdf
66+
subfolderitems:
67+
- title: Equivalent plots
68+
url: /equivalent-plots.html
69+
output: web, pdf
70+
- title: Non-equivalent plots
71+
url: /non-equivalent-plots.html
72+
output: web, pdf
73+
- title: Focus & context plots
74+
url: /focus-and-context-plots.html
75+
output: web, pdf
76+
- title: A scatterplot matrix
77+
url: /a-scatterplot-matrix.html
78+
output: web, pdf
79+
- title: Using widgets for selections
80+
output: web, pdf
81+
folderitems:
82+
- title: Using widgets for selections
83+
url: /using-widgets-for-selection.html
84+
output: web
85+
- title: Further exercises
86+
output: web, pdf
87+
folderitems:
88+
- title: Further exercises
89+
url: /further-exercises.html
90+
output: web, pdf
91+
- title: Where next?
92+
output: web, pdf
93+
folderitems:
94+
- title: Where next?
95+
url: /where-next.html
96+
output: web, pdf

‎_includes/head.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
<link rel="stylesheet" href="css/customstyles.css">
1515
<link rel="stylesheet" href="css/boxshadowproperties.css">
1616
<!-- most color styles are extracted out to here -->
17-
<link rel="stylesheet" href="css/theme-blue.css">
17+
<link rel="stylesheet" href="css/theme-green.css">
1818

1919
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
2020

‎_includes/head_print.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,10 @@
1515
<link rel="stylesheet" href="{{ "/css/syntax.css" | prepend: site.baseurl | prepend: site.url }}">
1616
<link rel="stylesheet" href="{{ "/css/printstyles.css" | prepend: site.baseurl }}">
1717

18+
<script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
19+
<script src="https://cdn.jsdelivr.net/npm/vega-lite@4"></script>
20+
<script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>
21+
1822
<script>
1923
Prince.addScriptFunc("datestamp", function() {
2024
return "PDF last generated: {{ site.time | date: '%B %d, %Y' }}";

‎_includes/sidebar.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,11 +47,11 @@
4747
{% endif %}
4848
{% endfor %}
4949
{% endfor %}
50-
<!-- if you aren't using the accordion, uncomment this block:
50+
<!-- if you aren't using the accordion, uncomment this block: -->
5151
<p class="external">
5252
<a href="#" id="collapseAll">Collapse All</a> | <a href="#" id="expandAll">Expand All</a>
5353
</p>
54-
-->
54+
5555
</ul>
5656

5757
<!-- this highlights the active parent class in the navgoco sidebar. this is critical so that the parent expands when you're viewing a page. This must appear below the sidebar code above. Otherwise, if placed inside customscripts.js, the script runs before the sidebar code runs and the class never gets inserted.-->

‎assets/citibike_linegraph.png‎

1.92 MB
Loading

‎assets/vegalite-online-editor.png‎

191 KB
Loading

‎pages/vegalite/a-scatterplot-matrix.md‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
---
2+
title: A scatterplot matrix
3+
keywords: vegalite
4+
sidebar: vegalite_sidebar
5+
permalink: a-scatterplot-matrix.html
6+
folder: vega-lite
7+
---
8+
We've now seen how to do brushing and linking across different plots. One of the typical use cases is the scatterplot matrix. Based on what we've seen above, we can already create this, just by adding specifications to the `concat` section.
9+
10+
{:.exercise}
11+
**Exercise** - Create a scatterplot matrix of the features `Weight_in_lbs`, `Miles_per_Gallon` and `Acceleration` with linking and brushing as we did above.
12+
13+
When doing the exercise, you'll notice that there is a lot of repetition, as the `selection`, `marks` and `encoding` are repeated for each plot. For this use case, vega-lite provides the `repeat` keyword. It allows you to extract the variable part of the specification into a separate array. When you do this, you'll have to put the `selection`, `marks` and `encoding` within a separate `spec` again.
14+
15+
{% highlight json %}
16+
{
17+
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
18+
"title": "Scatterplot matrix",
19+
"data": {
20+
"url": "https://raw.githubusercontent.com/vega/vega/master/docs/data/cars.json"
21+
},
22+
"repeat": {
23+
"column": [ "Weight_in_lbs", "Miles_per_Gallon", "Acceleration" ],
24+
"row": [ "Weight_in_lbs", "Miles_per_Gallon", "Acceleration" ]
25+
},
26+
"spec": {
27+
"selection": {
28+
"my_selection": {"type": "interval", "empty": "none"}
29+
},
30+
"mark": "circle",
31+
"encoding": {
32+
"x": {"field": {"repeat": "column"}, "type": "quantitative"},
33+
"y": {"field": {"repeat": "row"}, "type": "quantitative"},
34+
"color": {
35+
"condition": {
36+
"selection": "my_selection",
37+
"value": "red"
38+
},
39+
"value": "lightgrey"
40+
}
41+
}
42+
}
43+
}
44+
{% endhighlight %}
45+
46+
This will give you this image. Try selecting a group of datapoints.
47+
48+
<div id="vis7"></div>
49+
<script type="text/javascript">
50+
var yourVlSpec = {
51+
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
52+
"title": "Scatterplot matrix",
53+
"data": {
54+
"url": "https://raw.githubusercontent.com/vega/vega/master/docs/data/cars.json"
55+
},
56+
"repeat": {
57+
"column": [ "Weight_in_lbs", "Miles_per_Gallon", "Acceleration" ],
58+
"row": [ "Weight_in_lbs", "Miles_per_Gallon", "Acceleration" ]
59+
},
60+
"spec": {
61+
"selection": {
62+
"my_selection": {"type": "interval", "empty": "none"}
63+
},
64+
"mark": "circle",
65+
"encoding": {
66+
"x": {"field": {"repeat": "column"}, "type": "quantitative"},
67+
"y": {"field": {"repeat": "row"}, "type": "quantitative"},
68+
"color": {
69+
"condition": {
70+
"selection": "my_selection",
71+
"value": "red"
72+
},
73+
"value": "lightgrey"
74+
}
75+
}
76+
}
77+
};
78+
vegaEmbed('#vis7', yourVlSpec);
79+
</script>
80+
81+
<!--
82+
<img src="{{ site.baseurl }}/assets/vegalite-splom.png" />
83+
-->

0 commit comments

Comments
 (0)