28:null 29:["$","title",null,{"children":"Task of week 5 (3rd-9th November) | Stephanie Adeline | Observable"}] 2e:Tdf6,scatterPlot = { const extent = [[margin.left, margin.top], [width - margin.right, height - margin.bottom - margin.top]]; const zoom = d3.zoom() .scaleExtent([1, 3]) .translateExtent(extent) .extent(extent) .on("zoom", zoomed); const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox",[0, 0, width, height]); svg.append('defs') .append('clipPath') .attr('id', 'clip') .append('rect') .attr('x', margin.left) .attr('y', margin.top) .attr('width', width) .attr('height', height - margin.bottom - margin.top); const main = svg.append('g') .attr('class', 'main') .attr('clip-path', 'url(#clip)'); const tooltip = d3.select('body') .append('div') .attr('id', 'chart-tooltip') .style('position', 'absolute') .style('z-index', '1') .style('visibility', 'hidden') .style('padding', '10px') .style('background', '#ececec') .style('border-radius', '4px') .style('color', '#333'); const circles = main.selectAll('circle') .data(data) .join('circle') .attr('cx', d => xScale(d.gdpPerCap)) .attr('cy', d => yScale(d.lifeExp)) .attr('r', d => rScale(d.pop)) .attr('opacity', 0.4) .style('fill', d => colorScale(d.continent)) .on("mouseover", function(e,d) { const tooltipWidth = tooltip.node().offsetWidth; const tooltipHeight = tooltip.node().offsetHeight; 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: US$${d.gdpPerCap.toLocaleString('en-US', {maximumFractionDigits: 2})}
Life expectancy: ${d.lifeExp.toLocaleString('en-US', {maximumFractionDigits: 2})} years
Population: ${d.pop.toLocaleString('en-US', {maximumFractionDigits: 0})} people`); d3.select(this).attr("stroke", "black").attr("stroke-width", 1);}) .on('mousemove', function(e) { const tooltipWidth = tooltip.node().offsetWidth; const tooltipHeight = tooltip.node().offsetHeight; tooltip .style("left", e.pageX - tooltipWidth/2 +'px') .style("top", e.pageY-tooltipHeight - 10+'px') }) .on("mouseout", function(e,d) { tooltip .style('visibility', 'hidden') d3.select(this).attr("stroke", "none");}); const gx = svg.append("g"); const gy = svg.append("g"); svg.call(zoom).call(zoom.transform, d3.zoomIdentity); function zoomed({transform}) { const zx = transform.rescaleX(xScale).interpolate(d3.interpolateRound); const zy = transform.rescaleY(yScale).interpolate(d3.interpolateRound); circles.attr("transform", transform) .attr("r", d => rScale(d.pop / (transform.k * transform.k))) gx.call(xAxis, zx); gy.call(yAxis, zy); } return Object.assign(svg.node(), { reset() { svg.transition() .duration(750) .call(zoom.transform, d3.zoomIdentity); } }); return svg.node(); }2f:T10c9,scatterPlotWithTooltip = function(dataset, cx, cy, r, color, name) { const width = 600 const height = 500 const margin = ({top: 30, right: 10, bottom: 40, left: 50}); const extent = [[margin.left, margin.top], [width - margin.right, height - margin.bottom - margin.top]]; const xScale = d3.scaleLog() .domain(d3.extent(dataset, d => d[cx])) .range([margin.left, width - margin.right]) const yScale = d3.scaleLinear() .domain([d3.min(dataset, d => d[cy]), d3.max(dataset, d => d[cy])]) .range([height - margin.bottom, margin.top]); const xAxis = g => g .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(xScale) .ticks(5, d3.format(",d")) .tickSizeOuter(0) ) const colorScale = d3.scaleOrdinal(d3.schemeCategory10) // const zoom = d3.zoom() // .scaleExtent([1, 3]) // .translateExtent(extent) // .extent(extent) // .on("zoom", zoomed); const yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(yScale)) const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox",[0, 0, width, height]); svg.append('defs') .append('clipPath') .attr('id', 'clip') .append('rect') .attr('x', margin.left) .attr('y', margin.top) .attr('width', width) .attr('height', height - margin.bottom - margin.top); const main = svg.append('g') .attr('class', 'main') .attr('clip-path', 'url(#clip)'); const tooltip = d3.select('body') .append('div') .attr('id', 'chart-tooltip') .style('position', 'absolute') .style('z-index', '1') .style('visibility', 'hidden') .style('padding', '10px') .style('background', '#ececec') .style('border-radius', '4px') .style('color', '#333'); const circles = main.selectAll('circle') .data(dataset) .join('circle') .attr('cx', d => xScale(d[cx])) .attr('cy', d => yScale(d[cy])) .attr('r', 10) .attr('opacity', 0.4) .style('fill', d => colorScale(d[color])) .on("mouseover", function(e,d) { const tooltipWidth = tooltip.node().offsetWidth; const tooltipHeight = tooltip.node().offsetHeight; tooltip .style("left", e.pageX - tooltipWidth/2 +'px') .style("top", e.pageY-tooltipHeight - 10+'px') .style('visibility', 'visible') .html(`Country: ${d[name]}
${cx}: ${d[cx]}
${cy}: ${d[cy]}
${color}: ${d[color]}`) d3.select(this).attr("stroke", "black").attr("stroke-width", 1);}) .on('mousemove', function(e) { const tooltipWidth = tooltip.node().offsetWidth; const tooltipHeight = tooltip.node().offsetHeight; tooltip .style("left", e.pageX - tooltipWidth/2 +'px') .style("top", e.pageY-tooltipHeight - 10+'px') }) .on("mouseout", function(e,d) { tooltip .style('visibility', 'hidden') d3.select(this).attr("stroke", "none")}); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); // const gx = svg.append("g"); // const gy = svg.append("g"); // svg.call(zoom).call(zoom.transform, d3.zoomIdentity); // function zoomed({transform}) { // const zx = transform.rescaleX(xScale).interpolate(d3.interpolateRound); // const zy = transform.rescaleY(yScale).interpolate(d3.interpolateRound); // circles.attr("transform", transform) // // .attr("r", d => rScale(d.pop / (transform.k * transform.k))) // gx.call(xAxis, zx); // gy.call(yAxis, zy); // } // return Object.assign(svg.node(), { // reset() { // svg.transition() // .duration(750) // .call(zoom.transform, d3.zoomIdentity); // } // }); return svg.node(); }30:[{"id":"51baa326746406f51037e4b34ff62f59029d77e23e838350837e2e2f1c4c63fc5dc08d4db759977f60d4c73f086c2a29a1456cce8d6b44e284717295751ba762","href":"https://static.observableusercontent.com/files/51baa326746406f51037e4b34ff62f59029d77e23e838350837e2e2f1c4c63fc5dc08d4db759977f60d4c73f086c2a29a1456cce8d6b44e284717295751ba762","name":"gapminder.csv","type":"text/csv","lastModified":1668080364059.992,"size":90868}] 2c:{"id":"3143f89a6c1762fd","slug":null,"title":"Task of week 5 (3rd-9th November)","thumbnail":"10aec5a7ad3b70cd616fdf742584d795d852f2ab8d2f8726a2b83f984c078345","access_level":"public","create_time":"$D2022-11-10T11:39:24.059Z","update_time":"$D2022-12-28T06:39:08.858Z","view_time":null,"first_public_time":"$D2022-11-10T12:35:05.297Z","has_unpublished_edits":null,"fork":{"id":"83d9ac87400900d9","slug":null,"title":"Task of week 5 (3rd-9th November)","owner":{"id":"dc63de81f2766bde","login":"antonbardera","name":""}},"stars":0,"starred":false,"owner":{"type":"team","id":"15a59822afb543e3","login":"stephadeline","name":"Stephanie Adeline","avatar_url":"https://avatars-next.observableusercontent.com/2db225f104edbb9e1912a1455cb4d8f13b7a0b656c8cc9003f89ee4fe95d52b4","tier":"starter_2024"},"version":272,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"06571e2fdc13d6c9","login":"stephadeline","name":"Stephanie Adeline","avatar_url":"https://avatars-next.observableusercontent.com/2db225f104edbb9e1912a1455cb4d8f13b7a0b656c8cc9003f89ee4fe95d52b4","tier":null}],"members":[{"type":"individual","id":"06571e2fdc13d6c9","login":"stephadeline","name":"Stephanie Adeline","avatar_url":"https://avatars-next.observableusercontent.com/2db225f104edbb9e1912a1455cb4d8f13b7a0b656c8cc9003f89ee4fe95d52b4","tier":null,"role":"editor"}],"comments":[{"id":"3c77efa596b78527","reply_to_id":null,"content":"Excellent job! Very good implementation and a very good design (I like more your tooltip than mine!)","create_time":"$D2022-11-11T14:56:06.046Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"09c368f2d90e0876","login":"antonbardera","name":"","avatar_url":"https://avatars-next.observableusercontent.com/18926463f8a740226a5a8e5d13b4d3007c5ae5f242983e5a037e0a21b69dcaf7","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"data = gapminder.filter(d => d.year === yearInput).sort((a,b)=> b.pop - a.pop);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"I'm adding tooltips and zoom to this scatterplot ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":99,"value":"viewof yearInput = Inputs.range([2009, 2017], {label: \"Year\", step: 1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"viewof reset = html`