2f:T798,30:[] 2d:{"title":"Custom SVG as Symbol","cells":[{"id":0,"value":"# Custom SVG as Symbol","pinned":false,"hidden":false,"mode":"md"},{"id":169,"value":"$2f","pinned":true,"hidden":false,"mode":"html"},{"id":129,"value":"## The Plot","pinned":false,"hidden":false,"mode":"md"},{"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"},{"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"},{"id":22,"value":"### Plot Universe","pinned":false,"hidden":false,"mode":"md"},{"id":9,"value":"margin = ({top: 10, right: 30, bottom: 10, left: 30})","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"width = 460 - margin.left - margin.right","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"height = 100 - margin.top - margin.bottom","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"}],"files":"$W30","stdlib":"1","titling":"auto"}