FileAttachment("7@1.png").image()
FileAttachment("2.png").image()
FileAttachment("last.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()
vl.markLine()
.data(df)
.encode(
vl.x().fieldO('week'),
vl.y().fieldQ('bikes_14counters'),
vl.color().fieldN('year').legend('year'),
)
.width(750)
.render()
FileAttachment("5.png").image()
// give this a width (700) and a height (200) to get a better aspect ratio.
//make the lines curved
//make the lines thicker
//make the points a larger size
//add some translucency to the lines
//change color and shape of each line
//add title to the graph
//modify x and y axis title names to legible format
//rotate label angle for the x axis (week) to be horizontal
//you can change the angle by appending .axis({labelAngle: [angle number goes here] }) to vl.x() for x axis and //vl.y() for y axis
// I added color and shape mapping in part 3
vl.markLine({opacity: 0.3, strokeWidth:3, interpolate: "monotone", point:{size:70}})
.data(df)
.encode(
vl.x().fieldQ('week').title('Week').axis({labelAngle: 0, fontSize:12, grid: false}),
vl.y().fieldQ('bikes_14counters').title('Number of Bike Riders').axis({labelAngle: 0, fontSize:12}),
vl.color().fieldN('year').scale(colorMapping).legend('year'),
vl.shape().fieldN('year').scale(shapeMapping).legend('year'),
vl.opacity().value(0.6)
)
.title({
text: 'Biker Rider Count Comparison',
anchor: 'middle',
offset: 6,
fontSize: 14
})
.width(700)
.height(200)
.render();
FileAttachment("6.png").image()
yearsInOrder = ['2019','2020']
shapesInOrder = ['circle', 'triangle']
colorsInOrder = ['#FFA500', '#9400D3']
colorMapping = ({domain: yearsInOrder, range: colorsInOrder})
shapeMapping = ({domain: yearsInOrder, range: shapesInOrder})
{ const graph1 = vl.markLine({opacity: 0.3, strokeWidth:3, interpolate: "monotone", point:{size:70}})
.data(df)
.encode(
vl.x().fieldQ('week').title('Week').axis({labelAngle: 0, fontSize:12, grid:false}),
vl.y().fieldQ('bikes_14counters').title('Number of Bike Riders').axis({labelAngle: 0, fontSize:12}),
vl.color().fieldN('year').scale(colorMapping).legend({orient: 'top-right'}),
vl.shape().fieldN('year').scale(shapeMapping).legend({orient: 'top-right'}),
vl.opacity().value(0.6)
)
.title({
text: 'Biker Rider Count Comparison',
anchor: 'middle',
offset: 6,
fontSize: 14
})
.width(width-200)
.height(200)
const graph2 = vl.markRule({stroke: 'firebrick', strokeWidth:4})
.data([{'week': 12}])
.encode(
vl.x().fieldQ('week')
);
return vl.layer(graph1, graph2).render()
}
FileAttachment("7@1.png").image()
//define a constant variable that layers line graph of bike data with the markRule line
//you can remove the x axis of this diagram by adding axis(null) at vl.x()
//add title called "Bike Riders"
//add tool tip for the lines to display "bikes_14counters", "year", "week", "starting_from" when hover on the //line
//define another constant variable that layers line graph of pedestrian data with the markRule line
//add title called "Pedestrians"
//add tool tip for the lines to display "pedestrians_14counters", "year", "week", "starting_from" when hover on //the line
//return by using vconcat to vertically concaternate the two layers created above
{ const graph1 = vl
.markLine({opacity: 0.3, strokeWidth:3, interpolate: "monotone", point:{size:70}})
.data(df)
.encode(
vl.x().fieldQ('week').title('Week').axis(null),
vl.y().fieldQ('bikes_14counters').title('# of Bike Riders').axis({labelAngle: 0, fontSize:12}),
vl.color().fieldN('year').scale(colorMapping).legend({orient: 'top-right'}),
vl.shape().fieldN('year').scale(shapeMapping).legend({orient: 'top-right'}),
vl.opacity().value(0.6),
vl.tooltip(["bikes_14counters", "year", "week", "starting_from"])
)
.width(900)
.height(300)
.title({text: 'Biker Riders', anchor: 'middle', offset: 6, fontSize: 14})
.resolve({legend: {orient: 'independent'}})
const graph2 = vl
.markLine({opacity: 0.3, strokeWidth:3, interpolate: "monotone", point:{size:70}})
.data(df)
.encode(
vl.x().fieldQ('week').title('Week').axis({labelAngle: 0, grid:false}),
vl.y().fieldQ('pedestrians_14counters').title('# of Pedestrians').axis({labelAngle: 0, fontSize:12}),
vl.color().fieldN('year').scale(colorMapping).legend({orient: 'top-right'}),
vl.shape().fieldN('year').scale(shapeMapping).legend({orient: 'top-right'}),
vl.opacity().value(0.6),
vl.tooltip(["pedestrians_14counters", "year", "week", "starting_from"])
)
.width(900)
.height(300)
.title({text: 'Pedestrians', anchor: 'middle', offset: 6, fontSize: 14})
.resolve({legend: {orient: 'independent'}})
const graph3 = vl
.markRule({stroke: 'firebrick', strokeWidth:4})
.data([{'week': 12}])
.encode(
vl.x().fieldQ('week')
)
const graph4 = vl.layer(graph1,graph3);
const graph5 = vl.layer(graph2,graph3);
return vl
.vconcat(graph4, graph5)
.title({
text: 'Comparison of Number of Bike Riders/Pedestrians on Trails in 2009/2020)',
dx: 150, dy: -10,fontSize: 20, font: "Tahoma"})
//.layer(graph3)
.render()
}
md`
Generally, there are more bike riders in 2020 overall than in 2019 except for first half of winter weeks (week 0 to week 6). Notably, the increasing growth of biker ridership is higher during months of warmer climate (or non-winter months) and mirrors seasonality of outdoors activities. For pedestrains, there are more pedestrains in 2020 overall than in 2019 except for the mid-year spike aroun week 20-23 of summer. By contrast, the growth of pederstrains in 2020 is smaller and at times remain similar to numbers of 2019. In conclusion, although both the traffic of trails from bikers and pedestrains follow seasonality in 2019-2020, the change of bike ridership year-to-year is higher than the relatively stagnant trend of pedestrain's foot traffic. One underlying factor to explore futher may be to look into the effect of COVID, and perhaps look at difference-in-difference estimates between 2018 to 2019 vs 2019-2020, if there is available data.
`
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;
})
df2.forEach(function (element) {
element.percentages = ((element.bikers_20 - element.bikers_19) / element.bikers_19) * 100;
})
FileAttachment("8.png").image()
//create a markRule line at week 12
//create a tool tip that displays "starting_from", "bikers_19", "bikers_20", "percentages"
//add title and change axis titles relevant to the data
//set colors to represent "percentages"
//remove the legend
{
const graph1 = vl.markBar()
.data(df2)
.encode(
vl.x().fieldQ('week').title('Week').bin({maxbins: 47}),
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(["starting_from", "bikers_19", "bikers_20", "percentages"])
)
.title({
text: 'Change in Bike Riders Percentages in 2019/2020',
anchor: 'middle',
offset: 6,
fontSize: 16
})
.width(900)
.height(200)
const graph2 = vl.markRule({stroke: 'firebrick', strokeWidth: 3})
.data([{'week': 12.5}])
.encode(
vl.x().fieldQ('week')
);
return vl.layer(graph1, graph2).render()
}
md`
In week 12 of 2020 vs 2019, it is the week of largest increase of biker ridership. Moreover, it appears that starting from week 8 to 20, there are more than 6 weeks that experienced more than 100% increase. This shows bike ridership may be correlated with seasonality or sudden activity arising from people's turn to outdoors activity as public health experts advised against socialization indoors.
`
// filter by weeks 10-14
df3 = df.filter( d => d.week >= 10 && d.week < 15)
FileAttachment("last.png").image()
{
const new1 = vl.markBar()
.encode(
vl.y().fieldO('week'),
vl.x().fieldQ('pedestrians_14counters'),
vl.color().fieldQ('pedestrians_14counters').legend(null)
)
.width(900)
.height(200)
return vl.layer(new1)
.facet({row: vl.fieldQ('year')})
.data(df3)
.render()
}
md`
In the year of 2020, the number of pedestrians hitting the trails roughly doubled during week 11-14 while remaining at similar levels in week 10. It appears that Pedestrians are excited to hit outdoors after winter hibernation or pandemic lockdown policies and fatigue.
`
//Your code here**********************************************************
md`
## References
https://data.world/makeovermonday/2021w1/discuss/2021w1/nkpl7c4a
`
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.