2f:T1449,gapminderChart = { // Build chart const svg = d3.create("svg") .attr("width", width) .attr("height", height + miniHeight) .attr("viewBox", [0, 0, width, height + miniHeight]) // Clipping svg.append("defs") .append("clipPath") .attr("id", "clip") .append("rect") .attr("x", margin.left) .attr("y", margin.top) .attr("width", width) .attr("height", height) const main = svg.append("g") .attr("class", "main") .attr("clip-path", "url(#clip)") const tooltip = d3.select("body") .append("div") .attr("id", "tooltip") const tooltipWidth = tooltip.node().offsetWidth; const tooltipHeight = tooltip.node().offsetHeight; const mainCirclesGroup = main.append("g") .attr("class", "main-circles-group") const miniGroup = svg.append("g") .attr("class", "mini-group") .attr("transform", `translate(0, ${height})`) mainCirclesGroup.selectAll("circle") .data(arr) .join("circle") .attr("class", "circle") .attr("cx", d => xScaleBrush(d.gdpPerCap)) .attr("cy", d => yScale(d.lifeExp)) .attr("r", d => rScale(d.pop)) .attr("fill", d => continentScale(d.continent)) .attr("opacity", 0.7) .on("mouseover", function(e, d) { // Add stroke to circles d3.select(this) .attr("stroke", "#333333") .attr("stroke-width", "3px") // Show tooltip tooltip .style("left", e.pageX - tooltipWidth / 2 + "px") .style("top", e.pageY - tooltipHeight - 10 + "px") .style("visibility", "visible") .html(`Country: ${d.country}
GDP per capita: ${formatNum(d.gdpPerCap)}
Life expectancy: ${formatNum(d.lifeExp)}`) // Transition circle to bigger size d3.select(this) .transition() .duration(200) .attr("r", d => rScale(d.pop) * 2) }) .on("mouseout", function(e, d) { d3.select(this) .attr("stroke", "none") tooltip .style("visibility", "hidden") d3.select(this) .transition() .duration(200) .attr("r", d => rScale(d.pop)) }) .transition() // Country labels mainCirclesGroup.append("g") .selectAll("text") .data(arrLabels) .join("text") .text(d => d.country) .attr("class", "country-label") .attr("x", d => xScaleBrush(d.gdpPerCap)) .attr("y", d => yScale(d.lifeExp)) // Axis labels mainCirclesGroup.append("g") .attr("class", "x-label") .append("text") .text("GDP per capita") .attr("x", width / 2) .attr("y", height - margin.bottom/4) svg.append("g") .attr("class", "y-label") .attr("transform", `rotate(90 ${margin.left/4} ${height/2})`) .append("text") .text("Life Expectancy") .attr("class", "lifeexp-label") .attr("x", margin.left/4) .attr("y", height/2) // // Zoom section // const zoomExtent = [[margin.left, margin.top], [width - margin.right, height - margin.bottom]] // function zoomed(event) { // xScaleBrush.range([ // event.transform.applyX(margin.left), // event.transform.applyX(width - margin.right) // ]); // mainCirclesGroup.selectAll("circle") // .attr("cx", d => xScaleBrush(d.gdpPerCap)) // mainCirclesGroup.selectAll(".country-label") // .attr("x", d => xScaleBrush(d.gdpPerCap)) // gx.call(mainXAxis) // } // svg.call(d3.zoom() // .scaleExtent([1, 8]) // .translateExtent(zoomExtent) // .extent(zoomExtent) // .on("zoom", zoomed)) const gx = mainCirclesGroup.append("g") .attr("class", "x-axis") .call(mainXAxis) const gy = svg.append("g") .attr("class", "y-axis") .attr("transform", `translate(${margin.left}, 0)`) .attr("fill", "white") .call(yAxis) // Brushed section miniGroup.selectAll("circle") .data(arr) .join("circle") .attr("cx", d => miniX(d.gdpPerCap)) .attr("cy", d => miniY(d.lifeExp)) .attr("r", d => rScale(d.pop)) .attr("opacity", 0.25) const miniExtent = [[miniMargin.left, height + miniMargin.top], [width - miniMargin.right, height + miniHeight - miniMargin.bottom]] const brush = d3.brushX() .extent(miniExtent) .on("start brush end", brushed); svg.append("g") .call(brush) .call(brush.move, [arr[0].gdpPerCap, arr[15].gdpPerCap].map(miniX)) // Initial 15 countries function brushed({selection}) { if(selection === null) { miniGroup.attr("stroke", null); } else { mainXZoom.domain(selection); xScaleBrush.range([mainXZoom(brushRange[0]), mainXZoom(brushRange[1])]); mainCirclesGroup.selectAll("circle") .data(arr) .join("circle") .attr("cx", d => xScaleBrush(d.gdpPerCap)) .attr("cy", d => yScale(d.lifeExp)) .attr("r", d => rScale(d.pop)) mainCirclesGroup.selectAll(".country-label") .data(arrLabels) .join("text") .text(d => d.country) .attr("x", d => xScaleBrush(d.gdpPerCap)) .attr("y", d => yScale(d.lifeExp)) gx.call(mainXAxis) } } return svg.node() }30:[{"id":"51baa326746406f51037e4b34ff62f59029d77e23e838350837e2e2f1c4c63fc5dc08d4db759977f60d4c73f086c2a29a1456cce8d6b44e284717295751ba762","href":"https://static.observableusercontent.com/files/51baa326746406f51037e4b34ff62f59029d77e23e838350837e2e2f1c4c63fc5dc08d4db759977f60d4c73f086c2a29a1456cce8d6b44e284717295751ba762","name":"gapminder.csv","type":"text/csv","lastModified":1667497491928.621,"size":90868}] 2d:{"title":"Task of week 5 (3rd-9th November)","cells":[{"id":0,"value":"# Task of week 5 (3rd-9th November)","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"This week, we have show how to introduce interactive elements such as hover effects, tooltips, zoom, and brush, to enhance the interactivity of our plots. Please, take your time on reading again the notebook presented in this session in case any part wasn't clear at all.","pinned":false,"hidden":false,"mode":"md"},{"id":115,"value":"Here, you have links to notebooks that introduce similar concepts than the ones presented this week:\n\n- [Line chart with tooltip](https://observablehq.com/@d3/line-chart-with-tooltip)\n- [Accessible histogram with tooltip](https://observablehq.com/@fnick851/accessible-humidity-distribution-histogram-with-tooltip)\n- [Zoomable scatterplot](https://observablehq.com/@d3/zoomable-scatterplot)\n- [Exploration of zoom parameters](https://observablehq.com/@stwind/d3-zoom-parameters)\n- [Zoom candlesticks](https://observablehq.com/@wsygzn/zoom-candlesticks)\n- [Bar chart brush](https://observablehq.com/@didoesdigital/21-june-2020-brushing-to-filter-and-zoom-using-d3-brush)\n- [Brush handles](https://observablehq.com/@d3/brush-handles)\n- [Brushable scatterplot](https://observablehq.com/@d3/brushable-scatterplot)\n- [Bar chart race](https://observablehq.com/@d3/bar-chart-race-explained)","pinned":false,"hidden":false,"mode":"md"},{"id":25,"value":"The task of this week will consist of the introduction to interactive elements on the scatterplot that we created two weeks ago to show the life expectancy and the fertility rate among countries in a given year. Therefore, this week you won't have to handle with data preparation issues, and just focus on the implementation itself. Good look and enjoy it!","pinned":false,"hidden":false,"mode":"md"},{"id":64,"value":"gapminder = FileAttachment(\"gapminder.csv\").csv()\n .then(arr => arr.map(d => ({...d,\n year: +d.year,\n gdpPerCap: +d.gdpPerCap,\n lifeExp: +d.lifeExp,\n pop: +d.pop\n })));","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"value":"arr = gapminder.filter(d => d.year === selectedYear);","pinned":true,"hidden":false,"mode":"ojs"},{"id":461,"value":"mutable brushRange = mainXZoom.range()","pinned":false,"hidden":false,"mode":"ojs"},{"id":129,"value":"## Answer to task starts here","pinned":false,"hidden":false,"mode":"md"},{"id":133,"value":"I copied the code from [week 3](https://observablehq.com/d/6398f944ce0078da) activity and will apply the mentioned interactions.","pinned":false,"hidden":false,"mode":"md"},{"id":99,"value":"viewof selectedYear = Inputs.range([2009, 2017], {label: \"Year\", step: 1})","pinned":false,"hidden":false,"mode":"ojs"},{"id":140,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":168,"value":"html`\n \n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":28,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"d3 = require(\"d3@7\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"height = 400\n\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":146,"value":"width = 900","pinned":false,"hidden":false,"mode":"ojs"},{"id":156,"value":"margin = ({\n top: 20,\n right: 20,\n bottom: 50,\n left: 50\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"value":"xScale = d3.scaleLog()\n .domain(d3.extent(gapminder.map(d => d.gdpPerCap)))\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":180,"value":"yScale = d3.scaleLinear()\n .domain(d3.extent(gapminder.map(d => d.lifeExp)))\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":183,"value":"rScale = d3.scaleSqrt()\n .domain(d3.extent(arr.map(d => d.pop)))\n .range([0, 25])","pinned":false,"hidden":false,"mode":"ojs"},{"id":186,"value":"continents = [...new Set(arr.map(d => d.continent))]","pinned":false,"hidden":false,"mode":"ojs"},{"id":189,"value":"continentScale = d3.scaleOrdinal()\n .domain(continents)\n .range(d3.schemeSet2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":192,"value":"years = [...new Set(arr.map(d => d.year))]","pinned":false,"hidden":false,"mode":"ojs"},{"id":195,"value":"countries = [...new Set(arr.map(d => d.country))]","pinned":false,"hidden":false,"mode":"ojs"},{"id":200,"value":"yAxis = d3.axisLeft(yScale)\n .ticks()","pinned":false,"hidden":false,"mode":"ojs"},{"id":295,"value":"mainXAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(xScaleBrush).tickSizeOuter(0))","pinned":false,"hidden":false,"mode":"ojs"},{"id":315,"value":"formatNum = function(number){\n return number.toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2});\n }","pinned":false,"hidden":false,"mode":"ojs"},{"id":389,"value":"arrLabels = arr.filter((d, i, array) => d.pop > 100000000 || d3.max(array.map(e => e.gdpPerCap)) <= d.gdpPerCap )","pinned":false,"hidden":false,"mode":"ojs"},{"id":259,"value":"miniHeight = 150","pinned":false,"hidden":false,"mode":"ojs"},{"id":256,"value":"miniMargin = ({top: 20, right: margin.right, bottom: 20, left: margin.left});","pinned":false,"hidden":false,"mode":"ojs"},{"id":267,"value":"miniX = d3.scaleLog()\n .domain(d3.extent(gapminder.map(d => d.gdpPerCap)))\n .range([miniMargin.left, width - miniMargin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":254,"value":"miniY = d3.scaleLinear()\n .domain([0, d3.max(gapminder, d => d.lifeExp)]).nice()\n .range([miniHeight - miniMargin.bottom, miniMargin.top]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":289,"value":"xScaleBrush = d3.scaleLog()\n .domain(d3.extent(gapminder.map(d => d.gdpPerCap)))\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":292,"value":"mainXZoom = d3.scaleLinear()\n .range([margin.left, width - miniMargin.right])\n .domain([margin.left, width - miniMargin.right]);","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}