27:null 28:["$","title",null,{"children":"Brushable scatterplot | cn | Observable"}] 2d:Ta36,viewof selection = { // Specify the chart’s dimensions. const width = 928; const height = 600; const marginTop = 20; const marginRight = 30; const marginBottom = 30; const marginLeft = 40; // Create the horizontal (x) scale, positioning N/A values on the left margin. const x = d3.scaleLinear() .domain([0, d3.max(data, d => d["Horsepower"])]).nice() .range([marginLeft, width - marginRight]) .unknown(marginLeft); // Create the vertical (y) scale, positioning N/A values on the bottom margin. const y = d3.scaleLinear() .domain([0, d3.max(data, d => d["Miles_per_Gallon"])]).nice() .range([height - marginBottom, marginTop]) .unknown(height - marginBottom); // Create the SVG container. const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .property("value", []); // Append the axes. svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(d3.axisBottom(x)) .call(g => g.select(".domain").remove()) .call(g => g.append("text") .attr("x", width - marginRight) .attr("y", -4) .attr("fill", "#000") .attr("font-weight", "bold") .attr("text-anchor", "end") .text("Horsepower")); svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(y)) .call(g => g.select(".domain").remove()) .call(g => g.select(".tick:last-of-type text").clone() .attr("x", 4) .attr("text-anchor", "start") .attr("font-weight", "bold") .text("Miles per Gallon")); // Append the dots. const dot = svg.append("g") .attr("fill", "none") .attr("stroke", "steelblue") .attr("stroke-width", 1.5) .selectAll("circle") .data(data) .join("circle") .attr("transform", d => `translate(${x(d["Horsepower"])},${y(d["Miles_per_Gallon"])})`) .attr("r", 3); // Create the brush behavior. svg.call(d3.brush().on("start brush end", ({selection}) => { let value = []; if (selection) { const [[x0, y0], [x1, y1]] = selection; value = dot .style("stroke", "gray") .filter(d => x0 <= x(d["Horsepower"]) && x(d["Horsepower"]) < x1 && y0 <= y(d["Miles_per_Gallon"]) && y(d["Miles_per_Gallon"]) < y1) .style("stroke", "steelblue") .data(); } else { dot.style("stroke", "steelblue"); } // Inform downstream cells that the selection has changed. svg.property("value", value).dispatch("input"); })); return svg.node(); }2e:[{"id":"53c407ee531bab128477148c9e28c49dd06bf83a93ae317e58dbb9fc819db0d4f6c4fb9646fa2fe20faad76addee20cfc360eab2362eeaec3340a5e4655b9996","href":"https://static.observableusercontent.com/files/53c407ee531bab128477148c9e28c49dd06bf83a93ae317e58dbb9fc819db0d4f6c4fb9646fa2fe20faad76addee20cfc360eab2362eeaec3340a5e4655b9996","name":"cars-2.csv","type":"application/octet-stream","lastModified":1757403336266.015,"size":20140}] 2b:{"id":"2fdc6e616459147d","slug":null,"title":"Brushable scatterplot","thumbnail":"1176ddd11607e0aa59d2a772ff52d29576f810ff822cd37624455b34ce31a022","access_level":"public","create_time":"$D2025-09-09T07:35:36.266Z","update_time":"$D2025-09-09T07:35:36.266Z","view_time":null,"first_public_time":"$D2025-09-09T07:35:36.266Z","has_unpublished_edits":null,"fork":{"id":"589f9a25112ad1c2","slug":"brushable-scatterplot","title":"Brushable scatterplot","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"d355a2849fd8a80b","login":"cn00","name":"cn","avatar_url":"https://avatars-next.observableusercontent.com/a61b575b4c4f2a2dac12fec067894e2f8d65010d51e3bf0b3bdbf80cb9bf2612","tier":"starter_2024"},"version":300,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e1c3acd87b7ce294","login":"cn00","name":"cn","avatar_url":"https://avatars-next.observableusercontent.com/a61b575b4c4f2a2dac12fec067894e2f8d65010d51e3bf0b3bdbf80cb9bf2612","tier":null}],"members":[{"type":"team","id":"d355a2849fd8a80b","login":"cn00","name":"cn","avatar_url":"https://avatars-next.observableusercontent.com/a61b575b4c4f2a2dac12fec067894e2f8d65010d51e3bf0b3bdbf80cb9bf2612","tier":"starter_2024","role":"editor"},{"type":"individual","id":"e1c3acd87b7ce294","login":"cn00","name":"cn","avatar_url":"https://avatars-next.observableusercontent.com/a61b575b4c4f2a2dac12fec067894e2f8d65010d51e3bf0b3bdbf80cb9bf2612","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Brushable scatterplot","cells":[{"id":1,"value":"

Brushable scatterplot

D3 › Gallery

\n\n# Brushable scatterplot\n\nThis chart shows the inverse relationship between engine power (*y*-axis) and fuel efficiency (*x*-axis) in ${data.length} cars from 1970–1982. Brushing this scatterplot will show the selected data points.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$2d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"selection","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"data = FileAttachment(\"cars-2.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":281,"value":"Thanks to [John Alexis Guerra Gómez](/@john-guerra) for suggestions.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W2e","stdlib":"1","titling":"auto"}} 2c:"$2b:body"