Skip to content

Commit 38194be

Browse files
jhellingsdatajhellingsdata
committed
Add interactive chart examples
1 parent 97c9717 commit 38194be

21 files changed

Lines changed: 2140 additions & 0 deletions

‎examples/vega/interactive/energy_concat_empty.json‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
{
2+
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
3+
4+
"description": "Vertically concatanated graphs, select point on lower graph to highlight Technology on price graph above",
5+
6+
"data": {"url": "https://raw.githubusercontent.com/jhellingsdata/jhellingsdata.github.io/main/Project/Data/SolCost_IRENA.csv"},
7+
"config": {
8+
"view": {"stroke": "transparent"}
9+
},
10+
"title": {
11+
"text": "Costs of renewables, 10 years of progress",
12+
"color": "#54bb8e",
13+
"fontSize": 14,
14+
"anchor": "start",
15+
"subtitle": "Global LCOE 2020$/kWh, source: IRENA",
16+
"subtitleFontStyle": "italic",
17+
"subtitleFontSize": 11,
18+
"frame": "group"
19+
},
20+
21+
"vconcat": [
22+
{
23+
"name": "top",
24+
"height": 200,
25+
"width": 330,
26+
"mark": {
27+
"type": "line",
28+
"point": "transparent"
29+
},
30+
"encoding": {
31+
"color": {
32+
"field": "Technology",
33+
"legend": {
34+
"orient": "none",
35+
"legendX": 250,
36+
"legendY": 5,
37+
"title": null,
38+
"symbolSize": 40
39+
},
40+
"type": "nominal",
41+
"scale": {
42+
"domain": ["Bioenergy", "Geothermal", "Hydropower", "Offshore wind", "Onshore wind", "Solar concentrating", "Solar photovoltaic"],
43+
"range": ["#009642", "#E86200", "#00A9E8", "#5B5E76", "#B5D37E", "#AA649E", "#F7B913"]
44+
}
45+
},
46+
"x": {
47+
"field": "Year",
48+
"type": "temporal",
49+
"title": null,
50+
"axis": {
51+
"grid": false
52+
}
53+
},
54+
55+
"y": {
56+
"field": "Weighted average",
57+
"type": "quantitative",
58+
"title": null
59+
},
60+
"tooltip": [
61+
{"field": "Technology"},
62+
{"field": "LCOE"}
63+
]
64+
},
65+
66+
"transform": [
67+
{"calculate": "datum['Weighted average'] + ' $/kWh'", "as": "LCOE"}
68+
]
69+
},
70+
71+
{
72+
"height": 150,
73+
"width": 330,
74+
"name": "bottom",
75+
"title": {
76+
"text": "Yearly change in global capcity",
77+
"anchor": "start",
78+
"fontSize": 12,
79+
"frame": "group"
80+
},
81+
"transform": [
82+
{"calculate": "format(datum['Net additions MW'], ',') + ' MW'", "as": "Net additions"}
83+
],
84+
"mark": {
85+
"type": "point",
86+
"filled": true,
87+
"size": 150
88+
},
89+
"encoding": {
90+
"color": {
91+
"field": "Technology",
92+
"type": "ordinal"
93+
},
94+
95+
"x": {
96+
"field": "Year",
97+
"type": "temporal",
98+
"title": null,
99+
"axis": {
100+
"grid": false
101+
}
102+
},
103+
"y": {
104+
"field": "Net additions MW",
105+
"type": "quantitative",
106+
"title": null,
107+
"axis": {
108+
"labelExpr": "(datum.value / 1000) + 'GW'"
109+
}
110+
},
111+
"tooltip": [
112+
{"field": "Technology"},
113+
{"field": "Net additions"}
114+
]
115+
}
116+
}
117+
]
118+
}

‎examples/vega/interactive/example1_hover_complete.json‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
{ "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
2+
3+
"description": "Various US measures state by state",
4+
5+
"data": {
6+
"url": "https://raw.githubusercontent.com/RDeconomist/RDeconomist.github.io/main/charts/usa/data_USsocioEconomic.csv",
7+
"format":{"type":"csv"}},
8+
9+
"title": {
10+
"text": "Gun deaths and income - US states",
11+
"subtitle":["Median income (x), and firearm deaths per 100k population (y)",""],
12+
"subtitleFontStyle":"italic",
13+
"subtitleFontSize":10,
14+
"anchor": "start",
15+
"color": "black"
16+
},
17+
18+
"height": 300,
19+
"width": 300,
20+
21+
"mark": {
22+
"type":"circle",
23+
"color":"rgb(0,67,167)"
24+
},
25+
"params": [
26+
{
27+
"name": "hover",
28+
"select": {
29+
"type": "point",
30+
"on": "pointerover"
31+
}
32+
}
33+
],
34+
35+
"encoding": {
36+
"x": {
37+
"field": "medIncome",
38+
"type": "quantitative",
39+
"scale": {"domain": [40000, 80000]},
40+
"title":null},
41+
42+
"y": {
43+
"field": "FirearmDeaths",
44+
"type": "quantitative",
45+
"title":null
46+
},
47+
"size": {
48+
"condition": {
49+
"param": "hover",
50+
"value": 300,
51+
"empty": false
52+
},
53+
"value": 150
54+
},
55+
"opacity": {
56+
"condition": {
57+
"param": "hover",
58+
"value": 1,
59+
"empty": false
60+
},
61+
"value": 0.5
62+
},
63+
"order": {
64+
"condition": {
65+
"param": "hover",
66+
"value": 1,
67+
"empty": false
68+
},
69+
"value": 0
70+
},
71+
"tooltip": [
72+
{"field": "State"},
73+
{"field": "medIncome", "title": "Median income", "format": "$,d"},
74+
{"field": "FirearmDeaths", "title": "Firearm deaths (per 100k)"}
75+
]
76+
}
77+
}

‎examples/vega/interactive/example1_hover_empty.json‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
{ "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
2+
3+
"description": "Various US measures state by state",
4+
5+
"data": {
6+
"url": "https://raw.githubusercontent.com/RDeconomist/RDeconomist.github.io/main/charts/usa/data_USsocioEconomic.csv",
7+
"format":{"type":"csv"}},
8+
9+
"title": {
10+
"text": "Gun deaths and income - US states",
11+
"subtitle":["Median income (x), and firearm deaths per 100k population (y)",""],
12+
"subtitleFontStyle":"italic",
13+
"subtitleFontSize":10,
14+
"anchor": "start",
15+
"color": "black"
16+
},
17+
18+
"height": 300,
19+
"width": 300,
20+
21+
"mark": {
22+
"type":"circle",
23+
"color":"rgb(0,67,167)"
24+
},
25+
26+
"encoding": {
27+
"x": {
28+
"field": "medIncome",
29+
"type": "quantitative",
30+
"scale": {"domain": [40000, 80000]},
31+
"title":null},
32+
33+
"y": {
34+
"field": "FirearmDeaths",
35+
"type": "quantitative",
36+
"title":null
37+
}
38+
}
39+
}

‎examples/vega/interactive/example2_hover_complete.json‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
{
2+
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
3+
"title": {
4+
"text": "Millions without work",
5+
"subtitle": [
6+
"Youth Unemployment (15-24 yrs), 2021. 21 most populous countries",
7+
"Source: World Bank"
8+
],
9+
"subtitleFontStyle": "italic",
10+
"subtitleFontSize": 11,
11+
"anchor": "start",
12+
"color": "black",
13+
"offset": 10
14+
},
15+
"view": {"stroke": "transparent"},
16+
"width": 300,
17+
"height": 300,
18+
"data": {
19+
"url": "https://raw.githubusercontent.com/RDeconomist/RDeconomist.github.io/main/charts/e4e/Global_WB_YouthUnemployment.csv"
20+
},
21+
"transform": [
22+
{"filter": "datum.p21==1"},
23+
{"calculate": "datum.value2021/100", "as": "unempPercent"}
24+
],
25+
"encoding": {
26+
"x": {
27+
"field": "unempPercent",
28+
"type": "quantitative",
29+
"title": null,
30+
"axis": {
31+
"gridWidth": 0.5,
32+
"labelAngle": 0,
33+
"format": ".0%"
34+
}
35+
},
36+
"y": {"field": "nameSimple", "title": null, "type": "nominal", "sort": "-x"}
37+
},
38+
"layer": [
39+
{
40+
"params": [
41+
{
42+
"name": "hover",
43+
"select": {
44+
"type": "point",
45+
"on": "pointerover"
46+
}
47+
}
48+
],
49+
"mark": {"type": "bar", "color": "#47a7b2"},
50+
"encoding": {
51+
"opacity": {
52+
"condition": {"param": "hover", "value": 1},
53+
"value": 0.7
54+
}
55+
}
56+
},
57+
{
58+
"mark": {"type": "text", "align": "left", "dx": 5},
59+
"encoding": {
60+
"text": {
61+
"field": "unempPercent",
62+
"type": "quantitative",
63+
"format": ".1%"
64+
},
65+
"opacity": {
66+
"condition": {
67+
"param": "hover",
68+
"value": 1,
69+
"empty": false
70+
},
71+
"value": 0
72+
}
73+
}
74+
}
75+
]
76+
}

‎examples/vega/interactive/example2_hover_empty.json‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
{
2+
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
3+
"description": "Tufte inspired chart, with white grid lines over the bars",
4+
"title": {
5+
"text": "Millions without work",
6+
"subtitle": [
7+
"Youth Unemployment (15-24 yrs), 2021. 21 most populous countries",
8+
"Source: World Bank"
9+
],
10+
"subtitleFontStyle": "italic",
11+
"subtitleFontSize": 11,
12+
"anchor": "start",
13+
"color": "black",
14+
"offset": 10
15+
},
16+
"view": {"stroke": "transparent"},
17+
"width": 300,
18+
"height": 300,
19+
"data": {
20+
"url": "https://raw.githubusercontent.com/RDeconomist/RDeconomist.github.io/main/charts/e4e/Global_WB_YouthUnemployment.csv"
21+
},
22+
"transform": [
23+
{"filter": "datum.p21==1"},
24+
{"calculate": "datum.value2021/100", "as": "unempPercent"}
25+
],
26+
"mark": {"type": "bar", "color": "#47a7b2"},
27+
"encoding": {
28+
"x": {
29+
"field": "unempPercent",
30+
"type": "quantitative",
31+
"title": null,
32+
"axis": {
33+
"gridWidth": 0.5,
34+
"labelAngle": 0,
35+
"format": ".0%"
36+
}
37+
},
38+
"y": {"field": "nameSimple", "title": null, "type": "nominal", "sort": "-x"}
39+
}
40+
}

0 commit comments

Comments
 (0)