Published
Edited
Feb 20, 2022
1 fork
viz-assignment
Loading Data
FileAttachment("avg_co2.csv").csv(), FileAttachment("cost_diff@4.csv").csv()
cost_df = FileAttachment("cost_diff@4.csv").csv({typed: true})
avg_co2_df = FileAttachment("avg_co2.csv").csv({typed: true})
Inputs.table(cost_df)
Inputs.table(avg_co2_df)
plot1 = Plot.plot({
y: {
grid: true,
label: "Average CO2 usage per passenger (kg)",
domain: [0, 340]
},
width: 700,
height: 500,
x: {
label: "Route",
axis: null
},
color: {
domain: ["plane", "train"],
range: ["grey", "#37a633"],
legend: true
},
marks: [
Plot.barY(avg_co2_df,
{x: d => d["Route"] + " " + d["Mode"],
y1: 0,
y2: "avg_co2",
fill: d => d["Mode"] == "Train" ? "train" : "plane"
}),
Plot.text(avg_co2_df,{
x: d => d["Route"] + " " + d["Mode"],
y: "avg_co2",
text: d => d["Route"].split("-")[0] + " to \n" + d["Route"].split("-")[1],
fontSize: 10,
dy: -25,
fill: "black",
})
]
})
plot2 = Plot.plot({
width: 500,
height: 500,
marginTop: 50,
marginLeft: 150,
marginRight: 150,
x: {
axis: "top",
domain: [0,1],
ticks: 1,
label: null,
},
y: {
domain: [0, 250],
axis: null,
// grid: true,
},
marks: [
//Plot.link(cost_df.filter(d => d["cost_diff"] > 0), {
Plot.link(cost_df,{
x1: 0,
y1: "plane_cost",
x2: 1,
y2: "avg_cost",
stroke: d => d["cost_diff"] > 0 ? "#37a633" : "grey",
}),
//Plot.text(cost_df.filter(d => d["cost_diff"] > 0), {
Plot.text(cost_df,{
x: 0,
y: "plane_cost",
text: d => d["Route"].split("-")[0] + " to " + d["Route"].split("-")[1] + ": " + "€" + Math.round(parseFloat(d["plane_cost"])),
//text: d => d["plane_cost"],
textAnchor: "end",
dx: -5,
dy: 1,
fill: d => d["cost_diff"] > 0 ? "#37a633" : "grey",
fontSize: 9.5,
}),
//Plot.text(cost_df.filter(d => d["cost_diff"] > 0), {
Plot.text(cost_df,{
x: 1,
y: "avg_cost",
text: d => d["Route"].split("-")[0] + " to " + d["Route"].split("-")[1] + ": " + "€" + Math.round(parseFloat(d["avg_cost"])),
textAnchor: "start",
dx: 5,
fill: d => d["cost_diff"] > 0 ? "#37a633" : "grey",
fontSize: 9.5,
})
]
})
<style>
* {
box-sizing: border-box;
}
.row {
display: flex;
}
.column {
padding: 5px;
}
</style>
<html>
<div class="row">
<div class="column">
<h3 style="font-family:sans-serif">Trains are better for the planet than planes.</h3>
${plot1}
</div>
<div class="column">
<h3 style="font-family:sans-serif">But for some trips, taking the train can be expensive.</h3>
<h5 style="font-family:sans-serif">Average Plane Fare vs. Average Train Fare</h5>
${plot2}
</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.
