md`## Load libraries, look at data`
md`Load in libraries`
import {vl} from '@vega/vega-lite-api'
d3 = require('d3')
import {printTable} from '@uwdata/data-utilities'
traveldata = FileAttachment("PairedAssignmentData@1.csv").text()
stats = d3.csvParse(await traveldata, d3.autoType)
md`Take a look at the first five records, using a nice formatter`
printTable(stats.slice(0,5))
md`Look at the end of the table with negative indexing`
printTable(stats.slice(-5,))
md`## Testing: build a few ranged dot plots`
{
const labelTicketPrice = ['Berlin-Warsaw','Zurich-Milan','Paris-Barcelona','London-Amsterdam','Munich-Budapest','London-Marseille'];
const point = vl.markPoint({filled: true, size: 60})
.data(stats)
.encode(
vl.x().fieldQ('AvgTicketPriceEuros').title('Average Ticket Price (Euros)'),
vl.y().fieldN('Route').sort(labelTicketPrice),
vl.color().fieldN('Mode').legend({labelFontSize: 15, titleFontSize: 15, orient: 'top'})
);
const line = point.markLine()
.encode(
vl.detail().fieldN('Route'),
vl.color().value("#A9A9A9")
);
return vl.layer(point,line).width(600).height(400)
.title({text: "Difference of Ticket Price", fontSize: 18})
.render();
}
{
const labelCO2 = ['Zurich-Milan','Paris-Barcelona','London-Amsterdam','Munich-Budapest','London-Marseille','Berlin-Warsaw'];
const point = vl.markPoint({filled: true, size: 50})
.data(stats)
.encode(
vl.x().fieldQ('CO2InKGramsPerPassenger').title('Average CO2 Emissions Per Passenger (kg)'),
vl.y().fieldN('Route').sort(labelCO2),
vl.color().fieldN('Mode').legend({labelFontSize: 15, titleFontSize: 15, orient: 'top'})
);
const line = point.markLine()
.encode(
vl.detail().fieldN('Route'),
vl.color().value("#A9A9A9")
);
return vl.layer(point,line).width(600).height(400)
.title({text: "Difference of CO2 Emission", fontSize: 18})
.render();
}
{
const labeltraveltime = ['Zurich-Milan','London-Amsterdam','Munich-Budapest','Berlin-Warsaw','Paris-Barcelona','London-Marseille'];
const point = vl.markPoint({filled: true, size: 50})
.data(stats)
.encode(
vl.x().fieldQ('AvgTravelTimeMinutes').title('Average Travel Time (min)'),
vl.y().fieldN('Route').sort(labeltraveltime),
vl.color().fieldN('Mode').legend({labelFontSize: 15, titleFontSize: 15, orient: 'top'})
);
const line = point.markLine()
.encode(
vl.detail().fieldN('Route'),
vl.color().value("#A9A9A9")
);
return vl.layer(point,line).width(600).height(400)
.title({text: "Difference of Travel Time", fontSize: 18})
.render();
}
md`# Our Final Visualization`
{
`md Difference of Ticket Price Chart`
const labelTicketPrice = ['Berlin-Warsaw','Zurich-Milan','Paris-Barcelona','London-Amsterdam','Munich-Budapest','London-Marseille'];
const point1 = vl.markPoint({filled: true, size: 100})
.data(stats)
.encode(
vl.x().fieldQ('AvgTicketPriceEuros').title('Average Ticket Price (Euros)'),
vl.y().fieldN('Route').sort(labelTicketPrice),
vl.color().fieldN('Mode')
.legend({labelFontSize: 18, titleFontSize: 18, titleAnchor: 'middle', orient:'top'})
);
const line1 = point1.markLine({strokeWidth: 3, strokeDash: [8, 4], opacity: 0.8})
.encode(
vl.detail().fieldN('Route'),
vl.color().value("#B0C4DE")
);
const ticketchart = vl.layer(point1,line1).width(400).height(200)
.title({text: "Difference of Ticket Price (Financial Cost)", fontSize: 15});
`md Difference of CO2 emission Chart`
const labelCO2 = ['Zurich-Milan','Paris-Barcelona','London-Amsterdam','Munich-Budapest','London-Marseille','Berlin-Warsaw'];
const point2 = vl.markPoint({filled: true, size: 100})
.data(stats)
.encode(
vl.x().fieldQ('CO2InKGramsPerPassenger').title('Average CO2 Emissions Per Passenger (kg)'),
vl.y().fieldN('Route').sort(labelCO2),
vl.color().fieldN('Mode').legend(null)
);
const line2 = point2.markLine({strokeWidth: 3, strokeDash: [8, 4], opacity: 0.8})
.encode(
vl.detail().fieldN('Route'),
vl.color().value("#B0C4DE")
);
const co2chart = vl.layer(point2,line2).width(400).height(200)
.title({text: "Difference of CO2 Emission (Environmental Cost)", fontSize: 15});
`md Difference of Ticket Price Chart`
const labeltraveltime = ['Zurich-Milan','London-Amsterdam','Munich-Budapest','Berlin-Warsaw','Paris-Barcelona','London-Marseille'];
const point3 = vl.markPoint({filled: true, size: 100})
.data(stats)
.encode(
vl.x().fieldQ('AvgTravelTimeMinutes').title('Average Travel Time (min)'),
vl.y().fieldN('Route').sort(labeltraveltime),
vl.color().fieldN('Mode').legend(null)
);
const line3 = point3.markLine({strokeWidth: 3, strokeDash: [8, 4], opacity: 0.8})
.encode(
vl.detail().fieldN('Route'),
vl.color().value("#B0C4DE")
);
const traveltimechart = vl.layer(point3,line3).width(400).height(200)
.title({text: "Difference of Travel Time (Time Cost)", fontSize: 15});
`md Putting together three charts`
return vl.vconcat(ticketchart, co2chart, traveltimechart)
.title({text: 'Comparing Travel Costs By Taking Plane and Train', fontSize: 25, fontType: 'Tahoma', anchor: 'middle'})
.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.
