31:Taf3,chart = { // Specify the chart’s dimensions. const width = 928; const height = 600; const marginTop = 25; const marginRight = 20; const marginBottom = 35; const marginLeft = 40; // Create the positional scales. const x = d3.scaleLinear() .domain(d3.extent(data, d => d.sepalLength)).nice() .range([marginLeft, width - marginRight]); const y = d3.scaleLinear() .domain(d3.extent(data, d => d.sepalWidth)).nice() .range([height - marginBottom, marginTop]); // Create the categorical scales. const color = d3.scaleOrdinal(data.map(d => d.species), d3.schemeCategory10); const shape = d3.scaleOrdinal(data.map(d => d.species), d3.symbols.map(s => d3.symbol().type(s)())); // Create the SVG container. const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width) .attr("height", height) .attr("style", "max-width: 100%; height: auto;"); // Append the axes. svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(d3.axisBottom(x).ticks(width / 80)) .call(g => g.select(".domain").remove()) .call(g => g.append("text") .attr("x", width) .attr("y", marginBottom - 4) .attr("fill", "currentColor") .attr("text-anchor", "end") .text("Sepal length (cm) →")); svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(y)) .call(g => g.select(".domain").remove()) .call(g => g.append("text") .attr("x", -marginLeft) .attr("y", 10) .attr("fill", "currentColor") .attr("text-anchor", "start") .text("↑ Sepal width (cm)")); // Add a grid. svg.append("g") .attr("stroke", "currentColor") .attr("stroke-opacity", 0.1) .call(g => g.append("g") .selectAll("line") .data(x.ticks()) .join("line") .attr("x1", d => 0.5 + x(d)) .attr("x2", d => 0.5 + x(d)) .attr("y1", marginTop) .attr("y2", height - marginBottom)) .call(g => g.append("g") .selectAll("line") .data(y.ticks()) .join("line") .attr("y1", d => 0.5 + y(d)) .attr("y2", d => 0.5 + y(d)) .attr("x1", marginLeft) .attr("x2", width - marginRight)); // Add the scatterplot symbols. svg.append("g") .attr("stroke-width", 1.5) .attr("font-family", "sans-serif") .attr("font-size", 10) .selectAll("path") .data(data) .join("path") .attr("transform", d => `translate(${x(d.sepalLength)},${y(d.sepalWidth)})`) .attr("fill", d => color(d.species)) .attr("d", d => shape(d.species)); return Object.assign(svg.node(), {scales: {color, shape}}); }32:[{"id":"67b348b4af22a0f7a76a1c9a87816fe04fb0dd89a871918ce90be31856867da9058bd1150712f3ee637d04f14b624fd193df5043c00c30f59e1b0635087e9254","href":"https://static.observableusercontent.com/files/67b348b4af22a0f7a76a1c9a87816fe04fb0dd89a871918ce90be31856867da9058bd1150712f3ee637d04f14b624fd193df5043c00c30f59e1b0635087e9254","name":"iris.csv","type":"text/csv","lastModified":1576278115684.065,"size":3712}] 2f:{"title":"Scatterplot with shapes","cells":[{"id":1,"value":"

Scatterplot with shapes

D3 › Gallery

\n\n# 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":"md"},{"id":312,"value":"legend = {\n const id = DOM.uid().id;\n const {color, shape} = chart.scales; \n return html`\n

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

\n \n ${name}\n

`)}\n

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":3,"value":"data = FileAttachment(\"iris.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":416,"value":"Or, using [Observable Plot](/plot/)’s concise API:","pinned":false,"hidden":false,"mode":"md"},{"id":419,"value":"Plot.dot(data, {x: \"sepalLength\", y: \"sepalWidth\", fill: \"species\", symbol: \"species\"})\n .plot({nice: true, grid: true, symbol: {legend: true}})","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}