2d:null 2e:["$","title",null,{"children":"Brushable Scatterplot | ic-dataviz | Observable"}] 33:T6b8,brushableChart = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .property("value", []); const brush = d3.brush() .on("start brush end", brushed); //start - at the start of a brush gesture, such as on mouse-click. //brush - when the brush moves, such as on mouse-move. //end - at the end of a brush gesture, such as on mouse-release. //brush is turned on when above three activities are done. svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); svg.append("g") .call(grid); svg.append("g") .call(legend); const dot = svg.append("g") .selectAll("circle") .data(mpg) .join("circle") .attr("cx", d => x(d.x)) .attr("cy", d => y(d.y)) //Instead of "cx" and "cy", we can directly use linear transform, too. //.attr("transform", d => `translate(${x(d.x)},${y(d.y)})`) .attr("r", 3) .attr("fill", d => color(d.origin)) svg.append("g") .call(brush); function brushed({selection}) { let value = []; if (selection) { const [[x0, y0], [x1, y1]] = selection; //colors the dot with respect to "origin" field, if it is within the brushed part (or inside the rectangular box) elsewise, leaves the points as gray value = dot .attr("fill", "gray") .filter(d => x0 <= x(d.x) && x(d.x) < x1 && y0 <= y(d.y) && y(d.y) < y1) .attr("fill", d => color(d.origin)) } else{ //Colors all back to the original plain scatterplot after you exit the brush selection (for instance, clicking outside the box of selection) dot.attr("fill", d => color(d.origin)); } } return svg.node(); }34:[{"id":"c4bc130b1d281e9b946f25d1d20e71e2b88bdd9c3804d956c1418741ddb40d7242ddab86ab6236384cca9c0dff57c2e163b66d64135190913de5c633ec9ece2c","href":"https://static.observableusercontent.com/files/c4bc130b1d281e9b946f25d1d20e71e2b88bdd9c3804d956c1418741ddb40d7242ddab86ab6236384cca9c0dff57c2e163b66d64135190913de5c633ec9ece2c","name":"mpg.csv","type":"text/csv","lastModified":1629849997530.362,"size":21222}] 31:{"id":"fc324d31435dc74e","slug":"brushable-scatterplot","title":"Brushable Scatterplot","thumbnail":"1b960cb94bca67632d82885d60157a27f4a27bebdc7b502742c196e961082d6d","access_level":"public","create_time":"$D2021-08-25T00:06:37.530Z","update_time":"$D2021-08-27T02:00:09.298Z","view_time":null,"first_public_time":"$D2021-09-12T05:36:39.215Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"c91d625c69468941","login":"ic-dataviz","name":"","avatar_url":"https://avatars-next.observableusercontent.com/bd3217ad4660055b3e7ebbb5b5c74dbc9606b95c9dc87684e7216c3036ab5ac8","tier":"starter_2024"},"version":338,"publish_version":338,"role":null,"authored":false,"authors":[{"type":"individual","id":"1093b9e42c8891e7","login":"ic-dataviz","name":"","avatar_url":"https://avatars-next.observableusercontent.com/bd3217ad4660055b3e7ebbb5b5c74dbc9606b95c9dc87684e7216c3036ab5ac8","tier":null}],"members":[{"type":"individual","id":"1093b9e42c8891e7","login":"ic-dataviz","name":"","avatar_url":"https://avatars-next.observableusercontent.com/bd3217ad4660055b3e7ebbb5b5c74dbc9606b95c9dc87684e7216c3036ab5ac8","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":0,"value":"# Brushable Scatterplot\n#### *This material was prepared by Bibek KC, Yugyeong Jung*\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":285,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"//mpg dataset\nmpg = Object.assign(d3.csvParse(await FileAttachment(\"mpg.csv\").text(), ({origin: origin, weight: x, mpg: y}) => ({origin, x:+x, y: +y})), {x: \"Weight →\", y: \"↑mpg\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"margin = ({top: 25, right: 20, bottom: 35, left: 40})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"x = d3.scaleLinear()\n .domain(d3.extent(mpg, d => d.x)).nice()\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"y = d3.scaleLinear()\n .domain(d3.extent(mpg, d => d.y)).nice()\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"color = d3.scaleOrdinal(mpg.map(d => d.origin), d3.schemeCategory10) //using d3.schemeCategory10(An array of ten categorical colors represented as RGB hexadecimal strings). To know more about color schemes in d3, go: https://github.com/d3/d3-scale-chromatic/blob/main/README.md ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).ticks(20))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.append(\"text\")\n .attr(\"x\", width)\n .attr(\"y\", margin.bottom - 4)\n .attr(\"fill\", \"currentColor\")\n .attr(\"text-anchor\", \"end\")\n .attr(\"font-weight\", \"bold\")\n .text(mpg.x))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"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.append(\"text\")\n .attr(\"x\", -margin.left)\n .attr(\"y\", 10)\n .attr(\"fill\", \"currentColor\")\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(mpg.y))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"grid = g => g\n .attr(\"stroke\", \"currentColor\")\n .attr(\"stroke-opacity\", 0.1)\n//Vertial Grid Lines: We fix the extent for y-direction and then change the x-coordinates accordingly to put vertical gridlines with common seperation-width. [a line is formed by joining (x1,y1) and (x2,y2)]\n .call(g => g.append(\"g\")\n .selectAll(\"line\")\n .data(x.ticks(20))\n .join(\"line\")\n .attr(\"x1\", d => x(d))\n .attr(\"x2\", d => x(d))\n .attr(\"y1\", margin.top)\n .attr(\"y2\", height - margin.bottom))\n//Horizontal grid lines: We fix the extent for x-direction and then change the y-coordinates accordingly to put horizontal gridlines with common seperation-height\n .call(g => g.append(\"g\")\n .selectAll(\"line\")\n .data(y.ticks())\n .join(\"line\")\n .attr(\"y1\", d => y(d))\n .attr(\"y2\", d => y(d))\n .attr(\"x1\", margin.left)\n .attr(\"x2\", width - margin.right));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"legend = svg => {\n const g = svg\n .attr(\"transform\", `translate(${width},10)`)\n .attr(\"text-anchor\", \"end\")\n .attr(\"font-size\", 20)\n .selectAll(\"g\")\n .data(color.domain().reverse())\n .join(\"g\")\n .attr(\"transform\", (d, i) => `translate(-${i * 100}, 0)`); //\"-${i *100}\" displaces on x-position and puts legends seperately from each other \n\n g.append(\"circle\")\n .attr(\"cx\", -19)\n .attr(\"cy\", 9)\n .attr(\"r\", 5)\n .attr(\"fill\", color);\n\n g.append(\"text\")\n .attr(\"x\", -24)\n .attr(\"y\", 9.5)\n .attr(\"dy\", \"0.25em\") //em is simply the font size, it defines the proportion of the letter width and height with respect to the point size of the current font\n .text(d => d);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"chart = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height]);\n\n svg.append(\"g\")\n .call(xAxis);\n\n svg.append(\"g\")\n .call(yAxis);\n\n svg.append(\"g\")\n .call(grid);\n svg.append(\"g\")\n .call(legend);\n\n svg.append(\"g\")\n .selectAll(\"circle\")\n .data(mpg)\n .join(\"circle\")\n .attr(\"cx\", d => x(d.x))\n .attr(\"cy\", d => y(d.y))\n .attr(\"r\", 3)\n .attr(\"fill\", d => color(d.origin))\n .append(\"title\")\n .text(d => `x: ${d.x}\\ny: ${d.y}`)\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"md`## Making a brushable scatterplot`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":311,"value":"md`---\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":313,"value":"md`

${next}

${previous}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":315,"value":"md`---\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":317,"value":"html`\n