2d:null 2e:["$","title",null,{"children":"Scatterplot with shapes | D3 | Observable"}] 33: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}}); }34:[{"id":"67b348b4af22a0f7a76a1c9a87816fe04fb0dd89a871918ce90be31856867da9058bd1150712f3ee637d04f14b624fd193df5043c00c30f59e1b0635087e9254","href":"https://static.observableusercontent.com/files/67b348b4af22a0f7a76a1c9a87816fe04fb0dd89a871918ce90be31856867da9058bd1150712f3ee637d04f14b624fd193df5043c00c30f59e1b0635087e9254","name":"iris.csv","type":"text/csv","lastModified":1576278115684.065,"size":3712}] 31:{"id":"bb8fa3789c777a5a","slug":"scatterplot-with-shapes","title":"Scatterplot with shapes","thumbnail":"72b9c1522a31446945022e0aad794b52c1a5fcafa750a8906ab5bb03fa8f9e15","access_level":"public","create_time":"$D2019-12-13T23:01:24.753Z","update_time":"$D2023-08-01T14:32:29.494Z","view_time":null,"first_public_time":"$D2019-12-13T23:11:38.265Z","has_unpublished_edits":null,"fork":true,"stars":47,"starred":false,"owner":{"type":"team","id":"863951e3ebe4c0ae","login":"d3","name":"D3","avatar_url":"https://avatars-next.observableusercontent.com/5af16e327a90b2873351dda8a596c0d2d3bf954f64523deefe80177c9764d0f7","tier":"pro_2024"},"version":430,"publish_version":null,"role":null,"authored":false,"authors":[],"members":[{"type":"team","id":"863951e3ebe4c0ae","login":"d3","name":"D3","avatar_url":"https://avatars-next.observableusercontent.com/5af16e327a90b2873351dda8a596c0d2d3bf954f64523deefe80177c9764d0f7","tier":"pro_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":208,"collection":{"id":"9677f62ae01e8373","slug":"d3-shape","title":"d3-shape","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"data = FileAttachment(\"iris.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":416,"value":"Or, using [Observable Plot](/plot/)’s concise API:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"