2d:null 2e:["$","title",null,{"children":"Placing SVG elements | Nacho Caballero | Observable"}] 33:T56f,{ const svg = d3.select(DOM.svg(100, 100)); svg .selectAll("rect") .data(data) .join("rect") .attr( "transform", (d, i) => `translate(${[i * squareSize, i * squareSize]})` ) // same as: // .attr("x", (d, i) => i * squareSize) // .attr("y", (d, i) => i * squareSize) .attr("width", squareSize) .attr("height", squareSize) .attr("fill", "lightblue"); svg .selectAll("circle") .data(data) .join("circle") .attr( "transform", (d, i) => `translate(${[ i * squareSize + squareSize / 2, i * squareSize + squareSize / 2 ]})` ) // same as: // .attr("cx", (d, i) => i * squareSize + squareSize / 2) // .attr("cy", (d, i) => i * squareSize + squareSize / 2) .attr("r", squareSize / 3) .attr("fill", "salmon"); svg .selectAll("text") .data(data) .join("text") .attr( "transform", (d, i) => `translate(${[ i * squareSize + squareSize / 2, i * squareSize + squareSize / 2 ]})` ) // same as: // .attr("x", (d, i) => i * squareSize + squareSize / 2) // .attr("y", (d, i) => i * squareSize + squareSize / 2) .attr("text-anchor", "middle") .attr("dy", ".35em") .attr("fill", "white") .attr("font-family", "Arial") .text((d) => d); return svg.node(); }34:T41d,{ const svg = d3.select(DOM.svg(100, 100)); const padding = 5; const strokeWidth = 5; const g = svg .selectAll("g") .data(data) .join("g") .attr( "transform", (d, i) => `translate(${[ i * squareSize + strokeWidth / 2, i * squareSize + strokeWidth / 2 ]})` ); g.append("rect") .attr("width", squareSize - padding) .attr("height", squareSize - padding) .attr("stroke", "steelblue") .attr("stroke-width", strokeWidth) .attr("fill", "lightblue"); g.append("circle") .attr( "transform", `translate(${[(squareSize - padding) / 2, (squareSize - padding) / 2]})` ) .attr("r", (squareSize - padding) / 3) .attr("fill", "salmon"); g.append("text") .attr( "transform", `translate(${[(squareSize - padding) / 2, (squareSize - padding) / 2]})` ) .attr("text-anchor", "middle") .attr("dy", ".35em") .attr("fill", "white") .attr("font-family", "Arial") .text((d) => d); return svg.node(); }35:[] 31:{"id":"db4885f4e2e1c8f5","slug":"placing-svg-elements","title":"Placing SVG elements","thumbnail":"1c4debebbd5eb952d060463ad2460b7170ba92835c118b41e68604f22b582b51","access_level":"public","create_time":"$D2023-07-05T11:02:23.362Z","update_time":"$D2023-08-09T09:58:45.075Z","view_time":null,"first_public_time":"$D2023-07-05T12:02:20.864Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"70a88bc30ad137e1","login":"nachocab","name":"Nacho Caballero","avatar_url":"https://avatars-next.observableusercontent.com/225a321e3612e41b73bcd50e0ee2d6ca386939be025d3a87d1611323abe2c59d","tier":"starter_2024"},"version":656,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"fad4469b7022b4d5","login":"nachocab","name":"Nacho Caballero","avatar_url":"https://avatars-next.observableusercontent.com/225a321e3612e41b73bcd50e0ee2d6ca386939be025d3a87d1611323abe2c59d","tier":null}],"members":[{"type":"individual","id":"fad4469b7022b4d5","login":"nachocab","name":"Nacho Caballero","avatar_url":"https://avatars-next.observableusercontent.com/225a321e3612e41b73bcd50e0ee2d6ca386939be025d3a87d1611323abe2c59d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"a32f0ce43949e05b","slug":"experiments","title":"Learning D3","owner":{"id":"70a88bc30ad137e1","login":"nachocab","name":"Nacho Caballero"}},"type":"notebook","body":{"title":"Placing SVG elements","cells":[{"id":0,"value":"# Placing SVG elements","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":270,"value":"toc(\"h2\", \"\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"## Plain SVG\n\nLet's place without using D3 (use `htl.html` instead of `htl.svg` in case you need HTML comments)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":121,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":469,"value":"Translating nested svgs:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":323,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":544,"value":"Placing larger elements inside smaller ones: we often don't want to specify fixed widths","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":500,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":580,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"## D3 - rect/text x/y, circle cx/cy\nYou can place them independently:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"Or you can place them inside a g","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":64,"value":"{\n const svg = d3.select(DOM.svg(100, 100));\n\n const g = svg.selectAll(\"g\").data(data).join(\"g\");\n\n g.append(\"rect\")\n .attr(\n \"transform\",\n (d, i) => `translate(${[i * squareSize, i * squareSize]})`\n )\n .attr(\"width\", squareSize)\n .attr(\"height\", squareSize)\n .attr(\"fill\", \"lightblue\");\n\n g.append(\"circle\")\n .attr(\n \"transform\",\n (d, i) =>\n `translate(${[\n i * squareSize + squareSize / 2,\n i * squareSize + squareSize / 2\n ]})`\n )\n .attr(\"r\", squareSize / 3)\n .attr(\"fill\", \"salmon\");\n\n g.append(\"text\")\n .attr(\n \"transform\",\n (d, i) =>\n `translate(${[\n i * squareSize + squareSize / 2,\n i * squareSize + squareSize / 2\n ]})`\n )\n .attr(\"text-anchor\", \"middle\")\n .attr(\"dy\", \".35em\")\n .attr(\"fill\", \"white\")\n .attr(\"font-family\", \"Arial\")\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":74,"value":"## D3 - g transform\n\nTo avoid placing each element separately, place the ``","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":77,"value":"{\n const svg = d3.select(DOM.svg(100, 100));\n\n const g = svg\n .selectAll(\"g\")\n .data(data)\n .join(\"g\")\n .attr(\n \"transform\",\n (d, i) => `translate(${[i * squareSize, i * squareSize]})`\n );\n\n g.append(\"rect\")\n .attr(\"width\", squareSize)\n .attr(\"height\", squareSize)\n .attr(\"fill\", \"lightblue\");\n\n g.append(\"circle\")\n .attr(\"transform\", `translate(${[squareSize / 2, squareSize / 2]})`)\n .attr(\"r\", squareSize / 3)\n .attr(\"fill\", \"salmon\");\n\n g.append(\"text\")\n .attr(\"transform\", `translate(${[squareSize / 2, squareSize / 2]})`)\n .attr(\"text-anchor\", \"middle\")\n .attr(\"dy\", \".35em\")\n .attr(\"fill\", \"white\")\n .attr(\"font-family\", \"Arial\")\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":170,"value":"## D3 - padding\n\nIf you want to add padding:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":169,"value":"{\n const svg = d3.select(DOM.svg(100, 100));\n\n const padding = 3;\n\n const g = svg\n .selectAll(\"g\")\n .data(data)\n .join(\"g\")\n .attr(\n \"transform\",\n (d, i) =>\n `translate(${[i * (squareSize + padding), i * (squareSize + padding)]})`\n );\n\n g.append(\"rect\")\n .attr(\"width\", squareSize)\n .attr(\"height\", squareSize)\n .attr(\"fill\", \"lightblue\");\n\n g.append(\"circle\")\n .attr(\"transform\", `translate(${[squareSize / 2, squareSize / 2]})`)\n .attr(\"r\", squareSize / 3)\n .attr(\"fill\", \"salmon\");\n\n g.append(\"text\")\n .attr(\"transform\", `translate(${[squareSize / 2, squareSize / 2]})`)\n .attr(\"text-anchor\", \"middle\")\n .attr(\"dy\", \".35em\")\n .attr(\"fill\", \"white\")\n .attr(\"font-family\", \"Arial\")\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":179,"value":"Another option to add padding is to reduce the width of the elements","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":178,"value":"{\n const svg = d3.select(DOM.svg(100, 100));\n\n const padding = 3;\n\n const g = svg\n .selectAll(\"g\")\n .data(data)\n .join(\"g\")\n .attr(\n \"transform\",\n (d, i) => `translate(${[i * squareSize, i * squareSize]})`\n );\n\n g.append(\"rect\")\n .attr(\"width\", squareSize - padding)\n .attr(\"height\", squareSize - padding)\n .attr(\"fill\", \"lightblue\");\n\n g.append(\"circle\")\n .attr(\n \"transform\",\n `translate(${[(squareSize - padding) / 2, (squareSize - padding) / 2]})`\n )\n .attr(\"r\", (squareSize - padding) / 3)\n .attr(\"fill\", \"salmon\");\n\n g.append(\"text\")\n .attr(\n \"transform\",\n `translate(${[(squareSize - padding) / 2, (squareSize - padding) / 2]})`\n )\n .attr(\"text-anchor\", \"middle\")\n .attr(\"dy\", \".35em\")\n .attr(\"fill\", \"white\")\n .attr(\"font-family\", \"Arial\")\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":221,"value":"## D3 - stroke\n\nIf you want to add a stroke, remember the alignment is centered ([no easy way](https://stackoverflow.com/questions/7241393/can-you-control-how-an-svgs-stroke-width-is-drawn) to change it to inner/outer)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":219,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":606,"value":"## D3 - place text","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":604,"value":"{\n const height = 150;\n const svg = d3.select(DOM.svg(width, height));\n\n const textData = [\n [\"right-aligned\", \"And line 2\", \"And, finally: line 3\"],\n [\"middle-aligned\", \"another line\"]\n ];\n const g = svg\n .selectAll(\"g\")\n .data(textData)\n .join(\"g\")\n .attr(\"transform\", (d, i) => `translate(${[0, 10 + i * 70]})`);\n\n const text = g\n .append(\"text\")\n .attr(\"x\", (d, i) => (i === 0 ? 0 : 90))\n // .attr('y', height/2)\n .attr(\"dy\", \".35em\")\n .attr(\"font-family\", \"Arial\");\n\n text\n .selectAll(\"tspan\")\n .data((d) => d)\n .attr(\"text-anchor\", (d, i) => (i === 0 ? \"left\" : \"middle\"))\n .join(\"tspan\")\n .attr(\"y\", (d, i) => i*20)\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":142,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":143,"value":"squareSize = 30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"data = [\"a\", \"b\", \"c\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"import { toc } from \"@mbostock/toc\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"