Desigrammer.
Published
Edited
Feb 17, 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 colorroute = {
domain:['Berlin-Warsaw', 'London-Amsterdam', 'London-Marseille', 'Munich-Budapest', 'Paris-Barcelona', 'Zurich-Milan'],
range:['#79797A','#5175B3','#63C681','#E2BF80','#9ACABC','#9FADCA']
};
const colormode = {
domain:['Plane', 'Train'],
range:['#424BB7','#FECC4D']
};
//base case setting
const base = vl.markCircle({size: 60}).data(stats).encode(
vl.y().fieldN("Route").title(null).axis({ labels: false, ticks: false}),
vl.color().fieldN("Mode").legend({title: null, orient: "top", offset: 5, direction: "horizontal", labelFontSize: 12, labelFont: "Open Sans"}).scale(colormode),
vl.detail().fieldN("Route")
).width(275).height(300)
//Average CO2 Emission vs. Routes
const co2Ep = base.encode(
vl.x().average("CO2InKGramsPerPassenger")
.scale({domain: [0, 330]})
.axis({grid: null, ticks: false, tickCount:5, labelPadding:5, labelFontSize: 11, labelFont: "Open Sans",
title: "Average CO2 Emission (KG/Passenger)", titlePadding: 10, titleFontSize: 11, titleFontWeight: 600, titleFont: "Poppins"}),
vl.y().fieldN("Route").title(null).axis({labels:true, labelPadding: 10, ticks: false, labelFontSize: 11, labelFont: "Poppins"})
)
const co2El = co2Ep.markLine({size: 3, opacity: 0.5}).encode(
vl.x().fieldQ("CO2InKGramsPerPassenger"),
vl.color({value: "#ACACAC"})
).width(245).height(240)
const co2E = vl.layer(co2El, co2Ep)
//Average Travel Time vs. Routes
const traTp = base.encode(
vl.x().average("TravelTimeMinutes")
.scale({domain: [0, 450]})
.axis({grid: null, ticks: false, tickCount:5, labelPadding:5, labelFontSize: 11, labelFont: "Open Sans",
title: "Average Travel Time (Min)", titlePadding: 10, titleFontSize: 11, titleFontWeight: 600, titleFont: "Poppins"})
).width(265).height(240)
const traTl = traTp.transform(vl.filter('datum.WeeksAheadPurchased == "6"')).markLine({size: 3, opacity: 0.5}).encode(
vl.x().fieldQ("TravelTimeMinutes"),
vl.color({value: "#ACACAC"})
)
const traTime = vl.layer(traTl, traTp)
//Average Price & Range of Price in 6 weeks ahead vs. Routes
const priceLine = base.markLine({size: 3, opacity: 0.5}).encode(
vl.x().fieldQ("TicketPriceEuros")
.scale({domain: [0, 450]})
.axis({grid: null, ticks: false, tickCount:5, labelPadding:5, labelFontSize: 11, labelFont: "Open Sans",
title:"Average and Range of Price (Euro)", titlePadding: 10, titleFontSize: 11, titleFontWeight: 600, titleFont: "Poppins"})
).width(250).height(240)
const priceAvg = base.encode(
vl.x().average('TicketPriceEuros')
)
const price = vl.layer(priceLine, priceAvg)
// Price increasing over time
const priceTime = base.markLine({size: 3, interpolate: 'monotone', opacity: 0.9}).encode(
vl.x().fieldO('WeeksAheadPurchased').title(null).sort("descending")
.axis({labels:true, labelPadding:5, labelAngle:0, ticks: false, labelFontSize: 11, labelFont: "Open Sans",
title:"Purchased Time (Weeks Ahead)",
titlePadding: 10, titleFontSize: 11, titleFontWeight: 600, titleFont: "Poppins"}),
vl.y().fieldQ('TicketPriceEuros')
.scale({domain: [0, 450]})
.axis({grid: null, ticks: false, tickCount:5, labelPadding: 10, labelFontSize: 11, labelFont: "Open Sans",
title:"Price (Euro)", titleAngle:0, titleX:-42, titleY: 12, titlePadding: 10, titleFontSize: 11, titleFontWeight: 600, titleFont: "Poppins"}),
vl.color().fieldN("Mode").legend(null).scale(colormode)
).width(267)
// CO2 trades off with Travel Time
const co2vTimeP = vl.markPoint().data(stats).encode(
vl.x().average("CO2InKGramsPerPassenger")
.scale({domain: [0, 360]})
.axis({grid: null, labelPadding:5, ticks: false, tickCount:5, labelFontSize: 11, labelFont: "Open Sans",
title: "Average CO2 Emission (KG/Passenger)",
titlePadding: 10, titleFontSize: 11, titleFontWeight: 600, titleFont: "Poppins"}),
vl.y().average("TravelTimeMinutes")
.scale({domain: [0, 450]})
.axis({grid: null, labelPadding:10, ticks: false, tickCount:5, labelFontSize: 11, labelFont: "Open Sans",
title: "Time (Mins)", titleAngle:0, titleX:-48, titleY: 12, titlePadding: 10, titleFontSize: 11, titleFontWeight: 600, titleFont: "Poppins"}),
vl.shape().fieldN("Mode").legend({orient: "top-right", labelFontSize: 10, labelFont: "Open Sans"}),
vl.color().fieldO("Route").scale(colorroute).legend({orient: "top-right", labelFontSize: 10, labelFont: "Open Sans"})
).width(432).height(300)
const co2vTimeL = co2vTimeP.markLine({size: 3, opacity: 0.9})
.encode(
vl.x().fieldQ("CO2InKGramsPerPassenger"),
vl.y().average("TravelTimeMinutes"),
vl.detail().fieldN("Route")
)
const co2vTime = vl.layer(co2vTimeP, co2vTimeL)
// Return and Render
return vl.vconcat(vl.hconcat(co2E, traTime, price), vl.hconcat(priceTime, co2vTime)
.resolve({scale: {shape:"independent", color: "independent"}})) // Separate legends and colors
.spacing(30).background("white").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.
