31:T466,xAxis = g => g .style("font", "12px 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 - 0) .attr("y2", margin.top) .attr("stroke", "currentColor")) .call(g => g.append("line") .attr("y1", height - margin.bottom + 0) .attr("y2", height - margin.bottom) .attr("stroke", "currentColor")) .call(g => g.append("line") .attr("y1", margin.top - 3) .attr("y2", height - margin.bottom + 3) .attr("stroke-opacity", 0.2) .attr("stroke-dasharray", "1.5,2") .attr("stroke", "currentColor")) .call(g => g.append("text") .attr("transform", `translate(-10,${margin.top + 0}) rotate(-45)`) .attr("x", 12) .attr("dy", "0.35em") .text(d => d.name)) .call(g => g.append("text") .attr("text-anchor", "end") .attr("transform", `translate(10,${height - margin.top - 0}) rotate(-45)`) .attr("x", -12) .attr("dy", "0.35em") .text(d => d.name))32:T882,tooltip = g => { const tooltip = g.append("g") .style("font", "15px sans-serif"); const path = tooltip.append("path") .attr("fill", "rgba(245, 245, 230, 0.97)"); 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("mouseout", d => { let currentIdSearch = "#id" + d.train.number; d3.select(currentIdSearch) .attr("stroke-width", 1.2) .selectAll("rect") .attr("stroke", "none"); tooltip.style("display", "none"); }) .on("mouseover", d => { let currentIdSearch = "#id" + d.train.number; d3.select(currentIdSearch) .attr("stroke-width", 2.5) .selectAll("rect") .attr("stroke", "black"); //console.log(" currentIdSearch ", currentIdSearch); tooltip .style("display", null) .attr("fill", "white"); line1.text(`${d.train.number}${d.train.direction}`); line2.text(d.stop.station.name); line3.text(d.stop.time.toLocaleString(undefined, {hour: "numeric", minute: "numeric"})); path .attr("stroke", "none") .attr("fill", tooltipColors[d.train.type]); //.attr("opacity", 0.96); const box = text.node().getBBox(); path.attr("d", ` M${box.x - 10},${box.y - 10} H${box.width / 2 - 5}l5,-15l5,15 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) + 37 })`); }); }33:[] 2f:{"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.select(DOM.svg(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(\"fill\", \"currentColor\")\n .attr(\"stroke-width\", 1.2)\n .selectAll(\"g\")\n .data(data)\n .join(\"g\")\n .style(\"color\", d => colors[d.type])\n .attr(\"id\", d => (\"id\" + d.number));\n \n train.append(\"path\")\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"currentColor\")\n .attr(\"d\", d => line(d.stops));\n\n train.append(\"g\")\n .attr(\"stroke\", \"none\")\n .selectAll(\"circle\")\n .data(d => d.stops)\n \n .join(\"rect\")\n .attr(\"transform\", d => `translate(${x(d.station.distance) - 1},${y(d.time) - 4.0})`)\n .attr(\"stroke\", \"none\")\n .attr(\"stroke-width\", 1.0)\n .attr(\"width\", 2.0)\n .attr(\"height\", 4.0);\n \n train.selectAll(\"rect\")\n .attr(\"opacity\", 0.55)\n .attr(\"fill\", \"black\");\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})","pinned":false,"hidden":false,"mode":"ojs"},{"id":442,"value":"tooltipColors = ({\n N: \"rgba(114, 114, 114, 0.94)\",\n L: \"rgba(183, 116, 9, 0.94)\",\n B: \"rgba(192, 62, 29, 0.94)\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"line = d3.line()\n .x(d => x(d.station.distance))\n .y(d => y(d.time))","pinned":false,"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":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"y = d3.scaleTime()\n .domain([parseTime(\"4:30AM\"), parseTime(\"1:30AM\")])\n .range([margin.top, height - margin.bottom])","pinned":false,"hidden":false,"mode":"ojs"},{"id":118,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":88,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .style(\"font\", \"12px sans-serif\")\n .call(d3.axisLeft(y)\n .ticks(d3.timeHour)\n .tickSize(0)\n .tickFormat(date => date.toLocaleString(undefined, {hour: \"numeric\"})))\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 - 80))","pinned":false,"hidden":false,"mode":"ojs"},{"id":188,"value":"$32","pinned":false,"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":false,"hidden":false,"mode":"ojs"},{"id":195,"value":"data = alldata.filter(d => days(d) && direction(d))","pinned":false,"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 = await d3.tsv(\"https://gist.githubusercontent.com/mbostock/5544008/raw/446592acc3a9223ad268c7b051a68b814e40789c/schedule.tsv\");\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":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"parseTime = {\n const parseTime = d3.timeParse(\"%I:%M%p\");\n return string => {\n const date = parseTime(string);\n if (date !== null && date.getHours() < 3) date.setDate(date.getDate() + 1);\n return date;\n };\n}","pinned":false,"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"},{"id":4,"value":"d3 = require(\"d3@5\", \"d3-delaunay@4\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}