Published
Edited
Feb 17, 2021
2 forks
FileAttachment("1.png").image()
FileAttachment("2.png").image()
FileAttachment("3.png").image()
import {vl} from '@vega/vega-lite-api'
d3 = require('d3')
import {printTable} from '@uwdata/data-utilities'
fileContents = FileAttachment("infoviz_vega.csv")
df = d3.csvParse(await fileContents.text(), d3.autoType)
printTable(df.slice(0, 15))
FileAttachment("4.png").image()
//Your code here**********************************************************
//code for ex1
vl.markLine()
.data(df)
.encode(
vl.x().fieldO("week"),
vl.y().fieldQ("bikes_14counters"),
vl.color().fieldO("year")
)
.render()
year = [2019, 2020]
colorsInOrder = ["orange", "purple"]
shapesInOrder = ["circle", "triangle"]
colorMapping = ({domain: year, range: colorsInOrder})
shapeMapping = ({domain: year, range: shapesInOrder})
FileAttachment("5.png").image()
//Your code here**********************************************************
//code for ex2
vl.markLine({strokeWidth: 3, opacity: 0.5, interpolate: 'monotone', point:{size:50}})
.data(df)
.encode(
vl.x().fieldO("week").title("Week").axis({labelAngle: 0}),
vl.y().fieldQ("bikes_14counters").title("Number of Bike Riders"),
vl.color().fieldO("year").title("Year").scale(colorMapping),
vl.shape().fieldO("year").scale(shapeMapping),
vl.tooltip(["bikes_14counters", "year", "week"])
)
.title("Bike Rider Count Comparison")
.height(200)
.width(700)
.render()
FileAttachment("6.png").image()
//Your code here**********************************************************
ex3= {
//highlight line that marks the beginning of covid
const line = vl.markRule({stroke:"firebrick", strokeWidth: 2})
.data([{'week':12}])
.encode(
vl.x().fieldO('week'),
)
// the modified line plot
const lineplot = vl.markLine({strokeWidth: 3, opacity: 0.5, interpolate: 'monotone', point:{size:50}})
.data(df)
.encode(
vl.x().fieldO("week").title("Week").axis({labelAngle: 0}),
vl.y().fieldQ("bikes_14counters").title("Number of Bike Riders"),
vl.color().fieldO("year").title("Year").scale(colorMapping).legend({orient: 'top-right'}),
vl.shape().fieldO("year").scale(shapeMapping).legend({orient: 'top-right'}),
)
.width(700)
.height(200)
// return the layered chart
return vl.layer([lineplot, line]).render()
}
FileAttachment("7.png").image()
//Your code here**********************************************************
ex4 = {
//highlight line that marks the beginning of covid
const line = vl.markRule({stroke:"firebrick", strokeWidth: 2})
.data([{'week':12}])
.encode(
vl.x().fieldO('week'),
vl.tooltip().value("When Covid Lockdown Started")
)
// the modified line plot
const lineplot = vl.markLine({strokeWidth: 3, opacity: 0.5, interpolate: 'monotone', point:{size:50}})
.data(df)
.encode(
vl.x().fieldO("week").title("Week").axis({labelAngle: 0}).axis(null),
vl.y().fieldQ("bikes_14counters").title("# of Bike Riders"),
vl.color().fieldO("year").title("Year").scale(colorMapping).legend({orient: 'top-right'}),
vl.shape().fieldO("year").scale(shapeMapping).legend({orient: 'top-right'}),
vl.tooltip(["bikes_14counters", "year", "week", "starting_from"])
)
.title({
text: 'Bike Riders',
anchor: 'middle',
fontSize: 12
})
.width(700)
.height(200)
const lineplot2 = vl.markLine({strokeWidth: 3, opacity: 0.5, interpolate: 'monotone', point:{size:50}})
.data(df)
.encode(
vl.x().fieldO("week").title("Week").axis({labelAngle: 0}),
vl.y().fieldQ("pedestrians_14counters").title("# of Pedestrians"),
vl.color().fieldO("year").title("Year").scale(colorMapping).legend({orient: 'top-right'}),
vl.shape().fieldO("year").scale(shapeMapping).legend({orient: 'top-right'}),
vl.tooltip(["pedestrians_14counters", "year", "week", "starting_from"])
)
.title({
text: 'Pedestrians',
anchor: 'middle',
fontSize: 12
})
.width(700)
.height(200)
const layer_bike = vl.layer([lineplot, line])
const layer_peds = vl.layer([lineplot2, line])
return vl.vconcat([layer_bike, layer_peds])
.title({
text: 'Comparison of Number of Bike Riders/Pedestrians on Trails in 2019/2020',
anchor: 'middle',
fontSize: 16
})
.render()
}
fileContents2 = FileAttachment("infoviz_vega2.csv")
df2 = d3.csvParse(await fileContents2.text(), d3.autoType)
printTable(df2.slice(0, 10))
df.forEach(function (element) {
element.co2_per_min = element.EcoPassengerCO2 / element.RawTravelTime;
})
//Your code here**********************************************************
//Your code here************************************************************************
df2.forEach(function (i) {
i.percentages = (i.bikers_20 - i.bikers_19)*100/i.bikers_19
return i.percentages
})
FileAttachment("8.png").image()
//Your code here**********************************************************
bike_percentages = {
//highlight line that marks the beginning of covid
const line2 = vl.markRule({stroke:"firebrick", strokeWidth: 2})
.data([{'week':12}])
.encode(
vl.x().fieldO('week'),
vl.tooltip().value("When Covid Lockdown Started")
)
// the modified line plot
const barplot = vl.markBar()
.data(df2)
.encode(
vl.x().fieldO("week").title("Week").axis({labelAngle: 0}),
vl.y().fieldQ("percentages").title("Change of Bikers in 2020 from 2019 (%)"),
vl.tooltip(["starting_from", "bikers_19", "bikers_20", "percentages"]),
vl.color().fieldQ("percentages").legend(null),
)
.title({
text: 'Change in Bike Riders Percentages in 2019/2020',
anchor: 'middle',
fontSize: 15
})
.width(700)
.height(200)
// return the layered chart
return vl.layer([barplot, line2]).render()
}
//Your code here**********************************************************
//Your code here**************************************************************
df3 = df.filter(d => d.week >= 10 && d.week <= 14)
FileAttachment("9.png").image()
//Your code here*********************************************
//Your code here******************************************************************
vl.markBar()
.encode(
vl.y().fieldO('week'),
vl.x().fieldQ('pedestrians_14counters'),
vl.color().fieldQ('pedestrians_14counters').legend(null)
)
.facet({row: vl.row('year')})
.data(df3)
.render()
//Your code here**********************************************************
md`
## References
https://data.world/makeovermonday/2021w1/discuss/2021w1/nkpl7c4a
`
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.
