2d:null 2e:["$","title",null,{"children":"Average fuel efficiency | Benjamin Atkin | Observable"}] 33:[] 31:{"id":"d37e788d6f1400e2","slug":"average-fuel-efficiency","title":"Average fuel efficiency","thumbnail":"5684b8155db343472dbfb329dd0c598f31f8e22c29c2d96599bf388baba7599d","access_level":"public","create_time":"$D2018-07-11T18:38:09.068Z","update_time":"$D2018-07-11T18:58:45.914Z","view_time":null,"first_public_time":"$D2018-07-11T18:58:56.247Z","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":"037d14fb7fd36dd8","login":"benatkin","name":"Benjamin Atkin","avatar_url":"https://avatars-next.observableusercontent.com/fb19f2adb461b285dcce2e54a984cde190d16c7a95034960b716cc397ab6cb8d","tier":"starter_2024"},"version":192,"publish_version":192,"role":null,"authored":false,"authors":[{"type":"individual","id":"fdc30039652586fd","login":"benatkin","name":"Benjamin Atkin","avatar_url":"https://avatars-next.observableusercontent.com/fb19f2adb461b285dcce2e54a984cde190d16c7a95034960b716cc397ab6cb8d","tier":null}],"members":[{"type":"individual","id":"fdc30039652586fd","login":"benatkin","name":"Benjamin Atkin","avatar_url":"https://avatars-next.observableusercontent.com/fb19f2adb461b285dcce2e54a984cde190d16c7a95034960b716cc397ab6cb8d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Average fuel efficiency","cells":[{"id":1,"value":"md`# Average fuel efficiency`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"md`I've modified the selection in [D3 Brushable Scatterplot](https://beta.observablehq.com/@mbostock/d3-brushable-scatterplot) to return all data points when nothing is selected, and added a variable showing the averages. When the page is loaded it shows the averages of all cars in the data set. When selecting an area, the average changes to that of the cars selected.\n\nChanging the behavior of the brushable selection was simple: in two places in the \\`selection\\` code, I replaced the empty array (\\`[]\\`) with \\`data\\`.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"viewof averages = {\n const averages = {\n mpg: d3.mean(selection.map(car => car.x)),\n horsepower: d3.mean(selection.map(car => car.y))\n }\n const el = html`\n \n \n

Miles per Gallon	${averages.mpg.toFixed(3)}
Horsepower	${averages.horsepower.toFixed(3)}

`\n el.style.width = 'auto'\n el.querySelectorAll('th').forEach(e => e.style.paddingRight = '10px')\n el.value = averages\n return el\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"viewof selection = {\n const svg = d3.select(DOM.svg(width, height))\n .property(\"value\", data);\n \n svg.append(\"g\")\n .call(xAxis);\n \n svg.append(\"g\")\n .call(yAxis);\n\n const dot = svg.append(\"g\")\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"steelblue\")\n .attr(\"stroke-width\", 1.5)\n .selectAll(\"g\")\n .data(data)\n .enter().append(\"circle\")\n .attr(\"transform\", d => `translate(${x(d.x)},${y(d.y)})`)\n .attr(\"r\", 3);\n \n svg.append(\"g\")\n .call(d3.brush()\n .extent([[margin.left, margin.top], [width - margin.right, height - margin.bottom]])\n .on(\"start brush end\", brushed));\n \n function brushed() {\n let value = data;\n if (d3.event.selection) {\n const [[x0, y0], [x1, y1]] = d3.event.selection;\n value = data.filter(d => x0 <= x(d.x) && x(d.x) < x1 && y0 <= y(d.y) && y(d.y) < y1);\n }\n svg.property(\"value\", value).dispatch(\"input\");\n }\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"selection","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"margin = ({top: 20, right: 30, bottom: 30, left: 40})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"x = d3.scaleLinear()\n .domain(d3.extent(data, d => d.x)).nice()\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"y = d3.scaleLinear()\n .domain(d3.extent(data, d => d.y)).nice()\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.append(\"text\")\n .attr(\"x\", width - margin.right)\n .attr(\"y\", -4)\n .attr(\"fill\", \"#000\")\n .attr(\"font-weight\", \"bold\")\n .attr(\"text-anchor\", \"end\")\n .text(data.x))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", 4)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(data.y))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"data = {\n const cars = await require(\"@observablehq/cars\");\n const data = cars.map(({Name: name, Miles_per_Gallon: x, Horsepower: y}) => ({name, x, y}));\n data.x = \"Miles per Gallon\";\n data.y = \"Horsepower\";\n return data;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 32:"$31:body"