2f:T874,dataViz = { const chart = svg``; const points = [ [4, 4], [4, 104], [104, 50], [4, 4], [100, 54], [100, 104], [44, 79], [100, 54], [130, 4], [130, 104], [100, 34], [160, 34], [180, 54], [180, 104], [124, 79], [180, 54], [230, 4], [270, 104], [310, 4], [320, 52], [320, 104], [350, 52], [390, 52], [350, 104], [390, 104], [430, 4], [430, 90] ], draw = () => { const path = d3.path(); // D path.moveTo(...points[0]); path.lineTo(...points[1]); path.quadraticCurveTo(...points[2], ...points[3]); // a path.moveTo(...points[4]); path.lineTo(...points[5]); path.quadraticCurveTo(...points[6], ...points[7]); // t path.moveTo(...points[8]); path.lineTo(...points[9]); path.moveTo(...points[10]); path.lineTo(...points[11]); // a path.moveTo(...points[12]); path.lineTo(...points[13]); path.quadraticCurveTo(...points[14], ...points[15]); // V path.moveTo(...points[16]); path.lineTo(...points[17]); path.lineTo(...points[18]); // i path.moveTo(...points[19]); path.lineTo(...points[20]); // z path.moveTo(...points[21]); path.lineTo(...points[22]); path.lineTo(...points[23]); path.lineTo(...points[24]); // exclamation mark bar path.moveTo(...points[25]); path.lineTo(...points[26]); return path; }; d3.select(chart) .select(".u-path") .attr("d", draw()); d3.select(chart) .select("#point1") .attr("cx", 320) .attr("cy", 42) .attr("r", 4) .attr("fill", "orange"); d3.select(chart) .select("#point2") .attr("cx", 430) .attr("cy", 100) .attr("r", 4) .attr("fill", "orange"); return chart; // draw().toString(); }30:T894,dataVis = { const chart = svg``; const points = [ [4, 4], [4, 104], [104, 50], [4, 4], [100, 54], [100, 104], [44, 79], [100, 54], [130, 4], [130, 104], [100, 34], [160, 34], [180, 54], [180, 104], [124, 79], [180, 54], [230, 4], [270, 104], [310, 4], [320, 52], [320, 104], [390, 52], [330, 66], [370, 79], [410, 93], [350, 104], [430, 4], [430, 90] ], draw = () => { const path = d3.path(); // D path.moveTo(...points[0]); path.lineTo(...points[1]); path.quadraticCurveTo(...points[2], ...points[3]); // a path.moveTo(...points[4]); path.lineTo(...points[5]); path.quadraticCurveTo(...points[6], ...points[7]); // t path.moveTo(...points[8]); path.lineTo(...points[9]); path.moveTo(...points[10]); path.lineTo(...points[11]); // a path.moveTo(...points[12]); path.lineTo(...points[13]); path.quadraticCurveTo(...points[14], ...points[15]); // V path.moveTo(...points[16]); path.lineTo(...points[17]); path.lineTo(...points[18]); // i path.moveTo(...points[19]); path.lineTo(...points[20]); // s path.moveTo(...points[21]); path.quadraticCurveTo(...points[22], ...points[23]); path.quadraticCurveTo(...points[24], ...points[25]); // exclamation mark bar path.moveTo(...points[26]); path.lineTo(...points[27]); return path; }; d3.select(chart) .select(".u-path") .attr("d", draw()); d3.select(chart) .select("#point1") .attr("cx", 320) .attr("cy", 42) .attr("r", 4) .attr("fill", "orange"); d3.select(chart) .select("#point2") .attr("cx", 430) .attr("cy", 100) .attr("r", 4) .attr("fill", "orange"); return chart; // draw().toString(); }31:[] 2d:{"title":"D3 Path","cells":[{"id":0,"value":"# D3 Path","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"md`## Example in Week 6 Async Video`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":182,"value":"md`## Draw a \"W\" using [d3.path](https://observablehq.com/@d3/d3-path)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":189,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":184,"value":"md`## Draw an \"O\" using [d3.path](https://observablehq.com/@d3/d3-path)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":187,"value":"html`` // Q 70 160 40 80","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"md`## Draw \"Data Viz\" or \"Data Vis\" using [d3.path](https://observablehq.com/@d3/d3-path)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"value":"md`## Data Viz`","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":117,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":166,"value":"md`## Data Vis`","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":160,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":269,"value":"md`\n\n\n\n\n\n\n\n\n\n\n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":238,"value":"md`## Line Chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":241,"value":"line_chart = {\n const svg = d3\n .select(DOM.svg(width, line_chart_height))\n .style(\"-webkit-tap-highlight-color\", \"transparent\")\n .style(\"overflow\", \"visible\");\n\n svg.append(\"g\").call(xAxis);\n\n svg.append(\"g\").call(yAxis);\n\n svg\n .append(\"path\")\n .datum(data)\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"steelblue\")\n .attr(\"stroke-width\", 1.5)\n .attr(\"stroke-linejoin\", \"round\")\n .attr(\"stroke-linecap\", \"round\")\n .attr(\"d\", line);\n\n const tooltip = svg.append(\"g\");\n\n svg.on(\"touchmove mousemove\", function(event) {\n const { date, close } = bisect(d3.pointer(event, this)[0]);\n\n tooltip.attr(\"transform\", `translate(${x(date)},${y(close)})`).call(\n callout,\n `${formatValue(close)}\n${formatDate(date)}`\n );\n });\n\n svg.on(\"touchend mouseleave\", () => tooltip.call(callout, null));\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":265,"value":"line = d3\n .line()\n .defined(d => !isNaN(d.close))\n .x(d => x(d.date))\n .y(d => y(d.close))","pinned":true,"hidden":false,"mode":"ojs"},{"id":274,"value":"callout = (g, value) => {\n if (!value) return g.style(\"display\", \"none\");\n\n g.style(\"display\", null)\n .style(\"pointer-events\", \"none\")\n .style(\"font\", \"10px sans-serif\");\n\n const path = g\n .selectAll(\"path\")\n .data([null])\n .join(\"path\")\n .attr(\"fill\", \"white\")\n .attr(\"stroke\", \"black\");\n\n const text = g\n .selectAll(\"text\")\n .data([null])\n .join(\"text\")\n .call(text =>\n text\n .selectAll(\"tspan\")\n .data((value + \"\").split(/\\n/))\n .join(\"tspan\")\n .attr(\"x\", 0)\n .attr(\"y\", (d, i) => `${i * 1.1}em`)\n .style(\"font-weight\", (_, i) => (i ? null : \"bold\"))\n .text(d => d)\n );\n\n const { x, y, width: w, height: h } = text.node().getBBox();\n\n text.attr(\"transform\", `translate(${-w / 2},${15 - y})`);\n path.attr(\n \"d\",\n `M${-w / 2 - 10},5H-5l5,-5l5,5H${w / 2 + 10}v${h + 20}h-${w + 20}z`\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":262,"value":"x = d3\n .scaleUtc()\n .domain(d3.extent(data, d => d.date))\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":258,"value":"y = d3\n .scaleLinear()\n .domain([0, d3.max(data, d => d.close)])\n .nice()\n .range([line_chart_height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":254,"value":"xAxis = g =>\n g.attr(\"transform\", `translate(0,${line_chart_height - margin.bottom})`).call(\n d3\n .axisBottom(x)\n .ticks(width / 80)\n .tickSizeOuter(0)\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":252,"value":"yAxis = g =>\n g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y))\n .call(g => g.select(\".domain\").remove())\n .call(g =>\n g\n .select(\".tick:last-of-type text\")\n .clone()\n .attr(\"x\", 3)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(data.y)\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":248,"value":"margin = ({ top: 20, right: 30, bottom: 30, left: 40 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":299,"value":"data","pinned":true,"hidden":false,"mode":"ojs"},{"id":242,"value":"import { aapl as data } from \"@d3/line-chart\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":278,"value":"function formatValue(value) {\n return value.toLocaleString(\"en\", {\n style: \"currency\",\n currency: \"USD\"\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":280,"value":"function formatDate(date) {\n return date.toLocaleString(\"en\", {\n month: \"short\",\n day: \"numeric\",\n year: \"numeric\",\n timeZone: \"UTC\"\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":282,"value":"bisect = {\n const bisect = d3.bisector(d => d.date).left;\n return mx => {\n const date = x.invert(mx);\n const index = bisect(data, date, 1);\n const a = data[index - 1];\n const b = data[index];\n return b && date - a.date > b.date - date ? b : a;\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":131,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":245,"value":"line_chart_height = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"height = width * 0.2","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}