data = FileAttachment("CO2_data.csv").csv({typed:true})
groupedbyPlane = data.filter(d => d.Mode === "Plane")
groupedbyTrain = data.filter(d => d.Mode === "Train")
CO2_data.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
viewof bins = Inputs.range([3, 20], {step: 1, label: "Bins"})
Plot.plot({
grid: true,
marks: [
Plot.rectY(data, Plot.binX({y: "count",interval: 20}, {x: "TravelTimeMinutes", fill: "Mode", fy: "Mode", mixBlendMode: "multiply"})),
Plot.ruleY([0])
]
})
Plot.plot({
y: {
grid: true
},
color: {
legend: true
},
marks: [
Plot.lineY(groupedbyPlane, {x: "WeeksAheadPurchased", y: "TicketPriceEuros", marker: "circle"}),
Plot.ruleY([0])
]
})
// question 1
Plot.plot({
x: {
line: true,
label: "WeeksAheadPurchased",
labelAnchor: "center",
legend:true
},
y: {
label: "TicketPriceEuros",
labelAnchor: "center"
},
marks: [
Plot.dot(
data,
{x: "WeeksAheadPurchased",
y: "TicketPriceEuros",
//fill:"Route"
fill:d => data.Route== "Train" ? "gray" : "blue"
}),
// Plot.line(
// data,
// {x: "WeeksAheadPurchased",
// y: "TicketPriceEuros",
// //fill: "Mode"
// fill:d => data.Route== "Train" ? "gray" : "blue"
// }),
Plot.linearRegressionY(
data,
{x: "WeeksAheadPurchased",
y: "TicketPriceEuros",
}
),
Plot.text(data,
{x: "WeeksAheadPurchased",
y: "TicketPriceEuros",
text: "Route",
dx: 10,
textAnchor: "start",
})
],
marginBottom: 50,
marginRight:100
})
chart0 = Plot.plot({
height: 350,
width:700,
marginLeft: 50,
marginRight: 50,
grid: true,
x: {nice: true},
y: {inset: 0},
color: {type: "categorical", legend: true},
facet: {data: data, y: "Route", marginRight: 90},
marks: [
Plot.frame(),
Plot.line(data, {
x: "CO2InKGramsPerPassenger",
y: "Mode",
sort: {
y: {value: "x", reduce: "mean", reverse: true},
fy: {value: "x", reduce: "mean", reverse: true}
}
})
]
})
chart1= Plot.plot({
height: 250,
width:700,
grid: true,
color: {legend: true},
marks: [
Plot.dot(data, {x: "TravelTimeMinutes", y: "CO2InKGramsPerPassenger", fill: "Mode"}),
Plot.linearRegressionY(data, {x: "TravelTimeMinutes", y: "CO2InKGramsPerPassenger", stroke: "Mode"}),
//Plot.linearRegressionY(data, {x: "CO2InKGramsPerPassenger", y: "TravelTimeMinutes"})
Plot.text(data,
{x: "TravelTimeMinutes",
y: "CO2InKGramsPerPassenger",
text: "Route",
dx: 10,
textAnchor: "start",
filter: d => d["TravelTimeMinutes"] > 416 || d["CO2InKGramsPerPassenger"] > 300
})
],
marginBottom: 50,
marginRight:100
})
chart2= Plot.plot({
grid:true,
marks: [
Plot.dot(data, {
height: 300,
width:700,
x: "TicketPriceEuros",
y: "TravelTimeMinutes",
fill: "Mode",
}),
Plot.text(data, {
x: "TicketPriceEuros",
y: "TravelTimeMinutes",
fill: "Mode",
filter: d => d["TicketPriceEuros"] > 400 || d["TravelTimeMinutes"] > 416,
dx: -10,
textAnchor: "end"
})
]
})
chart3=Plot.plot({
height: 300,
width:500,
x: {
label: "TravelTimeMinutes →",
nice: true
},
y: {
grid: true,
label: "← Train · Plane →",
labelAnchor: "center",
tickFormat: Math.abs
},
marks: [
Plot.dot(data, Plot.stackY2({
x: d => d.TravelTimeMinutes,
y: d => d.Mode === "Plane" ? 1 : d.Mode === "Train" ? -1 : 0,
fill: "Route"
})),
Plot.ruleY([0])
]
})
chart4=Plot.plot({
height: 300,
width:700,
x: {
domain: [0, 1500],
percent: false,
label: "CO2 Emissions by each journey →"
},
facet: {
data: data,
y: d=> d.Route
},
marks: [
Plot.barX(data, Plot.stackX({fill: "Mode"}, {x: "CO2InKGramsPerPassenger", inset: 5}))
]
,marginLeft:100
})
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.
