29:null 2a:["$","title",null,{"children":"Exploration of SVG | William Pang | Observable"}] 2f:[] 2d:{"id":"380eedd8250352cb","slug":null,"title":"Exploration of SVG","thumbnail":"cb1f10dc6ec24cbcaabaa946602e2c92472cd5a965c61b10065bde4be8ad37b4","access_level":"public","create_time":"$D2023-09-26T05:36:55.210Z","update_time":"$D2023-10-06T04:42:10.488Z","view_time":null,"first_public_time":"$D2023-09-26T05:36:55.210Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"88df4b53b2fce8d2","login":"will-pang","name":"William Pang","avatar_url":"https://avatars-next.observableusercontent.com/4e5603477ef111cf1fc74cb0aab0dd58ddab37219e1b2a4e5e9c3d082c5532a0","tier":"starter_2024"},"version":138,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"30424cd7adf510bb","login":"williampangbest1","name":"William Pang","avatar_url":"https://avatars-next.observableusercontent.com/4e5603477ef111cf1fc74cb0aab0dd58ddab37219e1b2a4e5e9c3d082c5532a0","tier":null}],"members":[{"type":"individual","id":"30424cd7adf510bb","login":"williampangbest1","name":"William Pang","avatar_url":"https://avatars-next.observableusercontent.com/4e5603477ef111cf1fc74cb0aab0dd58ddab37219e1b2a4e5e9c3d082c5532a0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Exploration of SVG","cells":[{"id":0,"value":"# Exploration of SVG\nBased on this [guide](https://observablehq.com/@nyuvis/d3-introduction) from NYU Visualization","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":10,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":32,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":37,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":40,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":43,"value":"## Rectangles","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":45,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":52,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":55,"value":"## Path","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":57,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":60,"value":"## Text","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":62,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":66,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":74,"value":"## Recreating with D3","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":76,"value":"{\n const svg = d3.create('svg')\n .attr('width', 500)\n .attr('height', 100);\n\n svg.append('circle')\n .attr('cx', 25)\n .attr('cy', 50)\n .attr('r', 25)\n .attr('fill', 'blue');\n\n return svg.node();\n}\n ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":80,"value":"Add another circle...","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":82,"value":"{\n const svg = d3.create('svg')\n .attr('width', 500)\n .attr('height', 100);\n // add a group to the svg element and translate it\n const g = svg.append('g')\n .attr('transform', 'translate(100, -25)')\n .attr('fill', 'green');\n\n // add a circle to the group and set its attributes\n g.append('circle')\n .attr('cx', 25)\n .attr('cy', 50)\n .attr('r', 25);\n\n // add another circle to the group and set its attributes\n g.append('circle')\n .attr('cx', 100)\n .attr('cy', 75)\n .attr('r', 25)\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":84,"value":"Recreate this rectangle example using D3","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":97,"value":"{\n // create our outer SVG element with a size of 500x100 and select it\n const svg = d3.create('svg')\n .attr('width', 500)\n .attr('height', 100);\n\n // add each rectangle\n\n svg.append('rect')\n .attr('x', 10)\n .attr('y', 10)\n .attr('width', 300)\n .attr('height', 20)\n .attr('fill', 'purple');\n\n svg.append('rect')\n .attr('x', 10)\n .attr('y', 40)\n .attr('width', 250)\n .attr('height', 20)\n .attr('fill', 'brown');\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":106,"value":"## Selection and Joins","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":111,"value":"circleInfo = [\n {\n x: 25,\n y: 50,\n radius: 5\n },\n {\n x: 75,\n y: 50,\n radius: 10\n },\n {\n x: 125,\n y: 50,\n radius: 15\n },\n {\n x: 175,\n y: 50,\n radius: 20\n },\n {\n x: 225,\n y: 50,\n radius: 25\n }\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":132,"value":"height = 100","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":109,"value":"{\n // const svg = d3.create('svg')\n // .attr('width', 500)\n // .attr('height', height);\n\n const svg = d3.select(DOM.svg(width, height));\n\n svg.selectAll('circle')\n .data(circleInfo)\n .join('circle')\n .attr('fill', 'green')\n .attr('cx', circ => circ.x)\n .attr('cy', circ => circ.y)\n .attr('r', function(circ){\n return circ.radius;\n });\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":117,"value":"rectInfo = [\n { xPos: 10, yPos: 10, width: 300, height: 20, color: 'purple' },\n { xPos: 10, yPos: 40, width: 250, height: 20, color: 'brown' },\n { xPos: 10, yPos: 70, width: 200, height: 20, color: 'orange' },\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":119,"value":"{\n const svg = d3.create('svg')\n .attr('width', 500)\n .attr('height', 100);\n\n svg.selectAll('rect')\n .data(rectInfo)\n .join('rect')\n .attr('fill', rect => rect.color)\n .attr('x', rect => rect.xPos)\n .attr('y', rect => rect.yPos)\n .attr('width', rect => rect.width)\n .attr('height', rect => rect.height);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":124,"value":"circleGrid = [\n {\n y: 50,\n color: 'purple',\n label: 'Row A',\n circles: [\n { x: 25, radius: 5 },\n { x: 75, radius: 10 },\n { x: 125, radius: 15 },\n { x: 175, radius: 20 },\n { x: 225, radius: 25 }\n ]\n },\n {\n y: 150,\n color: 'brown',\n label: 'Row B',\n circles: [\n { x: 25, radius: 25 },\n { x: 75, radius: 20 },\n { x: 125, radius: 15 },\n { x: 175, radius: 10 },\n { x: 225, radius: 5 }\n ]\n },\n {\n y: 250,\n color: 'orange',\n label: 'Row C',\n circles: [\n { x: 25, radius: 20 },\n { x: 75, radius: 10 },\n { x: 125, radius: 5 },\n { x: 175, radius: 10 },\n { x: 225, radius: 20 }\n ]\n }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":122,"value":"{\n const svg = d3.create('svg')\n .attr('width', 500)\n .attr('height', 300);\n\n const rows = svg.selectAll('g')\n .data(circleGrid)\n .join('g')\n .attr('transform', row => `translate(0, ${row.y})`)\n .attr('fill', row => row.color);\n\n rows.append('text')\n .attr('font-family', 'sans-serif')\n .attr('y', -30)\n .text(d => d.label)\n\n rows.selectAll('circle')\n .data(row => row.circles)\n .join('circle')\n .attr('fill', circ => circ.color)\n .attr('cx', circ => circ.x)\n .attr('r', circ => circ.radius);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13,"value":"### Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":15,"value":"d3 = require('d3@7')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2e:"$2d:body"