Public
Edited
Apr 26, 2023
1 fork
{
const raw = d3.csvParse(
`arrival_time,EMME,EROAD
1_2,0.009517403732974609,0.00498960498960499
2_3,0.017655960988733815,0.0067235811916662985
3_4,0.02522280141247688,0.01012075905692927
4_5,0.032974609046578104,0.014101826867784314
5_6,0.04338321842946023,0.03199009156455965
6_7,0.053371447788801075,0.06418365992834078
7_8,0.058802757692954434,0.08530985977794489
8_9,0.06332604674625862,0.07890476401114699
9_10,0.06182949386245166,0.08016985889326315
10_11,0.06167815705397679,0.08411553943468837
11_12,0.06014797376828653,0.08218693325076304
12_13,0.060854212207835885,0.0830539213517937
13_14,0.06169497225491845,0.07768390321581811
14_15,0.06203127627375147,0.07590569292696953
15_16,0.06196401546998487,0.0683505109037024
16_17,0.05004203800235413,0.05243508647763967
17_18,0.05022700521271229,0.034520281328791966
18_19,0.049335799562804775,0.019560313177334455
19_20,0.04175214393812006,0.012589021099659398
20_21,0.03226837060702875,0.00952802229397974
21_22,0.021506642004371954,0.006856283452028133
22_23,0.013838910374978981,0.006254699871721148
23_24,0.0036825290062216243,0.00539655858804795
`,
d3.autoType
);
const data = aq
.from(raw)
.fold(["EMME", "EROAD"], { as: ["source", "value"] })
.derive({ arrival_time: (d) => aq.op.replace(d.arrival_time, "_", ":") })
.objects();
return Plot.plot({
style: {
fontSize: "12px",
color:"white",
background:"black"
},
marginTop: 30,
marginBottom: 50,
color: {
domain: ["EMME", "EROAD"],
legend: true
},
x: {
label: "Freight Departure Time",
transform: (time) => d3.timeParse("%H:%M %Z")(time + " +24"),
tickFormat: "%H:%M"
},
y: {
label: "↑ Proportion",
tickFormat: "p",
ticks: 6
},
marks: [
Plot.line(data, {
x: "arrival_time",
y: "value",
curve: "monotone-x",
stroke: "source"
}),
Plot.ruleY([0])
]
});
return data;
}
{
const raw = d3.csvParse(
`distance,EMME,EROAD
0, 0, 0
5,0.27546852474771744,0.41395492497459296
10,0.1985137639870941,0.18689596078353227
15,0.17676941031097687,0.1169918099754897
20,0.11294363973364453,0.07899089333041069
25,0.0882988947621336,0.05740987983978638
30,0.060444841079151504,0.042643923240938165
35,0.037190224479989015,0.031863380029093516
40,0.02315164412713668,0.0230157623099456
45,0.012493993272465162,0.018990494789071995
50,0.00799752866067138,0.015194388537951098
55,0.006727534839019702,0.014048582189187574
`,
d3.autoType
);
const data = aq
.from(raw)
.fold(["EMME", "EROAD"], { as: ["source", "value"] })
.objects();
return Plot.plot({
style: {
fontSize: "12px",
color: "white",
background: "black",
},
marginTop: 30,
marginBottom: 50,
width: 900,
color: {
domain: ["EMME", "EROAD"],
legend: true
},
x: {
label: "Trip Distance (km) →"
},
y: {
label: "↑ Proportion",
tickFormat: "p",
ticks: 6
},
marks: [
Plot.line(data, {
x: "distance",
y: "value",
curve: "monotone-x",
stroke: "source"
}),
Plot.ruleY([0])
]
});
}
{
const raw = d3.csvParse(
`distance,EMME,EROAD
0, 0, 0
5,0.28282742876469097,0.43525431637890805
10,0.20267185254079648,0.1779048063462436
15,0.1484738310645134,0.11140923938404107
20,0.11845776612835038,0.08492767148856743
25,0.09715058763845438,0.06451236584227718
30,0.06265325103576562,0.045730284647690154
35,0.036526591696964573,0.02589827344843677
40,0.02299822440179251,0.02006532897806813
45,0.012344635156844508,0.012482501166588894
50,0.007778811194723937,0.012132524498366775
55,0.008117020377103238,0.009682687820811945
`,
d3.autoType
);
const data = aq
.from(raw)
.fold(["EMME", "EROAD"], { as: ["source", "value"] })
.objects();
return Plot.plot({
style: {
fontSize: "12px",
color: "white",
background: "black",
},
marginTop: 30,
marginBottom: 50,
width: 900,
color: {
domain: ["EMME", "EROAD"],
legend: true
},
x: {
label: "Trip Distance (km) →"
},
y: {
label: "↑ Proportion",
tickFormat: "p",
ticks: 6
},
marks: [
Plot.line(data, {
x: "distance",
y: "value",
curve: "monotone-x",
stroke: "source"
}),
Plot.ruleY([0])
]
});
}
{
const raw = d3.csvParse(
`distance,EMME,EROAD
0, 0, 0
5,0.051375628112322866,0.08614037043729322
10,0.11204681046737723,0.11465368730095453
15,0.16463636368226356,0.12261018325766626
20,0.14768314151244297,0.11610695203138666
25,0.14890714388386356,0.10896425514417238
30,0.12460300719736304,0.09898381881155566
35,0.09069263888522622,0.0875859117175991
40,0.06503322993646388,0.07293071793390242
45,0.03993782827425049,0.06833854231313158
50,0.028563653494663884,0.06108629111338442
55,0.026520554553762312,0.06259926993895377
`,
d3.autoType
);
const data = aq
.from(raw)
.fold(["EMME", "EROAD"], { as: ["source", "value"] })
.objects();
return Plot.plot({
style: {
fontSize: "12px",
color: "white",
background: "black",
},
marginTop: 30,
marginBottom: 50,
width: 900,
color: {
domain: ["EMME", "EROAD"],
legend: true
},
x: {
label: "Trip Distance (km) →"
},
y: {
label: "↑ Proportion",
tickFormat: "p",
ticks: 6
},
marks: [
Plot.line(data, {
x: "distance",
y: "value",
curve: "monotone-x",
stroke: "source"
}),
Plot.ruleY([0])
]
});
}
{ // for Auckland
const raw = d3.csvParse(
`distance,EMME,EROAD
0, 0, 0
5,0.050699945617893816,0.08410572307296853
10,0.11251684703050269,0.11926223504633823
15,0.17266491975333675,0.15156564435333944
20,0.14731402084725306,0.13942076287520125
25,0.14612911131030987,0.12291633734260896
30,0.12319506203885135,0.10507932370962669
35,0.09070942337680848,0.08992925407751205
40,0.06467035595507484,0.05954657305002817
45,0.04004243791061739,0.05351728092132943
50,0.0274843166357019,0.03753140365801014
55,0.024573559523649872,0.037125461893037094
`,
d3.autoType
);
const data = aq
.from(raw)
.fold(["EMME", "EROAD"], { as: ["source", "value"] })
.objects();
return Plot.plot({
style: {
fontSize: "12px",
color: "white",
background: "black",
},
marginTop: 30,
marginBottom: 50,
width: 900,
color: {
domain: ["EMME", "EROAD"],
legend: true
},
x: {
label: "Trip Distance (km) →"
},
y: {
label: "↑ Proportion",
tickFormat: "p",
ticks: 6
},
marks: [
Plot.line(data, {
x: "distance",
y: "value",
curve: "monotone-x",
stroke: "source"
}),
Plot.ruleY([0])
]
});
}
{ // for Wellington
const raw = d3.csvParse(
`distance,EMME,EROAD
0, 0, 0
5,0.055914839416595453,0.09391304444924549
10,0.11192399870512362,0.11616539865517228
15,0.13771881564240232,0.12506721257486428
20,0.15347669789590804,0.1330997598366169
25,0.1620485849065396,0.1310591985468442
30,0.12788669560014668,0.11178474472305111
35,0.08848235768846432,0.07594541913863341
40,0.06423870079936533,0.06762189434924316
45,0.03910031933733971,0.04768047393415154
50,0.02755118336277828,0.05198695609116241
55,0.03165780664533665,0.045675897701015225
`,
d3.autoType
);
const data = aq
.from(raw)
.fold(["EMME", "EROAD"], { as: ["source", "value"] })
.objects();
return Plot.plot({
style: {
fontSize: "12px",
color: "white",
background: "black",
},
marginTop: 30,
marginBottom: 50,
width: 900,
color: {
domain: ["EMME", "EROAD"],
legend: true
},
x: {
label: "Trip Distance (km) →"
},
y: {
label: "↑ Proportion",
tickFormat: "p",
ticks: 6
},
marks: [
Plot.line(data, {
x: "distance",
y: "value",
curve: "monotone-x",
stroke: "source"
}),
Plot.ruleY([0])
]
});
}
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.
