2a:null 2b:["$","title",null,{"children":"Plot: Marey’s trains | Observable | Observable"}] 31:[{"id":"6890d6f1c3e531438ebbaaabb87cbb183277103a227578f5b9e51410e41a3e1f72d7818c790ec25d17f9a871bf7456479376176e281cabac637cba5f4c934e00","href":"https://static.observableusercontent.com/files/6890d6f1c3e531438ebbaaabb87cbb183277103a227578f5b9e51410e41a3e1f72d7818c790ec25d17f9a871bf7456479376176e281cabac637cba5f4c934e00","name":"caltrain.csv","type":"text/csv","lastModified":1671077220586.008,"size":100428}] 2e:{"id":"180ef203c4cdee44","slug":"plot-mareys-trains","title":"Plot: Marey’s trains","thumbnail":"e2518ef23a7cb32dc9bbc992a44b9c5c323ff7045944fed7f845a9f4d22e964a","access_level":"public","create_time":"$D2022-12-15T00:43:04.184Z","update_time":"$D2023-07-07T08:39:33.634Z","view_time":null,"first_public_time":"$D2022-12-15T04:08:21.892Z","fork":false,"stars":5,"starred":false,"owner":{"type":"team","id":"f35c755083683fe5","login":"observablehq","name":"Observable","avatar_url":"https://avatars-next.observableusercontent.com/424c6c1f7794371c9915a160519bdfb34cf34e50069fcd6def38a1a04d4e9702","tier":"enterprise_2024"},"version":329,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null}],"members":[{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null,"role":"editor"},{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null,"role":"editor"},{"type":"team","id":"f35c755083683fe5","login":"observablehq","name":"Observable","avatar_url":"https://avatars-next.observableusercontent.com/424c6c1f7794371c9915a160519bdfb34cf34e50069fcd6def38a1a04d4e9702","tier":"enterprise_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":6,"collection":null,"type":"notebook","body":{"title":"Plot: Marey’s trains","cells":[{"id":0,"value":"

Plot: Marey’s trains

Observable Plot › Gallery

\n\n# Marey’s trains\n\nA recreation of [E.J. Marey](https://en.wikipedia.org/wiki/Étienne-Jules_Marey)’s graphical train schedule. Stations are positioned to scale so that slope encodes speed. This display also reveals when and where limited service trains are passed by baby bullets. This type of plot is sometimes called a stringline chart. Based on the [D3 implementation](/@d3/mareys-trains).","pinned":false,"hidden":false,"mode":"md"},{"id":269,"value":"viewof schedule = Inputs.radio([\"weekday\", \"weekend\"], {label: \"Schedule\", value: \"weekday\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"plot = Plot.plot({\n inset: 10,\n margin: 10,\n marginLeft: 40,\n marginTop: 100,\n grid: true,\n width: 1152,\n height: 1800,\n x: {\n axis: null // hide arbitrary distance units\n },\n y: {\n label: null,\n ticks: d3.range(3, 24).map(h => h * 60),\n tickFormat: asTime,\n transform: asMinutes,\n reverse: true\n },\n color: {\n legend: true,\n domain: [\"normal\", \"limited\", \"bullet\"],\n range: [\"rgb(34, 34, 34)\", \"rgb(183, 116, 9)\", \"rgb(192, 62, 29)\"]\n },\n marks: [\n Plot.ruleX(trains, Plot.groupX({}, {x: \"distance\", strokeOpacity: 0.1, strokeDasharray: 2})),\n Plot.text(trains, Plot.groupX({text: \"first\", y: () => \"4:30am\"}, {x: \"distance\", text: \"station\", rotate: -90, frameAnchor: \"left\", dy: -12})),\n Plot.line(trains, {filter: d => d.schedule === schedule, x: \"distance\", y: \"time\", z: \"train\", stroke: \"speed\", marker: \"circle\", title: (d) => `${d.train}${d.direction}\\n${d.station}\\n${d.time}`, tip: true})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":230,"value":"function asTime(minutes) {\n return formatTime(d3.utcMinute.offset(d3.utcDay(), minutes - minutesOffset));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":39,"value":"function asMinutes(time) {\n if (!(time = parseTime(time))) return;\n const minutes = time.getUTCHours() * 60 + time.getUTCMinutes();\n return (minutes + minutesOffset + 60 * 24) % (24 * 60);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":89,"value":"minutesOffset = -60 * 2 // no trains run at 2 AM","pinned":true,"hidden":false,"mode":"ojs"},{"id":235,"value":"parseTime = d3.utcParse(\"%I:%M%p\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":237,"value":"formatTime = d3.utcFormat(\"%-I %p\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":290,"value":"trains = FileAttachment(\"caltrain.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2f:"$2e:body"