40:null 41:["$","title",null,{"children":"Scatterplot with Shapes for Iris Data | hrf_DataVis | Observable"}] 47:T42b,legend = { const id = DOM.uid().id; return html`

${scolor.domain().map((name, i) => html`

${document.createTextNode(name+"_sepal")}

`)}

${pcolor.domain().map((name, j) => html`

${document.createTextNode(name+"_petal")}

`)}

`; }48:[{"id":"775ebb04fa095af56a97930eba3883452aabd88743c28bf3d02245c90b4eae7db878fae6f7008dd9a3881a135d5a109c9225f993166555d3c23f87a7ea5dd434","href":"https://static.observableusercontent.com/files/775ebb04fa095af56a97930eba3883452aabd88743c28bf3d02245c90b4eae7db878fae6f7008dd9a3881a135d5a109c9225f993166555d3c23f87a7ea5dd434","name":"iris_shape@3.csv","type":"text/csv","lastModified":1681184874282.482,"size":7139}] 45:{"id":"44c1c03828981bcd","slug":"scatterplot-with-shapes-for-iris-data","title":"Scatterplot with Shapes for Iris Data","thumbnail":"72de6f202f1f31ac2ff7296181092f526f536a7bd41414ad5afdd2b2357349c1","access_level":"public","create_time":"$D2023-04-11T02:23:09.023Z","update_time":"$D2023-04-11T09:06:14.557Z","view_time":null,"first_public_time":"$D2024-04-09T11:29:12.101Z","has_unpublished_edits":null,"fork":{"id":"bb8fa3789c777a5a","slug":"scatterplot-with-shapes","title":"Scatterplot with shapes","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"052ba4357c888966","login":"hrfdatavis","name":"hrf_DataVis","avatar_url":"https://avatars-next.observableusercontent.com/9b1f056c32b63108f6d58abb3c829e2e0411e34fee5036424195348193ed6321","tier":"starter_2024","bio":"","following":false},"version":455,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"0d706fade8ee8311","login":"hai-rf","name":"rf H","avatar_url":"https://avatars-next.observableusercontent.com/fd4a39b51c455f934e094493b857f38910b967d411fdb353b714f9384cea5263","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"0d706fade8ee8311","login":"hai-rf","name":"rf H","avatar_url":"https://avatars-next.observableusercontent.com/fd4a39b51c455f934e094493b857f38910b967d411fdb353b714f9384cea5263","tier":null,"role":"editor"},{"type":"team","id":"052ba4357c888966","login":"hrfdatavis","name":"hrf_DataVis","avatar_url":"https://avatars-next.observableusercontent.com/9b1f056c32b63108f6d58abb3c829e2e0411e34fee5036424195348193ed6321","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Scatterplot with Shapes for Iris Data","cells":[{"id":1,"value":"md`# Scatterplot with Shapes for Iris Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":312,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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 .call(grid);\n\n svg.append(\"g\")\n .attr(\"stroke-width\", 1.5)\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", 10)\n .selectAll(\"path\")\n .data(sdata)\n .join(\"path\")\n .attr(\"transform\", d => `translate(${x1(d.width)},${y1(d.length)})`)\n .attr(\"fill\", d => scolor(d.variety))\n .attr(\"d\", d => sshape(d.category));\n \n svg.append(\"g\")\n .attr(\"stroke-width\", 1.5)\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", 10)\n .selectAll(\"path\")\n .data(pdata)\n .join(\"path\")\n .attr(\"transform\", d => `translate(${x2(d.width)},${y2(d.length)})`)\n .attr(\"fill\", d => pcolor(d.variety))\n .attr(\"d\", d => pshape(d.category));\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":297,"value":"data = d3.csvParse(await FileAttachment(\"iris_shape@3.csv\").text())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":378,"value":"sdata = d3.csvParse(await FileAttachment(\"iris_shape@3.csv\").text())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":422,"value":"label = Object.assign({y: \"↑ Sepal length (cm)\", x: \"Sepal width (cm) →\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":382,"value":"pdata = d3.csvParse(await FileAttachment(\"iris_shape@3.csv\").text())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":366,"value":"keys = data.columns.slice(0,4)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"x1 = d3.scaleLinear()\n .domain(d3.extent(sdata, d => d.width)).nice()\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":399,"value":"x2 = d3.scaleLinear()\n .domain(d3.extent(pdata, d => d.width)).nice()\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"y1 = d3.scaleLinear()\n .domain(d3.extent(sdata, d => d.length)).nice()\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":401,"value":"y2 = d3.scaleLinear()\n .domain(d3.extent(pdata, d => d.length)).nice()\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":302,"value":"scolor = d3.scaleOrdinal(sdata.map(d => d.variety), d3.schemeCategory10)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":403,"value":"pcolor = d3.scaleOrdinal(pdata.map(d => d.variety), d3.schemeCategory10)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":304,"value":"sshape = d3.scaleOrdinal(sdata.map(d => d.category), d3.symbols.map(s => d3.symbol().type(s)()))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":405,"value":"pshape = d3.scaleOrdinal(pdata.map(d => d.category), d3.symbols.map(s => d3.symbol().type(s)()))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x1).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(label.x))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y1))\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(label.y))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"grid = g => g\n .attr(\"stroke\", \"currentColor\")\n .attr(\"stroke-opacity\", 0.1)\n .call(g => g.append(\"g\")\n .selectAll(\"line\")\n .data(x1.ticks())\n .join(\"line\")\n .attr(\"x1\", d => 0.5 + x1(d))\n .attr(\"x2\", d => 0.5 + x2(d))\n .attr(\"y1\", margin.top)\n .attr(\"y2\", height - margin.bottom))\n .call(g => g.append(\"g\")\n .selectAll(\"line\")\n .data(y1.ticks())\n .join(\"line\")\n .attr(\"y1\", d => 0.5 + y1(d))\n .attr(\"y2\", d => 0.5 + y2(d))\n .attr(\"x1\", margin.left)\n .attr(\"x2\", width - margin.right));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"margin = ({top: 25, right: 20, bottom: 35, left: 40})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W48","stdlib":"1"}} 46:"$45:body"