Published
Edited
Feb 13, 2021
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
FileAttachment("7@1.png").image()
Insert cell
FileAttachment("2.png").image()
Insert cell
FileAttachment("last.png").image()
Insert cell
Insert cell
import {vl} from '@vega/vega-lite-api'
Insert cell
d3 = require('d3')
Insert cell
import {printTable} from '@uwdata/data-utilities'
Insert cell
fileContents = FileAttachment("infoviz_vega.csv")
Insert cell
df = d3.csvParse(await fileContents.text(), d3.autoType)
Insert cell
Insert cell
printTable(df.slice(0, 15))
Insert cell
Insert cell
Insert cell
Insert cell
FileAttachment("4.png").image()
Insert cell
//Your code here**********************************************************
vl.markLine()
.data(df)
.encode(
vl.x().fieldO('week'),
vl.y().fieldQ('bikes_14counters'),
vl.color().fieldN('year').legend('year'),
)
.width(800)
.render()
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
FileAttachment("5.png").image()
Insert cell

{
const colors = {
domain: ['2019', '2020'],
range: ['#B8860B', '#8A2BE2']
};
return vl.markLine({opacity: 0.5, strokeWidth:5, interpolate: "monotone", point:{size:50}})
.data(df)
.encode(
vl.x().fieldQ('week').title('Week').axis({labelAngle: 0, fontSize:10}),
vl.y().fieldQ('bikes_14counters').title('Number of Bike Riders').axis({labelAngle: 0, fontSize:10}),
vl.color().fieldN('year').legend('year').scale(colors),
vl.shape().fieldN('year').legend(null),
vl.opacity().value(0.5)
)
.title({
text: 'Biker Rider Count Comparison',
anchor: 'middle', // anchor and left-align title
offset: 5,
fontsize: 12
})
.width(700)
.height(200)
.render();
}
Insert cell
Insert cell
Insert cell
Insert cell
FileAttachment("6.png").image()
Insert cell
{
const colors = {
domain: ['2019', '2020'],
range: ['#B8860B', '#8A2BE2']
};
const basic1 = vl.markLine({opacity: 0.5, strokeWidth:5, interpolate: "monotone", point:{size:50}})
.data(df)
.encode(
vl.x().fieldQ('week').title('Week').axis({labelAngle: 0, fontSize:10}),
vl.y().fieldQ('bikes_14counters').title('Number of Bike Riders').axis({labelAngle: 0, fontSize:10}),
vl.color().fieldN('year').legend({orient: 'top-right'}).scale(colors),
vl.shape().fieldN('year').legend(null),
vl.opacity().value(0.5)
)
.title({
text: 'Biker Rider Count Comparison',
anchor: 'middle', // anchor and left-align title
offset: 5,
fontsize: 12
})
.width(700)
.height(200)
const basic2 = vl.markRule({stroke: 'firebrick'})
.data([{'week': 12}])
.encode(
vl.x().fieldQ('week')
);

return vl.layer(basic1, basic2).render()
}
Insert cell
Insert cell
Insert cell
Insert cell
FileAttachment("7@1.png").image()
Insert cell
Insert cell
md`
**Your answer here**
`
Insert cell
Insert cell
Insert cell
fileContents2 = FileAttachment("infoviz_vega2.csv")
Insert cell
df2 = d3.csvParse(await fileContents2.text(), d3.autoType)
Insert cell
printTable(df2.slice(0, 12))
Insert cell
Insert cell
Insert cell
df.forEach(function (element) {
element.percentages = ((element.bikers_20 -element.bikers_19) / element.bikers_19) * 100;
})
Insert cell
Insert cell
//Your code here**********************************************************
df2.forEach(function (element) {
element.percentages = ((element.bikers_20 - element.bikers_19) / element.bikers_19) * 100;
})
Insert cell
printTable(df2.slice(0, 15))
Insert cell
Insert cell
Insert cell
Insert cell
FileAttachment("8.png").image()
Insert cell

{
const basic1 = vl.markBar()
.data(df2)
.encode(
vl.x().fieldQ('week').title('Week').axis({labelAngle: 0, fontSize:8}).scale({type: 'linear', domain: [1, 46]}),
vl.y().fieldQ('percentages').title('Change of Bikers in 2020 from 2019 (%)').axis({labelAngle: 0, fontSize:18}),
vl.opacity().value(0.9),
vl.color().fieldQ('percentages').legend(null),
vl.tooltip().fieldN('percentages')
)
.title({
text: 'Change in Bike Riders Percentages in 2019/2020',
anchor: 'middle', // anchor and left-align title
offset: 5,
fontsize: 12
})
.width(700)
.height(200)
const basic2 = vl.markRule({stroke: 'firebrick'})
.data([{'week': 12}])
.encode(
vl.x().fieldQ('week')
);

return vl.layer(basic1, basic2).render()
}

Insert cell
Insert cell
md`
Week 12 is an extrema as it has the highest percent change in bike riders.
Week 10 - 14 had a rise in bikers when lockdown started to happen
`
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
//Your code here*********************************************************

df3 = df.filter( d => d.week >= 10 && d.week < 15)
Insert cell
printTable(df3.slice(0, 12))
Insert cell
Insert cell
Insert cell
Insert cell
FileAttachment("last.png").image()
Insert cell
//Your code here*********************************************

{
const base1 = vl.markBar()
.encode(
vl.y().fieldO('week'),
vl.x().fieldQ('pedestrians_14counters'),
vl.color().fieldQ('pedestrians_14counters').legend(null)
)
.width(700)
.height(200)
return vl.layer(base1)
.facet({row: vl.fieldQ('year')})
.data(df3)
.render()
}
Insert cell
Insert cell
md`
**Your answer here**
The number of pedestrians who visited the trails increased in 2020 from 2019.
`
Insert cell
Insert cell
Insert cell
//Your code here**********************************************************
Insert cell
md`
## References
https://data.world/makeovermonday/2021w1/discuss/2021w1/nkpl7c4a
`
Insert cell

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.
Learn more