2f:[] 2d:{"title":"Introduction to SVG","cells":[{"id":0,"value":"md`# Introduction to [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":113,"value":"d3.range(8, 128, 8)","pinned":true,"hidden":false,"mode":"ojs"},{"id":115,"value":"d3.range(128, 0, -8)","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"d3.create(\"svg\")\n .attr(\"width\", 128)\n .attr(\"height\", 128)\n .call(svg => svg.selectAll(\"circle\")\n .data(d3.range(128, 0, -8))\n .join(\"circle\")\n .attr(\"fill\", d3.scaleSequential(d3.interpolateViridis).domain([0, 128]))\n .attr(\"r\", d => d))\n .node()","pinned":true,"hidden":false,"mode":"ojs"},{"id":61,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":217,"value":"md`## Examples from [IDVW, 2nd ed.](https://github.com/scotthmurray/d3-book)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":170,"value":"md`## Rectangles`","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":155,"value":"{\n const svg = html``;\n\n const selSvg = d3.select(svg);\n\n // D3 code goes here\n selSvg\n .append(\"rect\")\n .attr(\"x\", 0)\n .attr(\"y\", 0)\n .attr(\"width\", 500)\n .attr(\"height\", 50)\n .attr(\"fill\", \"steelblue\");\n\n return svg;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":156,"value":"{\n const selSvg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, 500, 50]);\n\n // D3 code goes here\n selSvg\n .append(\"rect\")\n .attr(\"x\", 0)\n .attr(\"y\", 0)\n .attr(\"width\", '50%')\n .attr(\"height\", '50%')\n .attr(\"fill\", \"steelblue\");\n\n return selSvg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":68,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":174,"value":"{\n const selSvg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, 500, 50]);\n\n // D3 code goes here\n selSvg\n .append(\"circle\")\n .attr(\"cx\", 150)\n .attr(\"cy\", 25)\n .attr(\"r\", \"25\")\n .attr(\"fill\", \"steelblue\");\n\n return selSvg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":70,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":176,"value":"{\n const selSvg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, 500, 50]);\n\n // D3 code goes here\n selSvg\n .append(\"ellipse\")\n .attr(\"cx\", 250)\n .attr(\"cy\", 25)\n .attr(\"rx\", 100)\n .attr(\"ry\", 25)\n .attr(\"fill\", \"steelblue\");\n\n return selSvg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":72,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":179,"value":"{\n const selSvg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, 500, 50]);\n\n // D3 code goes here\n selSvg\n .append(\"line\")\n .attr(\"x1\", 10)\n .attr(\"x2\", 490)\n .attr(\"y1\", 10)\n .attr(\"y2\", 40)\n .attr(\"stroke\", \"steelblue\")\n .attr(\"stroke-width\", 3);\n\n return selSvg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":75,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":323,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":186,"value":"{\n const selSvg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, 500, 50]);\n let mytext = \"Easy-peasy\";\n // D3 code goes here\n selSvg\n .append(\"text\")\n .attr(\"x\", \"25%\")\n .attr(\"y\", \"50%\")\n .text(`${mytext}`)\n .attr(\"font-family\", \"Ariel, Helvetica, sans serif\")\n .attr(\"font-weight\", \"bold\")\n .attr(\"fill\", \"steelblue\");\n\n return selSvg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":78,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":85,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":194,"value":"{\n const selSvg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, 500, 50]);\n\n // D3 code goes here\n selSvg\n .append(\"circle\")\n .attr(\"cx\", 250)\n .attr(\"cy\", 25)\n .attr(\"r\", '20')\n .attr(\"fill\", \"yellow\")\n .attr(\"stroke\", \"orange\")\n .attr(\"stroke-width\", 5);\n\n return selSvg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":89,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":198,"value":"{\n const selSvg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, 500, 50]);\n\n const data = [\n [0, 0, \"purple\"],\n [20, 5, \"blue\"],\n [40, 10, \"green\"],\n [60, 15, \"yellow\"],\n [80, 20, \"red\"]\n ];\n\n const rects = selSvg\n .selectAll(\"rect\")\n .data(data)\n .join(\"rect\")\n .attr(\"x\", (d) => d[0])\n .attr(\"y\", (d) => d[1])\n .attr(\"width\", 30)\n .attr(\"height\", 30)\n .attr(\"fill\", (d) => d[2]);\n\n return selSvg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":93,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":208,"value":"{\n const selSvg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, 500, 50]);\n\n const data = [\n [25, 25, 25, \"rgba(128, 0, 128, 1.0)\"],\n [50, 25, 25, \"rgba(0, 0, 255, 0.75)\"],\n [75, 25, 25, \"rgba(0, 255, 0, 0.5)\"],\n [100, 25, 25, \"rgba(255, 255, 0, 0.25)\"],\n [125, 25, 25, \"rgba(255, 0, 0, 0.1)\"]\n ];\n\n const circles = selSvg\n .selectAll(\"circle\")\n .data(data)\n .join(\"circle\")\n .attr(\"cx\", d => d[0])\n .attr(\"cy\", d => d[1])\n .attr(\"r\", d => d[2])\n .attr(\"fill\", d => d[3]);\n\n return selSvg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"dataset = [5, 10, 15, 20, 25]","pinned":true,"hidden":false,"mode":"ojs"},{"id":23,"value":"html`

${d}

`)}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":129,"value":"d3.create(\"p\")\n .call(svg =>\n svg\n .selectAll(\"p\")\n .data(dataset)\n .join(\"p\")\n .text(d => d)\n )\n .node()","pinned":true,"hidden":false,"mode":"ojs"},{"id":122,"value":"d3\n .create(\"p\")\n .call(svg =>\n svg\n .selectAll(\"p\")\n .data(dataset)\n .join(\"p\")\n .text(d => \"I can count up to \" + d)\n .style(\"color\", d => (d > 15 ? \"red\" : \"black\"))\n )\n .node()","pinned":true,"hidden":false,"mode":"ojs"},{"id":31,"value":"numbers = {\n const svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, 33])\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", 14)\n .style(\"display\", \"block\");\n\n svg\n .selectAll(\"text\")\n .data(dataset)\n .join(\"text\")\n .attr(\"x\", (d, i) => i * 40)\n .attr(\"y\", 17)\n .attr(\"dy\", \"0.35em\")\n .text(d => d);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":158,"value":"height = width * 0.6","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"d3 = require('d3@6')","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W2f","stdlib":"1","titling":"auto"}