2c:null 2d:["$","title",null,{"children":"Introduction to SVG | Clinton Brownley | Observable"}] 32:[] 30:{"id":"12a9d09edb58aa06","slug":null,"title":"Introduction to SVG","thumbnail":"1eea63ef8b39f799afb4036bd218987ea15ead9ff2e7f786db3191a8d13a73dc","access_level":"public","create_time":"$D2020-12-29T23:18:38.516Z","update_time":"$D2025-01-16T02:01:26.586Z","view_time":null,"first_public_time":"$D2022-12-30T00:25:25.000Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"f53fd09c4c73fcfb","login":"clinton-brownley","name":"Clinton Brownley","avatar_url":"https://avatars-next.observableusercontent.com/0683ab3692f040e05b994f7d2fd9e5c5954dbc8ab8333e6c2dd230cfb8f86648","tier":"starter_2024"},"version":367,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"c0acc693e908940a","login":"clinton-brownley","name":"Clinton Brownley","avatar_url":"https://avatars-next.observableusercontent.com/0683ab3692f040e05b994f7d2fd9e5c5954dbc8ab8333e6c2dd230cfb8f86648","tier":null}],"members":[{"type":"individual","id":"c0acc693e908940a","login":"clinton-brownley","name":"Clinton Brownley","avatar_url":"https://avatars-next.observableusercontent.com/0683ab3692f040e05b994f7d2fd9e5c5954dbc8ab8333e6c2dd230cfb8f86648","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":10,"collection":null,"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"d3.range(8, 128, 8)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"d3.range(128, 0, -8)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"md`## Examples from [IDVW, 2nd ed.](https://github.com/scotthmurray/d3-book)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"md`## Rectangles`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":323,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"dataset = [5, 10, 15, 20, 25]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"html`

${d}

`)}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"height = width * 0.6","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"d3 = require('d3@6')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 31:"$30:body"