Designer / Developer
Published
Edited
Feb 22, 2022
1 star
Assignment: Visualization That Answers Many Questions in a Constrained Space
df = FileAttachment("CO2_data.csv").csv({typed: true})
co2plot = Plot.plot({
width: 1000,
style: {
fontFamily: "sans-serif",
},
x: {
axis: null,
domain: df.Mode
},
y: {
label: "Kilograms per passenger",
grid: true,
tickFormat: "s"
},
color: {
legend: true,
domain: df.Mode,
type: "categorical",
scheme: "set2"
},
facet: {
data: df,
x: "Route"
},
fx:{
label: "Routes"
},
marks: [
Plot.barY(df, Plot.groupX({y:"mean"},{x: "Mode", y: "CO2InKGramsPerPassenger", fill: "Mode", title: "Mode"})),
Plot.ruleY([0]),
Plot.text(df, {x: "Mode", y: "CO2InKGramsPerPassenger", text: d => (d.CO2InKGramsPerPassenger).toFixed(0), dy: -5}),
]
})
<div>
<h2 style="text-align:left; font-family:sans-serif; color:#232323;">Carbon Emissions: Planes vs. Trains</h1>
<p style="text-align:left; font-family:sans-serif; color: #767676;">Airplanes produce significantly more carbon emissions than trains, regardless of travel route. </p>
${co2plot}
</div>
// Create a line chart tracking ticket prices to weeks purchases
pricePlot = Plot.plot({
width:1000,
height: 400,
inset: 20,
style:{
fontSize:24,
},
color:{
legend: true,
scheme: "tableau10"
},
x: {
label: null,
reverse: true,
domain:[1,6]
},
y: {
symbol:"€",
label: "Ticket Price - Euros",
ticks:10,
grid: true
},
facet: {
data: df,
x: "Mode",
margin: 25,
},
fx:{
label: "Number of weeks before departure",
labelAnchor: "center",
axis: "bottom",
labelOffset: 20,
padding:.04,
inset: 30,
},
marks: [
Plot.line(df, Plot.groupX({y:"mean"},{x: "WeeksAheadPurchased", y: "TicketPriceEuros", z: "Route", stroke:"Route"}))
]
})
<div>
<h2 style="text-align:left; font-family:sans-serif; color: #232323;">Transportation Ticket Costs: Buy Early </h1>
<p style="text-align:left; font-family:sans-serif; color: #767676;">Waiting last minute to purchase tickets results in higher ticket prices, regardless of transportation mode.</p>
${pricePlot}
</div>
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.
