Published
Edited
Apr 30, 2019
1 star
md`# Heatmap of Monthly Average Air Quality Index, grouped by different Time Periods`
vega = require("vega-embed@3")
d3 = require('d3')
one_to_five_2019 = d3.csv('https://gist.githubusercontent.com/ptrknow/652272b114ac98d5b1f8282d71ff99e5/raw/cf2027bb5ddf28bb920aad8763095180e8822faf/2019_1-5am.csv', d => ({
month: +d.Month,
location: d.Location,
avg_monthly_aqhi: d.AQHI
}))
vega({
data: { values: one_to_five_2019 },
width: 500,
height: 400,
title: 'Hong Kong Air Quality in 2019 (1 - 5 am)',
mark: 'rect',
selection: { highlight: {type: "single"}} ,
encoding: {
x: { field: 'month', type: 'o' },
y: { field: 'location', type: 'n' },
color: {
field: 'avg_monthly_aqhi',
type: 'q',
// We use "blueorange" color scheme instead of the default "viridis"
// because it is closer to the convention that red means hot and
// blue means cold. We also set the domain to between 0 and 40, to
// have a consistent color encoding when plotting the minimum
// temperature
scale: { scheme: 'blueorange', domain: [1.5, 6] }
},
opacity: {
condition: { selection: "highlight", value: 1},
value: 0.5
}
}
})
six_to_ten_2019 = d3.csv('https://gist.githubusercontent.com/ptrknow/652272b114ac98d5b1f8282d71ff99e5/raw/cf2027bb5ddf28bb920aad8763095180e8822faf/2019_6-10am.csv', d => ({
month: +d.Month,
location: d.Location,
avg_monthly_aqhi: d.AQHI
}))
vega({
data: { values: six_to_ten_2019 },
width: 500,
height: 400,
title: 'Hong Kong Air Quality in 2019 (6 - 10 am)',
mark: 'rect',
selection: { highlight: {type: "single"}} ,
encoding: {
x: { field: 'month', type: 'o' },
y: { field: 'location', type: 'n' },
color: {
field: 'avg_monthly_aqhi',
type: 'q',
// We use "blueorange" color scheme instead of the default "viridis"
// because it is closer to the convention that red means hot and
// blue means cold. We also set the domain to between 0 and 40, to
// have a consistent color encoding when plotting the minimum
// temperature
scale: { scheme: 'blueorange', domain: [1.5, 6] }
},
opacity: {
condition: { selection: "highlight", value: 1},
value: 0.5
}
}
})
elevel_to_thirteen_2019 = d3.csv('https://gist.githubusercontent.com/ptrknow/652272b114ac98d5b1f8282d71ff99e5/raw/cf2027bb5ddf28bb920aad8763095180e8822faf/2019_11-13pm.csv', d => ({
month: +d.Month,
location: d.Location,
avg_monthly_aqhi: d.AQHI
}))
vega({
data: { values: elevel_to_thirteen_2019 },
width: 500,
height: 400,
title: 'Hong Kong Air Quality in 2019 (11 am - 13 pm)',
mark: 'rect',
selection: { highlight: {type: "single"}} ,
encoding: {
x: { field: 'month', type: 'o' },
y: { field: 'location', type: 'n' },
color: {
field: 'avg_monthly_aqhi',
type: 'q',
// We use "blueorange" color scheme instead of the default "viridis"
// because it is closer to the convention that red means hot and
// blue means cold. We also set the domain to between 0 and 40, to
// have a consistent color encoding when plotting the minimum
// temperature
scale: { scheme: 'blueorange', domain: [1.5, 6] }
},
opacity: {
condition: { selection: "highlight", value: 1},
value: 0.5
}
}
})
fourteen_to_eighteen_2019 = d3.csv('https://gist.githubusercontent.com/ptrknow/652272b114ac98d5b1f8282d71ff99e5/raw/cf2027bb5ddf28bb920aad8763095180e8822faf/2019_14-18pm.csv', d => ({
month: +d.Month,
location: d.Location,
avg_monthly_aqhi: d.AQHI
}))
vega({
data: { values: fourteen_to_eighteen_2019 },
width: 500,
height: 400,
title: 'Hong Kong Air Quality in 2019 (14 - 18 pm)',
mark: 'rect',
selection: { highlight: {type: "single"}} ,
encoding: {
x: { field: 'month', type: 'o' },
y: { field: 'location', type: 'n' },
color: {
field: 'avg_monthly_aqhi',
type: 'q',
// We use "blueorange" color scheme instead of the default "viridis"
// because it is closer to the convention that red means hot and
// blue means cold. We also set the domain to between 0 and 40, to
// have a consistent color encoding when plotting the minimum
// temperature
scale: { scheme: 'blueorange', domain: [1.5, 6] }
},
opacity: {
condition: { selection: "highlight", value: 1},
value: 0.5
}
}
})
nineteen_to_twentyfour_2019 = d3.csv('https://gist.githubusercontent.com/ptrknow/652272b114ac98d5b1f8282d71ff99e5/raw/cf2027bb5ddf28bb920aad8763095180e8822faf/2019_19-24pm.csv', d => ({
month: +d.Month,
location: d.Location,
avg_monthly_aqhi: d.AQHI
}))
vega({
data: { values: nineteen_to_twentyfour_2019 },
width: 500,
height: 400,
title: 'Hong Kong Air Quality in 2019 (19 - 24pm)',
mark: 'rect',
selection: { highlight: {type: "single"}} ,
encoding: {
x: { field: 'month', type: 'o' },
y: { field: 'location', type: 'n' },
color: {
field: 'avg_monthly_aqhi',
type: 'q',
// We use "blueorange" color scheme instead of the default "viridis"
// because it is closer to the convention that red means hot and
// blue means cold. We also set the domain to between 0 and 40, to
// have a consistent color encoding when plotting the minimum
// temperature
scale: { scheme: 'blueorange', domain: [1.5, 6] }
},
opacity: {
condition: { selection: "highlight", value: 1},
value: 0.5
}
}
})
one_to_five_2018 = d3.csv('https://gist.githubusercontent.com/ptrknow/652272b114ac98d5b1f8282d71ff99e5/raw/983d4fe6bfabdaad3e130ce1f7a98b58769850d1/2018_1-5am.csv', d => ({
month: +d.Month,
location: d.Location,
avg_monthly_aqhi: d.AQHI
}))
vega({
data: { values: one_to_five_2018 },
width: 500,
height: 400,
title: 'Hong Kong Air Quality in 2018 (1 - 5 am)',
mark: 'rect',
selection: { highlight: {type: "single"}} ,
encoding: {
x: { field: 'month', type: 'o' },
y: { field: 'location', type: 'n' },
color: {
field: 'avg_monthly_aqhi',
type: 'q',
// We use "blueorange" color scheme instead of the default "viridis"
// because it is closer to the convention that red means hot and
// blue means cold. We also set the domain to between 0 and 40, to
// have a consistent color encoding when plotting the minimum
// temperature
scale: { scheme: 'blueorange', domain: [1.5, 6] }
},
opacity: {
condition: { selection: "highlight", value: 1},
value: 0.5
}
}
})
six_to_ten_2018 = d3.csv('https://gist.githubusercontent.com/ptrknow/652272b114ac98d5b1f8282d71ff99e5/raw/983d4fe6bfabdaad3e130ce1f7a98b58769850d1/2018_6-10am.csv', d => ({
month: +d.Month,
location: d.Location,
avg_monthly_aqhi: d.AQHI
}))
vega({
data: { values: six_to_ten_2018 },
width: 500,
height: 400,
title: 'Hong Kong Air Quality in 2018 (6 - 10 am)',
mark: 'rect',
selection: { highlight: {type: "single"}} ,
encoding: {
x: { field: 'month', type: 'o' },
y: { field: 'location', type: 'n' },
color: {
field: 'avg_monthly_aqhi',
type: 'q',
// We use "blueorange" color scheme instead of the default "viridis"
// because it is closer to the convention that red means hot and
// blue means cold. We also set the domain to between 0 and 40, to
// have a consistent color encoding when plotting the minimum
// temperature
scale: { scheme: 'blueorange', domain: [1.5, 6] }
},
opacity: {
condition: { selection: "highlight", value: 1},
value: 0.5
}
}
})
eleven_to_thirteen_2018 = d3.csv('https://gist.githubusercontent.com/ptrknow/652272b114ac98d5b1f8282d71ff99e5/raw/983d4fe6bfabdaad3e130ce1f7a98b58769850d1/2018_11-13pm.csv', d => ({
month: +d.Month,
location: d.Location,
avg_monthly_aqhi: d.AQHI
}))
vega({
data: { values: eleven_to_thirteen_2018 },
width: 500,
height: 400,
title: 'Hong Kong Air Quality in 2018 (11 am - 13 pm)',
mark: 'rect',
selection: { highlight: {type: "single"}} ,
encoding: {
x: { field: 'month', type: 'o' },
y: { field: 'location', type: 'n' },
color: {
field: 'avg_monthly_aqhi',
type: 'q',
// We use "blueorange" color scheme instead of the default "viridis"
// because it is closer to the convention that red means hot and
// blue means cold. We also set the domain to between 0 and 40, to
// have a consistent color encoding when plotting the minimum
// temperature
scale: { scheme: 'blueorange', domain: [1.5, 6] }
},
opacity: {
condition: { selection: "highlight", value: 1},
value: 0.5
}
}
})
fourteen_to_eighteen_2018 = d3.csv('https://gist.githubusercontent.com/ptrknow/652272b114ac98d5b1f8282d71ff99e5/raw/983d4fe6bfabdaad3e130ce1f7a98b58769850d1/2018_14-18pm.csv', d => ({
month: +d.Month,
location: d.Location,
avg_monthly_aqhi: d.AQHI
}))
vega({
data: { values: fourteen_to_eighteen_2018 },
width: 500,
height: 400,
title: 'Hong Kong Air Quality in 2018 (14 - 18 pm)',
mark: 'rect',
selection: { highlight: {type: "single"}} ,
encoding: {
x: { field: 'month', type: 'o' },
y: { field: 'location', type: 'n' },
color: {
field: 'avg_monthly_aqhi',
type: 'q',
// We use "blueorange" color scheme instead of the default "viridis"
// because it is closer to the convention that red means hot and
// blue means cold. We also set the domain to between 0 and 40, to
// have a consistent color encoding when plotting the minimum
// temperature
scale: { scheme: 'blueorange', domain: [1.5, 6] }
},
opacity: {
condition: { selection: "highlight", value: 1},
value: 0.5
}
}
})
nineteen_to_twentyfour_2018 = d3.csv('https://gist.githubusercontent.com/ptrknow/652272b114ac98d5b1f8282d71ff99e5/raw/983d4fe6bfabdaad3e130ce1f7a98b58769850d1/2018_19-24pm.csv', d => ({
month: +d.Month,
location: d.Location,
avg_monthly_aqhi: d.AQHI
}))
vega({
data: { values: nineteen_to_twentyfour_2018 },
width: 500,
height: 400,
title: 'Hong Kong Air Quality in 2018 (19 - 24 pm)',
mark: 'rect',
selection: { highlight: {type: "single"}} ,
encoding: {
x: { field: 'month', type: 'o' },
y: { field: 'location', type: 'n' },
color: {
field: 'avg_monthly_aqhi',
type: 'q',
// We use "blueorange" color scheme instead of the default "viridis"
// because it is closer to the convention that red means hot and
// blue means cold. We also set the domain to between 0 and 40, to
// have a consistent color encoding when plotting the minimum
// temperature
scale: { scheme: 'blueorange', domain: [1.5, 6] }
},
opacity: {
condition: { selection: "highlight", value: 1},
value: 0.5
}
}
})
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
