Published
Edited
Feb 14, 2020
1 fork
md`# Project 1`
md `test`
import {vl} from '@vega/vega-lite-api'
d3 = require('d3')
import {printTable} from '@uwdata/data-utilities'
paired = d3.csvParse(await FileAttachment("PairedAssignmentData.csv").text(), d3.autoType)
printTable(paired.slice(0,5))
line = vl.markLine({strokeWidth:3, opacity: 0.5, interpolate: 'monotone'})
.data(paired)
.encode(
vl.x().fieldQ('WeeksAheadPurchased')
.title('Weeks Ahead Purchased')
.axis({labelAngle:0, tickCount: 6}),
vl.y().fieldQ('TicketPriceEuros')
.title('Ticket Price in Euros'),
vl.color().fieldN('Mode'),
vl.row().fieldN('Route'));
point = vl.markPoint({size: 100, filled: true})
.data(paired)
.encode(
vl.x().fieldQ('WeeksAheadPurchased')
.title('Weeks Ahead Purchased')
.axis({tickCount: 6}),
vl.y().fieldQ('TicketPriceEuros')
.title('Ticket Price in Euros'),
vl.color().fieldN('Mode'),
vl.row().fieldN('Route'));
{ const line = vl.markLine({strokeWidth:9, opacity: 0.4, interpolate: 'monotone'})
.encode(
vl.x().fieldQ('WeeksAheadPurchased')
.title('Weeks Ahead Purchased')
.axis({labelAngle:0, tickCount: 6}),
vl.y().fieldQ('TicketPriceEuros')
.title('Ticket Price in Euros'),
vl.color().fieldN('Mode'));
const point = vl.markPoint({size: 100, filled: true, shape: 'circle'})
.encode(
vl.x().fieldQ('WeeksAheadPurchased')
.title('Weeks Ahead Purchased')
.axis({labelAngle:0, tickCount: 6}),
vl.y().fieldQ('TicketPriceEuros')
.title('Ticket Price in Euros'),
vl.color().fieldN('Mode'));
return vl.layer(line, point)
.facet({row: {field: 'Route',
header: {title: null, labelAngle:360, labelAlign: 'left', labelFont: 'Helvetica',
labelFontStyle: 'bold', labelFontSize: 12},
sort: ['Zurich-Milan', 'London-Amsterdam', 'Berlin-Warsaw', 'Munich-Budapest',
'London-Marseille', 'Paris-Barcelona',]}})
.data(paired)
.title({
text: "Travel in Europe by Route",
fontSize: 25,
font: "Helvetica",
anchor: "middle"})
.resolve({axis: {x: 'independent'}})
.render();
}
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.
