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().fieldO("year")
)
.width(700)
.render()
FileAttachment("5.png").image()
{
const line = vl.markLine({strokeWidth: 3, opacity: 0.5, interpolate: 'monotone'})
.data(df)
.encode(
vl.x().fieldO("week").axis({labelAngle:[0]}).title('Week'),
vl.y().fieldQ("bikes_14counters").title('Number of Bike Riders'),
vl.color().fieldO("year").title('Year')
)
const point = vl.markPoint({size:70, filled:true})
.data(df)
.encode(
vl.x().fieldO("week"),
vl.y().fieldQ("bikes_14counters"),
vl.color().fieldO("year")
.scale({domain:[2019,2020], range:['#FF8C00','#9400D3']}),
vl.shape().fieldO("year")
.scale({domain:[2019,2020], range:['circle','triangle']})
)
return vl.layer(line, point)
.width(700)
.height(200)
.title({text:'Bike Rider Count Comparison', fontSize:14})
.render()
}
FileAttachment("6.png").image()
{
const line = vl.markLine({strokeWidth: 3, opacity: 0.5, interpolate: 'monotone'})
.data(df)
.encode(
vl.x().fieldO("week").axis({labelAngle:[0]}).title('Week'),
vl.y().fieldQ("bikes_14counters").title('Number of Bike Riders'),
vl.color().fieldO("year").title('Year')
.legend({orient:'top-right'})
)
const point = vl.markPoint({size:70, filled:true})
.data(df)
.encode(
vl.x().fieldO("week"),
vl.y().fieldQ("bikes_14counters"),
vl.color().fieldO("year")
.scale({domain:[2019,2020], range:['#FF8C00','#9400D3']}),
vl.shape().fieldO("year")
.scale({domain:[2019,2020], range:['circle','triangle']})
)
const rline = vl.markRule({stroke: 'firebrick'})
.data(df.filter(d=> d.week === 12))
.encode(
vl.x().fieldO('week')
)
return vl.layer(line, point, rline)
.width(700)
.height(200)
.title({text:'Bike Rider Count Comparison', fontSize:14})
.render()
}
FileAttachment("7@1.png").image()
{
const bikeline = vl.markLine({strokeWidth: 3, opacity: 0.5, interpolate: 'monotone'})
.data(df)
.encode(
vl.x().fieldO("week").axis(null),
vl.y().fieldQ("bikes_14counters").title('# of Bike Riders'),
vl.color().fieldO("year").title('Year')
.legend({orient:'top-right'})
)
const bikepoint = vl.markPoint({size:70, filled:true})
.data(df)
.encode(
vl.x().fieldO("week"),
vl.y().fieldQ("bikes_14counters"),
vl.color().fieldO("year")
.scale({domain:[2019,2020], range:['#FF8C00','#9400D3']}),
vl.shape().fieldO("year")
.scale({domain:[2019,2020], range:['circle','triangle']})
)
const bikeredline = vl.markRule({stroke: 'firebrick'})
.data(df.filter(d=> d.week === 12))
.encode(
vl.x().fieldO('week')
)
const bike = vl.layer(bikeline, bikepoint, bikeredline)
.width(700)
.height(200)
.title({text:'Bike Riders', fontSize:14})
const pedline = vl.markLine({strokeWidth: 3, opacity: 0.5, interpolate: 'monotone'})
.data(df)
.encode(
vl.x().fieldO("week").axis({labelAngle:[0]}).title('Week'),
vl.y().fieldQ("pedestrians_14counters").title('# of Pedestrians'),
vl.color().fieldO("year")
.legend(null)
)
const pedpoint = vl.markPoint({size:70, filled:true})
.data(df)
.encode(
vl.x().fieldO("week"),
vl.y().fieldQ("pedestrians_14counters"),
vl.color().fieldO("year")
.scale({domain:[2019,2020], range:['#FF8C00','#9400D3']}),
vl.shape().fieldO("year")
.scale({domain:[2019,2020], range:['circle','triangle']})
)
const pedredline = vl.markRule({stroke: 'firebrick'})
.data(df.filter(d=> d.week === 12))
.encode(
vl.x().fieldO('week')
)
const pedestrian = vl.layer(pedline, pedpoint, pedredline)
.width(700)
.height(200)
.title({text:'Pedestrians', fontSize:14})
return vl.vconcat(bike, pedestrian)
.title({text:'Comparison of Number of Bike Riders/Pedestrians on Trails in 2019/2020', anchor: 'middle', fontSize:20})
.render()
}
md`
The number of bike riders and pedestrians in early 2019 were similar to the numbers in 2020 (before Week 12). After Week 12, difference in numbers between 2019 and 2020 grew, with more bike riders and pedestrians in 2020. The difference is even greater with bike riders. There is also an instance around week 21 where there is a very high number of pedestrians but it is not clear in the data why this is the case.
`
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
})
printTable(df2)
FileAttachment("8.png").image()
{
const req1 = vl.markBar()
.data(df2)
.encode(
vl.y().fieldQ("percentages").title('Change of Bikers in 2020 from 2019 (%)'),
vl.x().fieldO("week").axis({labelAngle:[0]}).title('Week'),
vl.color().fieldQ("percentages").legend(null)
)
const req2 = vl.markRule({stroke: 'firebrick'})
.data(df2.filter(d=> d.week === 12))
.encode(
vl.x().fieldO('week')
)
return vl.layer(req1,req2)
.title({text: 'Change in Bike Riders Percentages in 2019/2020', anchor: 'middle', fontSize: 20})
.render()
}
md`
This highest percent change in the number of bike riders was the very same week that many companies were enforcing telework, Week 12. Week 14 was the week with the second highest percent change, and the other weeks fluctuated around a 50 - 100% increase in bike riders from 2019 to 2020.
`
df3 = df.filter(d=> d.week > 9 && d.week < 15)
FileAttachment("last.png").image()
vl.markBar()
.encode(
vl.y().fieldO('week'),
vl.x().fieldQ('pedestrians_14counters'),
vl.color().fieldO('pedestrians_14counters').legend(null)
)
.facet({row:vl.fieldO('year')})
.data(df3)
.render()
md`
For the weeks 10-14, there are significantly higher counts of pedestrians in 2020 than there are in 2019.
`
//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.