2d:null 2e:["$","title",null,{"children":"Scatterplot with Symbols | bchoatejr | Observable"}] 33:T7f5,symbols = svg` ` 34:[] 31:{"id":"d4132688ef1d6d9c","slug":"scatterplot-with-symbols","title":"Scatterplot with Symbols","thumbnail":"e9fc9d17c93b439b2458c1fbbeaeade03dfb71604a260796af495c3576b02876","access_level":"public","create_time":"$D2019-08-01T23:45:34.396Z","update_time":"$D2019-08-02T01:44:10.327Z","view_time":null,"first_public_time":"$D2019-08-02T01:44:23.835Z","has_unpublished_edits":null,"fork":true,"stars":4,"starred":false,"owner":{"type":"team","id":"727607e20e3c61f9","login":"bchoatejr","name":"","avatar_url":"https://avatars-next.observableusercontent.com/4881a705d0248e8076cbb21f9672c3d34d1e29310ae73f42e63f26691173b539","tier":"starter_2024"},"version":338,"publish_version":338,"role":null,"authored":false,"authors":[{"type":"individual","id":"43e14e124e3e99b4","login":"bchoatejr","name":"","avatar_url":"https://avatars-next.observableusercontent.com/4881a705d0248e8076cbb21f9672c3d34d1e29310ae73f42e63f26691173b539","tier":null}],"members":[{"type":"individual","id":"43e14e124e3e99b4","login":"bchoatejr","name":"","avatar_url":"https://avatars-next.observableusercontent.com/4881a705d0248e8076cbb21f9672c3d34d1e29310ae73f42e63f26691173b539","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"title":"Scatterplot with Symbols","cells":[{"id":1,"value":"md`# Scatterplot with Symbols\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":277,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"chart = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height]);\n\n svg.append(\"g\")\n .call(xAxis);\n\n svg.append(\"g\")\n .call(yAxis);\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.id}`)\n .attr(\"width\", 20)\n .attr(\"height\", 20) \n .attr(\"stroke\", \"#000\")\n .attr(\"fill\", \"#000\"))\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"margin = ({top: 20, right: 30, bottom: 30, left: 40})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"x = d3.scaleLinear()\n .domain(d3.extent(data, d => d.x)).nice()\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"y = d3.scaleLinear()\n .domain(d3.extent(data, d => d.y)).nice()\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.append(\"text\")\n .attr(\"x\", width - margin.right)\n .attr(\"y\", -4)\n .attr(\"fill\", \"#000\")\n // .attr(\"font-size\", 24)\n .attr(\"font-weight\", \"bold\")\n .attr(\"text-anchor\", \"end\")\n .text(data.x))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"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.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", 4)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(data.y))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":291,"value":"data = [...Array(20)].map((d,i)=>{return {name:String.fromCharCode(65+i), x:(Math.random()*100).toFixed(0), y:(Math.random()*100).toFixed(0), id:parseInt(Math.random()*3)}});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"