2f:T623,scatterplot = (dataset) => { // https://observablehq.com/@d3/chart-template const margin = ({top: 20, right: 100, bottom: 30, left: 40}) const w = 400 const h = 200 const svg = d3.create("svg").attr("height", h).attr("width", w) const x = d3.scaleLinear().domain(d3.extent(dataset, d => d.sepal_length)).range([margin.left, w - margin.left - margin.right]) const y = d3.scaleLinear().domain(d3.extent(dataset, d => d.sepal_width)).range([margin.top, h-margin.bottom]) const c = d3.scaleOrdinal().domain(new Set(dataset.map(d => d.species))).range(["red", "green", "blue"]) svg.selectAll("circle").data(dataset).enter() .append("circle") .attr("cx", d => x(d.sepal_length)) .attr("cy", d => y(d.sepal_width)) .attr("r", d => 2) .style("fill", d => c(d.species)) const xAxis = g => g .attr("transform", `translate(0,${h - margin.bottom})`) .call(d3.axisBottom(x)) const yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y)) svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); svg.selectAll("rect").data(c.domain()).enter() .append("rect") .attr("x", d => w - margin.right) .attr("y", (d, i) => i * 20) .attr("width", d => 10) .attr("height", d => 10) .style("fill", d => c(d)) svg.append("g").selectAll("text").data(l).enter() .append("text") .attr("x", d => w - margin.right + 10) .attr("y", (d, i) => i * 20+10) .text(d => d) return svg.node() }30:[] 2d:{"title":"Scatterplot","cells":[{"id":0,"value":"# Scatterplot","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"data = d3.csv(\"https://gist.githubusercontent.com/curran/a08a1080b88344b0c8a7/raw/0e7a9b0a5d22642a06d3d5b9bcbad9890c8ee534/iris.csv\", \n d => {\n d.sepal_length = +d.sepal_length\n d.sepal_width = +d.sepal_width\n return d\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"data","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"Plot.plot({\n marks: [Plot.dot(data, {x: \"sepal_length\", y: \"sepal_width\", fill: \"species\"})]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":80,"value":"viewof r = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":83,"value":"r","pinned":true,"hidden":false,"mode":"ojs"},{"id":21,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"scatterplot(data.filter(f))","pinned":true,"hidden":false,"mode":"ojs"},{"id":97,"value":"f = d => {\n \n return d.sepal_length > r\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":73,"value":"l = [...new Set(data.map(d => d.species))]","pinned":true,"hidden":false,"mode":"ojs"},{"id":85,"value":"\n \n

${scatterplot(data.filter(f))}

","pinned":false,"hidden":false,"mode":"html"},{"id":102,"value":"viewof a = html `X:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"viewof b = html `Y:`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}