Public
Edited
Feb 13, 2023
d3 = require("d3-dsv");
import {GroupedBarChart} from "@d3/grouped-bar-chart";
vizData = FileAttachment("CO2_data.csv").csv({typed: true})
vizDataG1 = vizData.filter(d => d['Route'] == "Berlin-Warsaw" || d['Route'] == "London-Marseille" || d['Route'] == "London-Amsterdam");
vizDataG2 = vizData.filter(d => d['Route'] == "Zurich-Milan" || d['Route'] == "Paris-Barcelona" || d['Route'] == "Munich-Budapest");
plot1 = Plot.plot({
grid: false,
inset: 2,
height: 320,
width: 450,
x: { label: "Weeks ahead of ticket purchase →", tickSize: 0 },
y: { label: "↑ Ticket price (in Euros)", tickSize: 0},
color: { legend: true },
facet: {
data: vizDataG1,
y: "Route",
marginRight: 120
},
marks: [
Plot.line(vizDataG1, {
x: "WeeksAheadPurchased",
y: "TicketPriceEuros",
z: "Mode",
stroke: "Mode"
}),
],
// caption: "How ticket prices vary based on when they were bought",
});
plot2 = Plot.plot({
grid: false,
inset: 2,
height: 320,
width: 450,
x: { label: "Weeks ahead of ticket purchase →", tickSize: 0 },
y: { label: "↑ Ticket price (in Euros)", tickSize: 0 },
color: { legend: true },
facet: {
data: vizDataG2,
y: "Route",
marginRight: 120
},
marks: [
Plot.line(vizDataG2, {
x: "WeeksAheadPurchased",
y: "TicketPriceEuros",
z: "Mode",
stroke: "Mode"
}),
],
});
carbonFootprint = aq
.from(vizData)
.groupby("Route", "Mode")
.rollup({
min: (d) => aq.op.min(d.CO2InKGramsPerPassenger),
avg: (d) => aq.op.mean(d.CO2InKGramsPerPassenger),
max: (d) => aq.op.max(d.CO2InKGramsPerPassenger),
})
.orderby("Route", "Mode")
.objects();
travelTime = aq
.from(vizData)
.groupby("Route", "Mode")
.rollup({
min: (d) => aq.op.min(d.TravelTimeMinutes),
avg: (d) => aq.op.round(aq.op.mean(d.TravelTimeMinutes)),
max: (d) => aq.op.max(d.TravelTimeMinutes),
})
.orderby("Route", "Mode")
.objects();
travelTimePlot = Plot.plot({
// caption: "Average Travel time for each route",
x: { label: "Route", tickSize: 0, tickRotate: -15 },
y: { label: "↑ Avg travel Time (in minutes)"},
height: 420,
width: 450,
marginBottom: 50,
color: {
type: "categorical",
legend: true,
scheme : "category10",
},
marks: [
Plot.barY(travelTime, {x: "Route", y: "avg", fill: "Mode",
}),
]
});
carbonFootprintPlot = Plot.plot({
// caption: "Carbon footprint for each route",
x: { label: "Route", tickSize: 0, tickRotate: -15 },
y: { label: "↑ Carbon per passenger (in KGrams)"},
height: 420,
width: 450,
marginBottom: 50,
color: {
type: "categorical",
legend: true,
scheme : "category10",
},
marks: [
Plot.barY(carbonFootprint, {x: "Route", y: "avg", fill: "Mode",
}),
]
});
<style>
#heading {
text-align: center;
margin-bottom: 25px;
}
.container {
width: 900px;
height: 900px;
border: 2px solid black;
padding: 1.5em;
}
.row {
display: flex;
}
.column {
padding: 5px;
}
.h6 {
font-family: sans-serif;
text-align: center;
margin-bottom: -50px;
}
.chart {
margin: 0auto;
}
.less-bottom-margin {
margin-bottom: -20px
}
</style>
<html>
<div class="container">
<h4 id="heading">What factors should you consider around European Travel?</h4>
<h6 class="less-bottom-margin">
Ticket prices across different modes of transportation based on weeks
ahead of purchase
</h6>
<div class="row">
<div class="column">
<div class="chart">${plot1}</div>
</div>
<div class="column">
<div class="chart">${plot2}</div>
</div>
</div>
<div class="row">
<div class="column">
<h6 class="less-bottom-margin">Carbon footprint for each mode of transportation</h6>
<div class="chart">${carbonFootprintPlot}</div>
</div>
<div class="column">
<h6 class="less-bottom-margin">Average travel time for each mode of transportation</h6>
<div class="chart">${travelTimePlot}</div>
</div>
</div>
</div>
</html>
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.
