Published
Edited
May 30, 2022
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
chart_v3 = GroupedBarChart(data_time, {
x: d => d.destination,
y: d => d.time,
z: d => d.grp,
xDomain: d3.groupSort(data_time, d => d.emission, d => d.destination),
yLabel: "↑ Time (in hour)",
zDomain: grp_time,
colors: d3.schemeCategory10.slice(0,grp_time.length),
width,
height: 300
})
Insert cell
Insert cell
chart_v4 = GroupedBarChart(data_time, {
x: d => d.destination,
y: d => d.time == 0 ? 0 : d.distance/d.time,
z: d => d.grp,
xDomain: d3.groupSort(data_time, d => d.emission, d => d.destination),
yLabel: "↑ Speed (in km/h)",
zDomain: grp_time,
colors: d3.schemeCategory10.slice(0,grp_time.length),
width,
height: 300
})
Insert cell
Plot.plot({
inset: 8,
grid: true,
color: {
legend: true,
},
marks: [
Plot.dot(data_time, {x: "distance", y: "time", fill: "grp", r:"time"})
]
})
Insert cell
Insert cell
transport = FileAttachment("W6_data@1.csv").csv({typed: true})
Insert cell
Insert cell
grp_co2 = transport.columns.slice(3,6)
Insert cell
data_co2 = grp_co2.flatMap(grp => transport.map(d => ({destination: d['City_2'], grp, emission: d[grp], distance: d['distance']})))
Insert cell
Insert cell
grp_time = transport.columns.slice(6,9)
Insert cell
data_time = grp_time.flatMap(grp => transport.map(d => ({destination: d['City_2'], grp, time: d[grp], distance: d['distance']})))
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more