25:["$","title",null,{"children":"Scatterplot with shapes | JOYCE TAN's Workspace | Observable"}] 49: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}}); }4a:[{"id":"67b348b4af22a0f7a76a1c9a87816fe04fb0dd89a871918ce90be31856867da9058bd1150712f3ee637d04f14b624fd193df5043c00c30f59e1b0635087e9254","href":"https://static.observableusercontent.com/files/67b348b4af22a0f7a76a1c9a87816fe04fb0dd89a871918ce90be31856867da9058bd1150712f3ee637d04f14b624fd193df5043c00c30f59e1b0635087e9254","name":"iris.csv","type":"text/csv","lastModified":1701735935644.893,"size":3712},{"id":"c3e0fd141703a0749940e7fb465aaf85cbfeb78798b30cd300d15047c0a46e019fe7174a819846e7ff18306d1f6b734bcf64fa5cc9e7e94ef47c82aefd27a948","href":"https://static.observableusercontent.com/files/c3e0fd141703a0749940e7fb465aaf85cbfeb78798b30cd300d15047c0a46e019fe7174a819846e7ff18306d1f6b734bcf64fa5cc9e7e94ef47c82aefd27a948","name":"edited_wizardschild - iris.csv","type":"text/csv","lastModified":1701735951733.997,"size":8128}] 29:{"id":"74b291e665a48b06","slug":null,"title":"Scatterplot with shapes","thumbnail":"202e0ca2dc89b17567e062c40ed8b6d27caebebbc7151215ef23baaa43434bb7","access_level":"public","create_time":"$D2023-12-05T00:25:35.644Z","update_time":"$D2023-12-05T00:25:51.353Z","view_time":null,"first_public_time":"$D2023-12-05T00:25:35.644Z","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":"bc0ebcbef1616572","login":"joyce-tan-ws","name":"JOYCE TAN's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/9a08f58c6586e25a44597f5369861bf6e884a89a31d86df71cfa84a49a2d1114","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":431,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"017535eaf4a7944b","login":"joyce-tan","name":"JOYCE TAN","avatar_url":"https://avatars-next.observableusercontent.com/a49028003f6484a6da1b44a5ab05fd1c195861117b90e8316427ac6899bc9a45","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"017535eaf4a7944b","login":"joyce-tan","name":"JOYCE TAN","avatar_url":"https://avatars-next.observableusercontent.com/a49028003f6484a6da1b44a5ab05fd1c195861117b90e8316427ac6899bc9a45","tier":null,"role":"editor"},{"type":"team","id":"bc0ebcbef1616572","login":"joyce-tan-ws","name":"JOYCE TAN's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/9a08f58c6586e25a44597f5369861bf6e884a89a31d86df71cfa84a49a2d1114","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","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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"data = FileAttachment(\"edited_wizardschild - iris.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 24:null