29:null 2a:["$","title",null,{"children":"Custom SVG as Symbol | Maya Gans | Observable"}] 2f:T798,30:[] 2d:{"id":"d90aba6a0be20442","slug":null,"title":"Custom SVG as Symbol","thumbnail":"2ae69a063bb05a626ed55ce494045d9bb9563d0789a4aa62a5968553367d7787","access_level":"public","create_time":"$D2022-11-15T15:34:43.787Z","update_time":"$D2022-11-15T19:25:37.837Z","view_time":null,"first_public_time":"$D2022-11-15T19:08:27.436Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"cfa704f351f0d39f","login":"mayagans","name":"Maya Gans","avatar_url":"https://avatars-next.observableusercontent.com/106e9e9b89751753a8046f057b9b885e525e02d6deca7ef8b83b5b1f969a1f26","tier":"starter_2024"},"version":193,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"8a52a621b0b172dc","login":"mayagans","name":"Maya Gans","avatar_url":"https://avatars-next.observableusercontent.com/106e9e9b89751753a8046f057b9b885e525e02d6deca7ef8b83b5b1f969a1f26","tier":null}],"members":[{"type":"individual","id":"8a52a621b0b172dc","login":"mayagans","name":"Maya Gans","avatar_url":"https://avatars-next.observableusercontent.com/106e9e9b89751753a8046f057b9b885e525e02d6deca7ef8b83b5b1f969a1f26","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Custom SVG as Symbol","cells":[{"id":0,"value":"# Custom SVG as Symbol","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":169,"value":"$2f","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":129,"value":"## The Plot","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":37,"value":"data = [\n {x: 1, y: 1, category: \"A\"},\n {x: 2, y: 1, category: \"B\"},\n {x: 3, y: 1, category: \"C\"}\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"chart = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height]);\n\n\n svg.append(\"g\")\n .attr(\"stroke-width\", 1.5)\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", 12)\n .selectAll(\"g\")\n .data(data)\n .join(\"g\")\n .attr(\"transform\", d => `translate(${x(d.x)},${y(d.y)})`)\n .call(g => g.append(\"use\")\n .attr(\"href\", d=>`#${d.category}`)\n .attr(\"width\", 20)\n .attr(\"height\", 20) \n .attr(\"stroke\", \"#000\")\n .attr(\"fill\", \"#000\"))\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"### Plot Universe","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"margin = ({top: 10, right: 30, bottom: 10, left: 30})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"width = 460 - margin.left - margin.right","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"height = 100 - margin.top - margin.bottom","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"x = d3.scaleLinear()\n .domain(d3.extent(data, d => d.x)).nice()\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"y = d3.scaleLinear()\n .domain(d3.extent(data, d => d.y)).nice()\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).ticks(width / 80))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.append(\"text\")\n .attr(\"x\", width)\n .attr(\"y\", margin.bottom - 4)\n .attr(\"fill\", \"currentColor\")\n .attr(\"text-anchor\", \"end\")\n .text(data.x))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.append(\"text\")\n .attr(\"x\", -margin.left)\n .attr(\"y\", 10)\n .attr(\"fill\", \"currentColor\")\n .attr(\"text-anchor\", \"start\")\n .text(data.y))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body"