29:null 2a:["$","title",null,{"children":"Scatterplot | Romain Vuillemot | Observable"}] 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:{"id":"60a8019228abf973","slug":null,"title":"Scatterplot","thumbnail":"8749156d4061c3b88ebd91ce2965c625dc5b139064e5163d66fb42d98e4cbb50","access_level":"public","create_time":"$D2022-11-22T11:23:00.182Z","update_time":"$D2022-11-29T06:28:30.247Z","view_time":null,"first_public_time":"$D2022-11-22T11:50:10.257Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"ae8b6fc79ca6fd4b","login":"romsson","name":"Romain Vuillemot","avatar_url":"https://avatars-next.observableusercontent.com/3b127750f8c67597cf2e60d4296f87cde15f59cdb4d1853063922cce5489fb4b","tier":"starter_2024"},"version":114,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"560201c9c61a188e","login":"romsson","name":"Romain Vuillemot","avatar_url":"https://avatars-next.observableusercontent.com/3b127750f8c67597cf2e60d4296f87cde15f59cdb4d1853063922cce5489fb4b","tier":null}],"members":[{"type":"individual","id":"560201c9c61a188e","login":"romsson","name":"Romain Vuillemot","avatar_url":"https://avatars-next.observableusercontent.com/3b127750f8c67597cf2e60d4296f87cde15f59cdb4d1853063922cce5489fb4b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":9,"collection":null,"type":"notebook","body":{"title":"Scatterplot","cells":[{"id":0,"value":"# Scatterplot","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":8,"value":"data","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":80,"value":"viewof r = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":83,"value":"r","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":21,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":23,"value":"scatterplot(data.filter(f))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":97,"value":"f = d => {\n \n return d.sepal_length > r\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":73,"value":"l = [...new Set(data.map(d => d.species))]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":85,"value":"\n \n

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

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