31:[{"id":"67b348b4af22a0f7a76a1c9a87816fe04fb0dd89a871918ce90be31856867da9058bd1150712f3ee637d04f14b624fd193df5043c00c30f59e1b0635087e9254","href":"https://static.observableusercontent.com/files/67b348b4af22a0f7a76a1c9a87816fe04fb0dd89a871918ce90be31856867da9058bd1150712f3ee637d04f14b624fd193df5043c00c30f59e1b0635087e9254","name":"iris.csv","type":"text/csv","lastModified":1576849214116.112,"size":3712}] 2f:{"title":"Scatterplot with Shapes","cells":[{"id":1,"value":"md`# Scatterplot with Shapes\n\nThis chart shows the relationship between sepal width (*y*-axis) and sepal length (*x*-axis) for three species of Iris.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":312,"value":"legend = {\n const id = DOM.uid().id;\n\n return html`\n

${color.domain().map((name, i) => html`\n

\n \n ${document.createTextNode(name)}\n

`)}\n

`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":59,"value":"xAxis = g =>\n g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).ticks(width / 80)) // control the number of ticks highlighted on axis\n .call(g => g.select(\".domain\").remove()) // if comment out this line, I can find in element tag I can find a Path with className \"domain\"\n .call(g =>\n g\n .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)\n )","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"chart = {\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, width, height]);\n\n svg.append(\"g\").call(xAxis);\n\n svg.append(\"g\").call(yAxis);\n\n svg.append(\"g\").call(grid);\n\n svg\n .append(\"g\")\n .attr(\"stroke-width\", 1.5)\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", 10)\n .selectAll(\"g\")\n .data(data)\n .join(\"g\")\n .attr(\"transform\", d => `translate(${x(d.x)},${y(d.y)})`)\n .call(g =>\n g\n .append(\"path\")\n .attr(\"fill\", d => color(d.category))\n .attr(\"d\", d => shape(d.category))\n )\n .call(g =>\n g\n .append(\"text\") // it is useful but will make a mess\n .attr(\"dy\", \"0.35em\")\n .attr(\"x\", 10)\n .attr(\"fill\", d => color(d.category)) // use name to\n //.text(d => d.category)\n .text(d => d.name)\n );\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":3,"value":"data = Object.assign(d3.csvParse(await FileAttachment(\"iris.csv\").text(), ({species: category, sepalLength: x, sepalWidth: y}) => ({category, x: +x, y: +y})), {x: \"Sepal length (cm) →\", y: \"↑ Sepal width (cm)\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":472,"value":"data.x","pinned":true,"hidden":false,"mode":"ojs"},{"id":475,"value":"data.y","pinned":true,"hidden":false,"mode":"ojs"},{"id":297,"value":"d3.csvParse(await FileAttachment(\"iris.csv\").text())","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":302,"value":"color = d3.scaleOrdinal(data.map(d => d.category), d3.schemeCategory10)","pinned":true,"hidden":false,"mode":"ojs"},{"id":527,"value":"d3.symbols.map(s => d3.symbol().type(s)())","pinned":true,"hidden":false,"mode":"ojs"},{"id":524,"value":"shape(data[0].category)","pinned":true,"hidden":false,"mode":"ojs"},{"id":304,"value":"shape = d3.scaleOrdinal(data.map(d => d.category), d3.symbols.map(s => d3.symbol().type(s)()))","pinned":true,"hidden":false,"mode":"ojs"},{"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.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":true,"hidden":false,"mode":"ojs"},{"id":511,"value":"x.ticks()","pinned":true,"hidden":false,"mode":"ojs"},{"id":283,"value":"grid = g => g\n .attr(\"stroke\", \"currentColor\")// red is fine too\n .attr(\"stroke-opacity\", 0.1)\n .call(g => g.append(\"g\")\n .selectAll(\"line\")\n .data(x.ticks())\n .join(\"line\")\n .attr(\"x1\", d => 0.5 + x(d))\n .attr(\"x2\", d => 0.5 + x(d))\n .attr(\"y1\", margin.top)\n .attr(\"y2\", height - margin.bottom))\n .call(g => g.append(\"g\")\n .selectAll(\"line\")\n .data(y.ticks())\n .join(\"line\")\n .attr(\"y1\", d => 0.5 + y(d))\n .attr(\"y2\", d => 0.5 + y(d))\n .attr(\"x1\", margin.left)\n .attr(\"x2\", width - margin.right));","pinned":true,"hidden":false,"mode":"ojs"},{"id":43,"value":"margin = ({top: 25, right: 20, bottom: 35, left: 40})","pinned":true,"hidden":false,"mode":"ojs"},{"id":39,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}