2f:T513,chart2 = { const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); svg.append("g").call(xAxis); svg.append("g").call(yAxis); svg.append("g").call(legendBodyType); const players = svg .append("g") .selectAll("circle") .data(sample_data) .join("circle") .attr('id', d => `${d.short_name}`) .attr("cx", d => x(d.age)) // + Math.random() * 20) .attr("cy", d => y(d.wage_eur)) .attr("r", d => r(d.overall)) .attr("stroke", d => color(d.body_type)) .attr("fill", d => color(d.body_type)) .attr("opacity", 0.70) .on('click', clickHighlight); const selected = new Map(sample_data.map(d => [d.short_name, true])); function clickHighlight(event, d) { const isSelected = selected.get(d.short_name); //console.log(isSelected) const player = d3.select(this); if (isSelected) { player .attr("r", d => r(d.overall) * 2) .attr("stroke", "black") .attr("opacity", 0.9); selected.set(d.short_name, !isSelected); } else { player .attr("r", d => r(d.overall)) .attr("stroke", d => color(d.body_type)) .attr("opacity", 0.70); selected.set(d.short_name, !isSelected); } } players.append("title").text(browserTooltip); return svg.node(); }30:T884,chart4 = { const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); svg.append("g").call(xAxis); svg.append("g").call(yAxis); svg.append("g").call(legendBodyType); const players = svg .append("g") .selectAll("circle") .data(sample_data) .join("circle") .attr("cx", d => x(d.age)) // + Math.random() * 20) .attr("cy", d => y(d.wage_eur)) .attr("r", d => r(d.overall)) .attr("stroke", d => color(d.body_type)) .attr("fill", d => color(d.body_type)) .attr("opacity", 0.70) .on('mouseenter', mouseEnter) .on('mouseleave', mouseLeave); // create tooltip const tooltip = svg.append('g').attr('visibility', 'hidden'); const tooltipHeight = 25; const tooltipRect = tooltip .append('rect') .attr('fill', 'white') .attr('rx', 5) .attr('height', tooltipHeight); const tooltipText = tooltip .append('text') .attr('fill', 'black') .attr('font-family', 'Ariel, Helvetica, sans-serif') .attr('font-size', 10) .attr('dy', 2) .attr('dx', 2) .attr('dominant-baseline', 'hanging'); // handle hovering over a circle function mouseEnter(event, d) { // make the circle larger d3.select(this) .attr("r", d => r(d.overall) * 2) .attr("stroke", "black") .attr("opacity", 0.9); // update the text and get its width tooltipText.html(d.short_name); const labelWidth = tooltipText.node().getComputedTextLength(); // set the width of the tooltip's background rectangle // to match the width of the label tooltipRect.attr('width', labelWidth + 4); // move the tooltip and make it visible const xPos = x(d.age) + r(d.overall) * 3; const yPos = y(d.wage_eur) - tooltipHeight / 2; tooltip .attr('transform', `translate(${xPos},${yPos})`) .attr('visibility', 'visible'); } // handle leaving a circle function mouseLeave(event, d) { // reset its size d3.select(this) .attr("r", d => r(d.overall)) .attr("stroke", d => color(d.body_type)) .attr("opacity", 0.70); // make the tooltip invisible tooltip.attr('visibility', 'hidden'); } return svg.node(); }31:T45a,hover2 = { const svg = d3_5.select(vis); // used to test out interactivity in this cell const status = html`hover: none`; circles.on("mouseover.hover2", function(d) { let me = d3_5.select(this); let div = d3_5.select("body").append("div"); div.attr("id", "details"); div.attr("class", "tooltip"); let rows = div .append("table") .selectAll("tr") .data(Object.keys(d)) .enter() .append("tr"); rows.append("th").text(key => capitalize(key)); rows.append("td").text(key => d[key]); // show what we interacted with d3_5.select(status).text("hover: " + d.short_name); }); circles.on("mousemove.hover2", function(d) { let div = d3_5.select("div#details"); // get height of tooltip let bbox = div.node().getBoundingClientRect(); div.style("left", d3_5.event.clientX + "px"); div.style("top", d3_5.event.clientY - bbox.height + "px"); }); circles.on("mouseout.hover2", function(d) { d3_5.selectAll("div#details").remove(); d3_5.select(status).text("hover: none"); }); return status; }32:[{"id":"14a345c239a2b7b1e171d0819bdfb71d46de5710f8f6f0d7329a60070da71ec3668b6705dfceee2ed21a467afc6bccf223ecfb1c3f7a10399695452367d560b8","href":"https://static.observableusercontent.com/files/14a345c239a2b7b1e171d0819bdfb71d46de5710f8f6f0d7329a60070da71ec3668b6705dfceee2ed21a467afc6bccf223ecfb1c3f7a10399695452367d560b8","name":"players_20.csv","type":"text/csv","lastModified":1612207214250.81,"size":8945067},{"id":"d0a4d9a8c1050071555c12951614201205fcfb57b5be62b9821e29b60ea1de6d4ede3f9c260f5a78be8c93168c50166b124b3343c414b815cd023e938a92fc65","href":"https://static.observableusercontent.com/files/d0a4d9a8c1050071555c12951614201205fcfb57b5be62b9821e29b60ea1de6d4ede3f9c260f5a78be8c93168c50166b124b3343c414b815cd023e938a92fc65","name":"single_chart_methods.png","type":"image/png","lastModified":1612301771634.851,"size":131714}] 2d:{"title":"Single Chart Selection Methods in D3","cells":[{"id":524,"value":"md`# Single Chart Selection Methods in D3`","pinned":false,"hidden":false,"mode":"ojs"},{"id":513,"value":"methods = md`

\n\nAs presented in [Information Visualization: Advanced Techniques](https://www.coursera.org/learn/information-visualization-advanced-techniques) by [Enrico Bertini](http://enrico.bertini.io/).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":519,"value":"md`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"md`# Method: Selection`","pinned":false,"hidden":false,"mode":"ojs"},{"id":451,"value":"md`### Initial Chart with Legend and Browser Tooltip`","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"swatches({ color: color })","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"chart0 = {\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, width, height]);\n\n svg.append(\"g\").call(xAxis);\n svg.append(\"g\").call(yAxis);\n svg.append(\"g\").call(legendBodyType);\n\n const players = svg\n .append(\"g\")\n .selectAll(\"circle\")\n .data(sample_data)\n .join(\"circle\")\n .attr(\"cx\", d => x(d.age)) // + Math.random() * 20)\n .attr(\"cy\", d => y(d.wage_eur))\n .attr(\"r\", d => r(d.overall))\n .attr(\"stroke\", d => color(d.body_type))\n .attr(\"fill\", d => color(d.body_type))\n .attr(\"opacity\", 0.75);\n\n players.append(\"title\").text(browserTooltip);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":91,"value":"browserTooltip = d => `Name: ${d.short_name}\nNation: ${d.nationality}\nClub: ${d.club}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"md`## 1. Select (Hover) ${html`→`} Highlight`","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"chart1 = {\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, width, height]);\n\n svg.append(\"g\").call(xAxis);\n svg.append(\"g\").call(yAxis);\n svg.append(\"g\").call(legendBodyType);\n\n const players = svg\n .append(\"g\")\n .selectAll(\"circle\")\n .data(sample_data)\n .join(\"circle\")\n .attr(\"cx\", d => x(d.age)) // + Math.random() * 20)\n .attr(\"cy\", d => y(d.wage_eur))\n .attr(\"r\", d => r(d.overall))\n .attr(\"stroke\", d => color(d.body_type))\n .attr(\"fill\", d => color(d.body_type))\n .attr(\"opacity\", 0.70)\n .on('mouseenter', mouseEnter)\n .on('mouseleave', mouseLeave);\n\n function mouseEnter(event, d) {\n d3.select(this)\n .attr('r', d => r(d.overall) * 2)\n .attr(\"stroke\", \"black\");\n }\n\n function mouseLeave(event, d) {\n d3.select(this)\n .attr('r', d => r(d.overall))\n .attr(\"stroke\", d => color(d.body_type));\n }\n\n players.append(\"title\").text(browserTooltip);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":132,"value":"md`## 2. Select (Click^2) ${html`→`} Highlight/Unhighlight`","pinned":false,"hidden":false,"mode":"ojs"},{"id":130,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":17,"value":"md`## 3. Select (Hover) ${html`→`} Display More Info (Option 1)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":178,"value":"chart3 = {\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, width, height]);\n\n svg.append(\"g\").call(xAxis);\n svg.append(\"g\").call(yAxis);\n svg.append(\"g\").call(legendBodyType);\n\n const tooltip = new Tooltip();\n\n const players = svg\n .append(\"g\")\n .selectAll(\"circle\")\n .data(sample_data)\n .join(\"circle\")\n .attr(\"cx\", d => x(d.age)) // + Math.random() * 20)\n .attr(\"cy\", d => y(d.wage_eur))\n .attr(\"r\", d => r(d.overall))\n .attr(\"stroke\", d => color(d.body_type))\n .attr(\"fill\", d => color(d.body_type))\n .attr(\"opacity\", 0.70);\n\n svg\n .append(\"g\")\n .attr(\"fill\", \"none\")\n .attr(\"pointer-events\", \"all\")\n .selectAll(\"rect\")\n .data(sample_data)\n .join(\"rect\")\n .attr(\"x\", d => x(d.age))\n .attr(\"y\", d => y(d.wage_eur))\n .attr(\"height\", \"8px\")\n .attr(\"width\", \"8px\")\n .on(\"mouseover\", (event, d) => tooltip.show(d))\n .on(\"mouseout\", () => tooltip.hide());\n\n svg.append(() => tooltip.node);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":226,"value":"class Tooltip {\n constructor() {\n this._age = svg``;\n this._wage_eur = svg``;\n this._name = svg``;\n this._club = svg``;\n this.node = svg`\n \n ${this._name}\n ${this._club}\n`;\n }\n show(d) {\n this.node.removeAttribute(\"display\");\n this.node.setAttribute(\n \"transform\",\n `translate(${x(d.age)},${y(d.wage_eur)})`\n );\n this._name.textContent = d.short_name;\n this._club.textContent = d.club;\n }\n hide() {\n this.node.setAttribute(\"display\", \"none\");\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":463,"value":"md`## 4. Select (Hover) ${html`→`} Display More Info (Option 2)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":259,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":466,"value":"md`## 5. Select (Hover) ${html`→`} Display More Info (Option 3)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":387,"value":"fewer_columns = sample_data.map(obj => {\n let tmpObj = {};\n selectColsByName(tmpObj, obj, [\n 'short_name',\n 'nationality',\n 'club',\n 'age',\n 'wage_eur',\n 'overall',\n 'body_type'\n ]);\n return tmpObj;\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":297,"value":"// SOURCE: https://observablehq.com/@sjengle/interactivity?collection=@sjengle/interactive-scatterplot\nvis = {\n // wait until this cell is visible\n await visibility();\n\n const svg = d3_5.select(DOM.svg(width, height));\n //svg.style(\"border\", \"1px solid #bbbbbb\");\n\n svg.append(\"g\").call(xAxis);\n svg.append(\"g\").call(yAxis);\n svg.append(\"g\").call(legendBodyType);\n\n // data layer to keep circles\n const g = svg.append(\"g\").attr(\"id\", \"circles\");\n\n g.selectAll(\"circle\")\n .data(fewer_columns) // sample_data\n .enter()\n .append(\"circle\")\n .attr(\"cx\", d => x(d.age)) // + Math.random() * 20)\n .attr(\"cy\", d => y(d.wage_eur))\n .attr(\"r\", d => r(d.overall))\n .attr(\"fill\", d => color(d.body_type))\n .attr(\"opacity\", 0.70);\n\n // annotation layer to keep labels on top of data\n svg.append(\"g\").attr(\"id\", \"annotation\");\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":319,"value":"circles = d3_5\n .select(vis)\n .select(\"g#circles\")\n .selectAll(\"circle\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":322,"value":"annotations = d3_5.select(vis).select(\"g#annotation\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":325,"value":"highlight = {\n const svg = d3_5.select(vis);\n\n // used to test out interactivity in this cell\n const status = html`highlight: none`;\n\n // event.namespace allows us to add multiple functions for one event\n // only needed in examples like this where some events trigger multiple functions\n circles.on(\"mouseover.highlight\", function(event, d) {\n d3_5\n .select(this)\n .raise() // bring to front\n .attr(\"r\", d => r(d.overall) * 2)\n .style(\"stroke\", \"black\")\n .style(\"stroke-width\", 2);\n\n // show what we interacted with\n d3_5.select(status).text(\"highlight: \" + d.short_name);\n });\n\n circles.on(\"mouseout.highlight\", function(event, d) {\n d3_5\n .select(this)\n .attr(\"r\", d => r(d.overall))\n .style(\"stroke\", null);\n d3_5.select(status).text(\"highlight: none\");\n });\n\n return status;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":350,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":313,"value":"html`\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"md`## 6. Select (Click) ${html`→`} Perform Action (Hide Dot)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":490,"value":"chart6 = {\n const svg = d3.create(\"svg\").attr(\"viewBox\", [0, 0, width, height]);\n\n svg.append(\"g\").call(xAxis);\n svg.append(\"g\").call(yAxis);\n svg.append(\"g\").call(legendBodyType);\n\n const players = svg\n .append(\"g\")\n .selectAll(\"circle\")\n .data(sample_data)\n .join(\"circle\")\n .attr(\"cx\", (d) => x(d.age)) // + Math.random() * 20)\n .attr(\"cy\", (d) => y(d.wage_eur))\n .attr(\"r\", (d) => r(d.overall))\n .attr(\"stroke\", (d) => color(d.body_type))\n .attr(\"fill\", (d) => color(d.body_type))\n .attr(\"opacity\", 0.7)\n .on(\"click\", hidePlayer);\n\n function hidePlayer(event, d) {\n d3.select(this).transition().duration(1500).attr(\"opacity\", 0.0);\n }\n\n players.append(\"title\").text(browserTooltip);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":47,"value":"md`## Chart Settings`","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"x = d3\n .scaleLinear()\n .domain(d3.extent(sample_data, d => d.age))\n .range([margin.left, width - margin.right])\n .nice()","pinned":true,"hidden":false,"mode":"ojs"},{"id":57,"value":"y = d3\n .scaleLinear()\n .domain(d3.extent(sample_data, d => d.wage_eur))\n .range([height - margin.bottom, margin.top])\n .nice()","pinned":true,"hidden":false,"mode":"ojs"},{"id":59,"value":"r = d3\n .scaleSqrt()\n .domain(d3.extent(sample_data, d => d.overall))\n .range([1, 8])","pinned":true,"hidden":false,"mode":"ojs"},{"id":69,"value":"// d3.rollup(sample_data, v => v.length, d => d.body_type)","pinned":true,"hidden":false,"mode":"ojs"},{"id":73,"value":"color = d3.scaleOrdinal(\n [\"Lean\", \"Normal\", \"Stocky\"], // [...new Set(sample_data.map(d => d.body_type))],\n d3.schemeCategory10\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":78,"value":"color.domain()","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"color.range()","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"xAxis = g =>\n g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).ticks(width / 80))\n .call(g => g.select(\".domain\").remove())","pinned":true,"hidden":false,"mode":"ojs"},{"id":63,"value":"yAxis = g =>\n g\n .attr(\"transform\", `translate(${margin.left}, 0)`)\n .call(d3.axisLeft(y))\n .call(g => g.select(\".domain\").remove())","pinned":true,"hidden":false,"mode":"ojs"},{"id":95,"value":"legendBodyType = g =>\n g\n .attr(\n \"transform\",\n `translate(${((width - margin.left - margin.right) / 4) * 3.5},60)`\n )\n .call(g =>\n g.append(() =>\n legend({\n color: color,\n height: 50,\n width: 150,\n title: \"Player's Body Type\",\n tickSize: 0\n })\n )\n )","pinned":true,"hidden":false,"mode":"ojs"},{"id":48,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"margin = ({ left: 100, top: 30, right: 10, bottom: 45 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"printTable(sample_data.slice(0, 10))","pinned":true,"hidden":false,"mode":"ojs"},{"id":31,"value":"sample_data = sample(data).filter(\n d => [\"Normal\", \"Lean\", \"Stocky\"].indexOf(d.body_type) !== -1\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"data = d3\n .csvParse(await FileAttachment(\"players_20.csv\").text(), d3.autoType)\n .filter(d => d.wage_eur > 0)","pinned":false,"hidden":false,"mode":"ojs"},{"id":445,"value":"md`## Helper Functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"sample = (aArray, n = 2000) => d3.shuffle([...aArray]).slice(0, n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":402,"value":"capitalize = str =>\n str.replace(\n /\\w\\S*/g,\n txt => txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase()\n )","pinned":true,"hidden":false,"mode":"ojs"},{"id":383,"value":"selectColsByName = (receiverObj, supplierObj, colsToKeep) => {\n if (Array.isArray(colsToKeep)) {\n Object.keys(supplierObj).forEach(key => {\n if (colsToKeep.includes(key)) receiverObj[key] = supplierObj[key];\n });\n return receiverObj;\n } else {\n console.log(`${colsToKeep} is not an array.`);\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":442,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"import {printTable} from \"@uwdata/data-utilities\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"import { legend, swatches } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":473,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":21,"value":"d3_5 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}