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.data(df)
.layer(
vl.markLine({stroke: 'Purple', strokeWidth: 3, opacity: 0.5, interpolate: 'monotone'})
.transform(vl.filter('datum.year === 2020'))
.encode(
vl.x().fieldO('week').axis({labelAngle: 0}).title('Week'),
vl.y().fieldQ('bikes_14counters').title('Bike Riders on the 14 Train'),
vl.color().fieldN('year')
),
vl.markLine({stroke: 'Orange', strokeWidth: 3, opacity: 0.5, interpolate: 'monotone'})
.transform(vl.filter('datum.year === 2019'))
.encode(
vl.x().fieldO('week').axis({labelAngle: 0}).title('Week'),
vl.y().fieldQ('bikes_14counters').title('Bike Riders on the 14 Train'),
vl.color().fieldN('year')
),
vl.markPoint({fill: 'Orange', size: 60, filled: true})
.transform(vl.filter('datum.year === 2019'))
.encode(
vl.x().fieldO('week'),
vl.y().fieldQ('bikes_14counters'),
vl.color().fieldN('year').legend(true),
vl.tooltip().fieldQ('bikes_14counters')
),
vl.markPoint({size: 60, filled: true, shape: 'triangle-up', fill: 'Purple'})
.transform(vl.filter('datum.year === 2020'))
.encode(
vl.x().fieldO('week'),
vl.y().fieldQ('bikes_14counters'),
vl.color().fieldN('year').legend(),
vl.tooltip().fieldQ('bikes_14counters')
),
vl.markRule({stroke: 'firebrick', strokeWidth: 2})
.transform(vl.filter('datum.week === 12'))
.encode(
vl.x().fieldO('week')
)
)
.title('Bike Riders on the 14 Train Each Week')
.width(700)
.height(200)
.render()
FileAttachment("5.png").image()
//Your code here**********************************************************
FileAttachment("6.png").image()
{const bike = vl.data(df)
.layer(
vl.markLine({stroke: 'Purple', strokeWidth: 3, opacity: 0.5, interpolate: 'monotone'})
.transform(vl.filter('datum.year === 2020'))
.encode(
vl.x().fieldO('week').axis({labelAngle: 0}).title('Week').axis(false),
vl.y().fieldQ('bikes_14counters').title('Bike Riders on the 14 Train'),
vl.color().fieldN('year'),
),
vl.markLine({stroke: 'Orange', strokeWidth: 3, opacity: 0.5, interpolate: 'monotone'})
.transform(vl.filter('datum.year === 2019'))
.encode(
vl.x().fieldO('week').axis({labelAngle: 0}).title('Week').axis(false),
vl.y().fieldQ('bikes_14counters').title('Bike Riders on the 14 Train'),
vl.color().fieldN('year').scale({domain: ['2019', '2020'], range: ['Orange', 'Purple'], shape: ['circle', 'triangle-up']}).legend({orient: 'top-right'}),
),
vl.markPoint({fill: 'Orange', size: 60, filled: true})
.transform(vl.filter('datum.year === 2019'))
.encode(
vl.x().fieldO('week'),
vl.y().fieldQ('bikes_14counters'),
vl.color().fieldN('year').legend(true),
vl.tooltip(['year','bikes_14counters', 'week','starting_from'])
),
vl.markPoint({size: 60, filled: true, shape: 'triangle-up', fill: 'Purple'})
.transform(vl.filter('datum.year === 2020'))
.encode(
vl.x().fieldO('week'),
vl.y().fieldQ('bikes_14counters'),
vl.color().fieldN('year').legend(),
vl.tooltip(['year','bikes_14counters', 'week','starting_from'])
),
vl.markRule({stroke: 'firebrick', strokeWidth: 2})
.transform(vl.filter('datum.week === 12'))
.encode(
vl.x().fieldO('week')
)
)
.title('Bike Riders')
.width(700)
.height(200)
const peds = vl.data(df)
.layer(
vl.markLine({stroke: 'Purple', strokeWidth: 3, opacity: 0.5, interpolate: 'monotone'})
.transform(vl.filter('datum.year === 2020'))
.encode(
vl.x().fieldO('week').axis({labelAngle: 0}).title('Week'),
vl.y().fieldQ('pedestrians_14counters').title('Pedestrians on the 14 Train'),
vl.color().fieldN('year'),
),
vl.markLine({stroke: 'Orange', strokeWidth: 3, opacity: 0.5, interpolate: 'monotone'})
.transform(vl.filter('datum.year === 2019'))
.encode(
vl.x().fieldO('week').axis({labelAngle: 0}).title('Week'),
vl.y().fieldQ('pedestrians_14counters').title('Pedestrians on the 14 Train'),
vl.color().fieldN('year'),
vl.tooltip().fieldO('year'),
vl.tooltip().fieldQ('pedestrians_14counters'),
vl.tooltip().fieldO('week')
),
vl.markPoint({fill: 'Orange', size: 60, filled: true})
.transform(vl.filter('datum.year === 2019'))
.encode(
vl.x().fieldO('week'),
vl.y().fieldQ('pedestrians_14counters'),
vl.color().fieldN('year').legend(true),
vl.tooltip(['year','pedestrians_14counters', 'week','starting_from'])
),
vl.markPoint({size: 60, filled: true, shape: 'triangle-up', fill: 'Purple'})
.transform(vl.filter('datum.year === 2020'))
.encode(
vl.x().fieldO('week'),
vl.y().fieldQ('pedestrians_14counters'),
vl.color().fieldN('year').legend(),
vl.tooltip(['year','pedestrians_14counters', 'week','starting_from'])
),
vl.markRule({stroke: 'firebrick', strokeWidth: 2})
.transform(vl.filter('datum.week === 12'))
.encode(
vl.x().fieldO('week')
)
)
.title('Pedestrians')
.width(700)
.height(200)
return vl.vconcat(bike, peds).title('Comparison of Number of Bike Riders/Pedestrians on Trails in 2019-20').render();
}
FileAttachment("7@1.png").image()
{const bike = vl.data(df)
.layer(
vl.markLine({stroke: 'Purple', strokeWidth: 3, opacity: 0.5, interpolate: 'monotone'})
.transform(vl.filter('datum.year === 2020'))
.encode(
vl.x().fieldO('week').axis({labelAngle: 0}).title('Week').axis(false),
vl.y().fieldQ('bikes_14counters').title('Bike Riders on the 14 Train'),
vl.color().fieldN('year'),
),
vl.markLine({stroke: 'Orange', strokeWidth: 3, opacity: 0.5, interpolate: 'monotone'})
.transform(vl.filter('datum.year === 2019'))
.encode(
vl.x().fieldO('week').axis({labelAngle: 0}).title('Week').axis(false),
vl.y().fieldQ('bikes_14counters').title('Bike Riders on the 14 Train'),
vl.color().fieldN('year').scale({domain: ['2019', '2020'], range: ['Orange', 'Purple'], shape: ['circle', 'triangle-up']}).legend({orient: 'top-right'}),
),
vl.markPoint({fill: 'Orange', size: 60, filled: true})
.transform(vl.filter('datum.year === 2019'))
.encode(
vl.x().fieldO('week'),
vl.y().fieldQ('bikes_14counters'),
vl.color().fieldN('year').legend(true),
vl.tooltip(['year','bikes_14counters', 'week','starting_from'])
),
vl.markPoint({size: 60, filled: true, shape: 'triangle-up', fill: 'Purple'})
.transform(vl.filter('datum.year === 2020'))
.encode(
vl.x().fieldO('week'),
vl.y().fieldQ('bikes_14counters'),
vl.color().fieldN('year').legend(),
vl.tooltip(['year','bikes_14counters', 'week','starting_from'])
),
vl.markRule({stroke: 'firebrick', strokeWidth: 2})
.transform(vl.filter('datum.week === 12'))
.encode(
vl.x().fieldO('week')
)
)
.title('Bike Riders')
.width(700)
.height(200)
const peds = vl.data(df)
.layer(
vl.markLine({stroke: 'Purple', strokeWidth: 3, opacity: 0.5, interpolate: 'monotone'})
.transform(vl.filter('datum.year === 2020'))
.encode(
vl.x().fieldO('week').axis({labelAngle: 0}).title('Week'),
vl.y().fieldQ('pedestrians_14counters').title('Pedestrians on the 14 Train'),
vl.color().fieldN('year'),
),
vl.markLine({stroke: 'Orange', strokeWidth: 3, opacity: 0.5, interpolate: 'monotone'})
.transform(vl.filter('datum.year === 2019'))
.encode(
vl.x().fieldO('week').axis({labelAngle: 0}).title('Week'),
vl.y().fieldQ('pedestrians_14counters').title('Pedestrians on the 14 Train'),
vl.color().fieldN('year'),
vl.tooltip().fieldO('year'),
vl.tooltip().fieldQ('pedestrians_14counters'),
vl.tooltip().fieldO('week')
),
vl.markPoint({fill: 'Orange', size: 60, filled: true})
.transform(vl.filter('datum.year === 2019'))
.encode(
vl.x().fieldO('week'),
vl.y().fieldQ('pedestrians_14counters'),
vl.color().fieldN('year').legend(true),
vl.tooltip(['year','pedestrians_14counters', 'week','starting_from'])
),
vl.markPoint({size: 60, filled: true, shape: 'triangle-up', fill: 'Purple'})
.transform(vl.filter('datum.year === 2020'))
.encode(
vl.x().fieldO('week'),
vl.y().fieldQ('pedestrians_14counters'),
vl.color().fieldN('year').legend(),
vl.tooltip(['year','pedestrians_14counters', 'week','starting_from'])
),
vl.markRule({stroke: 'firebrick', strokeWidth: 2})
.transform(vl.filter('datum.week === 12'))
.encode(
vl.x().fieldO('week')
)
)
.title('Pedestrians')
.width(700)
.height(200)
return vl.vconcat(bike, peds).title('Comparison of Number of Bike Riders/Pedestrians on Trails in 2019-20').render();
}
md`
Despite the pandemic, for the most part more people rode the 14 train in 2020 than in 2019.
`
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.slice(0, 12))
FileAttachment("8.png").image()
vl.data(df2)
.layer(
vl.markBar()
.encode(
vl.x().fieldO('week').title('Week'),
vl.y().fieldQ('percentages').title('Changes of Bikers in 2020 from 2019(%)'),
vl.color().fieldQ('percentages').legend(false),
vl.tooltip(['starting_from', 'bikers_19', 'bikers_20', 'percentages'])
),
vl.markRule({stroke:'firebrick', strokeWidth: 3})
.transform(vl.filter ('datum.week == 12'))
.encode(
vl.x().fieldO('week')
)
)
.width(800)
.title('Change in Bike Rider Percentages in 2019/20')
.render()
md`
The week of the pandemic there was a massive spike in people riding their bikes.
`
df3 = df.filter (d => d.week > 9 && d.week < 15)
FileAttachment("last.png").image()
vl.markBar()
.data(df.filter(d => d.week > 9 && d.week <= 15))
.encode(
vl.x().fieldQ('pedestrians_14counters'),
vl.y().fieldN('week'),
vl.color().fieldQ('pedestrians_14counters').legend(false),
vl.row().fieldN('year')
)
.width(700)
.render()
md`
After the pandemic began many more people began riding trains.
`
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.
