30:T453,xAxis = g => g .style("font", "10px sans-serif") .selectAll("g") .data(stations) .join("g") .attr("transform", d => `translate(${x(d.distance)},0)`) .call(g => g.append("line") .attr("y1", margin.top - 6) .attr("y2", margin.top) .attr("stroke", "currentColor")) .call(g => g.append("line") .attr("y1", height - margin.bottom + 6) .attr("y2", height - margin.bottom) .attr("stroke", "currentColor")) .call(g => g.append("line") .attr("y1", margin.top) .attr("y2", height - margin.bottom) .attr("stroke-opacity", 0.2) .attr("stroke-dasharray", "1.5,2") .attr("stroke", "currentColor")) .call(g => g.append("text") .attr("transform", `translate(0,${margin.top}) rotate(-90)`) .attr("x", 12) .attr("dy", "0.35em") .text(d => d.name)) .call(g => g.append("text") .attr("text-anchor", "end") .attr("transform", `translate(0,${height - margin.top}) rotate(-90)`) .attr("x", -12) .attr("dy", "0.35em") .text(d => d.name))31:T5cb,tooltip = g => { const formatTime = d3.utcFormat("%-I:%M %p"); const tooltip = g.append("g") .style("font", "10px sans-serif"); const path = tooltip.append("path") .attr("fill", "white"); const text = tooltip.append("text"); const line1 = text.append("tspan") .attr("x", 0) .attr("y", 0) .style("font-weight", "bold"); const line2 = text.append("tspan") .attr("x", 0) .attr("y", "1.1em"); const line3 = text.append("tspan") .attr("x", 0) .attr("y", "2.2em"); g.append("g") .attr("fill", "none") .attr("pointer-events", "all") .selectAll("path") .data(stops) .join("path") .attr("d", (d, i) => voronoi.renderCell(i)) .on("mouseout", () => tooltip.style("display", "none")) .on("mouseover", (event, d) => { tooltip.style("display", null); line1.text(`${d.train.number}${d.train.direction}`); line2.text(d.stop.station.name); line3.text(formatTime(d.stop.time)); path.attr("stroke", colors[d.train.type]); const box = text.node().getBBox(); path.attr("d", ` M${box.x - 10},${box.y - 10} H${box.width / 2 - 5}l5,-5l5,5 H${box.width + 10} v${box.height + 20} h-${box.width + 20} z `); tooltip.attr("transform", `translate(${ x(d.stop.station.distance) - box.width / 2},${ y(d.stop.time) + 28 })`); }); }32:[{"id":"0e3512f9ea4acad93f31139305430732463aeb5662be165d4aa2f4099e6bbf5d6a362f0577d8a2ee051148a4eeec6128ccc9ef243eb0addeb27197d1fb6eaa95","href":"https://static.observableusercontent.com/files/0e3512f9ea4acad93f31139305430732463aeb5662be165d4aa2f4099e6bbf5d6a362f0577d8a2ee051148a4eeec6128ccc9ef243eb0addeb27197d1fb6eaa95","name":"schedule.tsv","type":"application/octet-stream","lastModified":1572391366550.085,"size":20796}] 2e:{"title":"Marey’s Trains","cells":[{"id":0,"value":"md`# 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.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"viewof days = {\n const values = {\n weekday: d => /^[NLB]$/.test(d.type),\n saturday: d => /^[WS]$/.test(d.type),\n sunday: d => /^[W]$/.test(d.type)\n };\n const form = html``;\n form.i.onchange = () => {\n form.value = values[form.i.value];\n form.dispatchEvent(new CustomEvent(\"input\"));\n };\n form.value = values[form.i.value];\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":173,"value":"viewof direction = {\n const values = {\n either: () => true,\n north: d => d.direction === \"N\",\n south: d => d.direction === \"S\"\n };\n const form = html``;\n form.i.onchange = () => {\n form.value = values[form.i.value];\n form.dispatchEvent(new CustomEvent(\"input\"));\n };\n form.value = values[form.i.value];\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"chart = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height]);\n\n svg.append(\"g\")\n .call(xAxis);\n\n svg.append(\"g\")\n .call(yAxis);\n\n const train = svg.append(\"g\")\n .attr(\"stroke-width\", 1.5)\n .selectAll(\"g\")\n .data(data)\n .join(\"g\");\n\n train.append(\"path\")\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", d => colors[d.type])\n .attr(\"d\", d => line(d.stops));\n\n train.append(\"g\")\n .attr(\"stroke\", \"white\")\n .attr(\"fill\", d => colors[d.type])\n .selectAll(\"circle\")\n .data(d => d.stops)\n .join(\"circle\")\n .attr(\"transform\", d => `translate(${x(d.station.distance)},${y(d.time)})`)\n .attr(\"r\", 2.5);\n\n svg.append(\"g\")\n .call(tooltip);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":56,"value":"colors = ({\n N: \"rgb(34, 34, 34)\",\n L: \"rgb(183, 116, 9)\",\n B: \"rgb(192, 62, 29)\",\n W: \"currentColor\",\n S: \"currentColor\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":40,"value":"line = d3.line()\n .x(d => x(d.station.distance))\n .y(d => y(d.time))","pinned":true,"hidden":false,"mode":"ojs"},{"id":30,"value":"x = d3.scaleLinear()\n .domain(d3.extent(stations, d => d.distance))\n .range([margin.left + 10, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs"},{"id":27,"value":"y = d3.scaleUtc()\n .domain([parseTime(\"4:30AM\"), parseTime(\"1:30AM\")])\n .range([margin.top, height - margin.bottom])","pinned":true,"hidden":false,"mode":"ojs"},{"id":118,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":88,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y)\n .ticks(d3.utcHour)\n .tickFormat(d3.utcFormat(\"%-I %p\")))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.selectAll(\".tick line\").clone().lower()\n .attr(\"stroke-opacity\", 0.2)\n .attr(\"x2\", width))","pinned":true,"hidden":false,"mode":"ojs"},{"id":188,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":231,"value":"voronoi = d3.Delaunay\n .from(stops, d => x(d.stop.station.distance), d => y(d.stop.time))\n .voronoi([0, 0, width, height])","pinned":true,"hidden":false,"mode":"ojs"},{"id":195,"value":"data = alldata.filter(d => days(d) && direction(d))","pinned":true,"hidden":false,"mode":"ojs"},{"id":206,"value":"stations = alldata.stations","pinned":true,"hidden":false,"mode":"ojs"},{"id":236,"value":"stops = d3.merge(data.map(d => d.stops.map(s => ({train: d, stop: s}))))","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"alldata = {\n const data = d3.tsvParse(await FileAttachment(\"schedule.tsv\").text());\n\n // Extract the stations from the \"stop|*\" columns.\n const stations = data.columns\n .filter(key => /^stop\\|/.test(key))\n .map(key => {\n const [, name, distance, zone] = key.split(\"|\");\n return {key, name, distance: +distance, zone: +zone};\n });\n\n return Object.assign(\n data.map(d => ({\n number: d.number,\n type: d.type,\n direction: d.direction,\n stops: stations\n .map(station => ({station, time: parseTime(d[station.key])}))\n .filter(station => station.time !== null)\n })),\n {stations}\n );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"parseTime = {\n const parseTime = d3.utcParse(\"%I:%M%p\");\n return string => {\n const date = parseTime(string);\n if (date !== null && date.getUTCHours() < 3) date.setUTCDate(date.getUTCDate() + 1);\n return date;\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":34,"value":"height = 2400","pinned":true,"hidden":false,"mode":"ojs"},{"id":37,"value":"margin = ({top: 120, right: 30, bottom: 120, left: 50})","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}