Desigrammer.
Published
Edited
Feb 16, 2020
md`# Paird Assignment`
md`## Author: Ryan Liu, Yunjie Yao`
import {vl} from '@vega/vega-lite-api'
d3 = require('d3')
import {printTable} from '@uwdata/data-utilities'
stats = d3.csvParse(await FileAttachment("PairedAssignmentData.csv").text(), d3.autoType)
printTable(stats.slice(0,5))
{
const pricePlane = vl.markLine().data(stats)
.transform(vl.filter('datum.Mode == "Plane"'))
.encode(
vl.x().fieldQ("TicketPriceEuros").scale({domain: [0, 450]}),
// .title("Number of Requests"),
vl.y().fieldN("Route")
.title("Plane's Ticket Price")
.axis({ titleAngle: 0, titleX: 0, titleY: -10}),
vl.color().fieldN("Route")
.scale({range:['rgb(47,158,226)']})
.legend(null)
).width(250)
const priceTrain = vl.markLine().data(stats)
.transform(vl.filter('datum.Mode == "Train"'))
.encode(
vl.x().fieldQ("TicketPriceEuros").scale({domain: [0, 450]}),
// .title("Number of Requests"),
vl.y().fieldN("Route")
.title("Train's Ticket Price")
.axis({ titleAngle: 0, titleX: 0, titleY: -10}),
vl.color().fieldN("Route").legend(null)
.scale({range:['rgb(48,231,132)']})
// .scale(color).legend({orient: "top-left"})
).width(250)
const priceAvg = vl.markPoint().data(stats)
// .transform(vl.filter('datum.Mode == "Plane"'))
// .transform(vl.filter('datum.Mode == "Berlin-Warsaw"'))
.encode(
// vl.x().fieldQ("TicketPriceEuros"),
vl.x().average('TicketPriceEuros').scale({domain: [0, 450]}),
// .title("Number of Requests"),
vl.y().fieldN("Route")
.axis({ titleAngle: 0, titleX: 0, titleY: -10}),
vl.color().fieldN("Mode").legend(null),
vl.shape().fieldN("Mode")
// .scale(color).legend({orient: "top-left"})
).width(250)
return vl.vconcat(pricePlane, priceTrain, priceAvg)
.render()
}
{
// const priceBar = stats.filter((a) => a["WeeksAheadPurchased"]===6 || a["WeeksAheadPurchased"]===1)
const priceLine = vl.markLine().data(stats)
.transform(vl.filter({field: "WeeksAheadPurchased", oneOf: [1, 6]}))
.encode(
vl.x().fieldQ("TicketPriceEuros").scale({domain: [0, 450]}),
// vl.x2().fieldQ("TicketPriceEuros"),
// .title("Number of Requests"),
vl.y().fieldN("Route")
.title("Ticket Price")
.axis({ titleAngle: 0, titleX: 0, titleY: -10}),
vl.color().fieldN("Mode")
// .scale(color).legend({orient: "top-left"})
).width(250)
const priceAvg = vl.markPoint().data(stats)
// .transform(vl.filter('datum.Mode == "Plane"'))
// .transform(vl.filter('datum.Mode == "Berlin-Warsaw"'))
.encode(
// vl.x().fieldQ("TicketPriceEuros"),
vl.x().average('TicketPriceEuros').scale({domain: [0, 450]}),
// .title("Number of Requests"),
vl.y().fieldN("Route")
.axis({ titleAngle: 0, titleX: 0, titleY: -10}),
vl.color().fieldN("Mode"),
vl.shape().fieldN("Mode")
// .scale(color).legend({orient: "top-left"})
).width(250)
return vl.vconcat(priceLine, priceAvg)
.render()
}
vl.markPoint({filled: true}).data(stats)
.encode(
vl.x().average('CO2InKGramsPerPassenger').title('CO2PerPassenger'),
vl.y().fieldN("Route").title(null)
.axis({ titleAngle: 0, titleX: -20, titleY: -10}),
vl.color().fieldN("Mode"),
).width(250).height(150)
.title('Compare CO2')
.render()
vl.markPoint({filled: true}).data(stats)
.encode(
vl.x().average('TravelTimeMinutes').title('TravelTime'),
vl.y().fieldN("Route").title(null)
.axis({ titleAngle: 0, titleX: -10, titleY: -10}),
vl.color().fieldN("Mode")
).width(250).height(150)
.title('Compare Traveltime')
.render()
{
const timePoint = vl.markPoint({filled: true})
.encode(
vl.x().average('TravelTimeMinutes').title('TravelTime'),
vl.y().fieldN('Route').title(null)
.axis({ titleAngle: 0, titleX: -10, titleY: -10}),
vl.color().fieldN("Mode"),
).width(250).height(150)
.title('Compare Traveltime');
const timeLine = vl.markLine()
.encode(
vl.x().fieldQ('TravelTimeMinutes').title(null),
vl.y().fieldN('Mode').title(null)
);
return vl.layer(timePoint, timeLine).data(stats).render()
}
vl.markPoint({filled: true}).data(stats)
.encode(
vl.x().average('TicketPriceEuros').title('Price'),
vl.y().fieldN("Route").title(null)
.axis({ titleAngle: 0, titleX: -10, titleY: -10}),
vl.color().fieldN("Mode"),
).width(250).height(150)
.title('Compare Price')
.render()
{
const colors = {
domain:['Plane', 'Train'],
range:['#394BE5','#FD9831']
};
const base = vl.markPoint({filled: true})
.encode(
vl.y().fieldN("Route").title(null)
.axis({ titleAngle: 0, titleX: -10, titleY: -10}),
vl.color().fieldN("Mode").scale(colors),
)
.width(180).
height(150);
const price = base.encode(vl.x().average('TicketPriceEuros').title('Price')).title('Compare Price');
const time = base.encode(vl.x().average('TravelTimeMinutes').title('Travel Time')).title('Compare Time');
const co2 = base.encode(vl.x().average('CO2InKGramsPerPassenger').title('CO2PerPassenger')).title('Compare CO2');
return vl.data(stats).hconcat(price, time, co2).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.
