2b:null 2c:["$","title",null,{"children":"Daily task of week 4 | Xavier B. | Observable"}] 31:Ta14,scatterplot = { const svg = d3.select(DOM.svg(width, height)); const main = svg.append('g') .attr('class', 'main') .attr('clip-path', 'url(#clip)'); const tooltip = d3.select('body') .append('div') .attr('id', 'barchart-tooltip') .style("font-family", "'Work Sans', sans-serif") .style('position', 'absolute') .style('z-index', '1') .style('visibility', 'hidden') .style('padding', '10px') .style('background', 'rgba(0,0,0,0.6)') .style('border-radius', '4px') .style('color', '#fff'); svg.selectAll('circle') .data(desiredData) .join('circle') .attr('cx', d => fertilityScale(d.fertility)) .attr('cy', d => lifeExpectScale(d.life_expect)) .attr('r', d => populationScale(d.pop)) .attr('fill', d => d3.schemeCategory10[d.cluster]) .attr('fill-opacity', 0.4) .attr('stroke', d => d3.schemeCategory10[d.cluster]) .on("mouseover", function(e,d,i) { let tooltipWidth = tooltip.node().offsetWidth; let 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}
👯‍♂️Population: ${d.pop}
👴🏻 Life Expectancy: ${d.life_expect}
👶🏻 Fertility: ${d.fertility}`) d3.select(this).attr("fill", "steelblue");}) .on('mousemove', function (e) { let tooltipWidth = tooltip.node().offsetWidth; let 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("fill", "purple");}); function zoomed(event) { fertilityScale.range([event.transform.applyX(margin.left), event.transform.applyX(width - margin.right)]); main.selectAll('rect').attr("x", (d, i) => fertilityScale(i)).attr("width", fertilityScale.bandwidth()); xAxis.call(xAxis); } svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); // Specific to Observable return svg.node(); }32:[] 2f:{"id":"26d619062d13b739","slug":"daily-task-of-week-4","title":"Daily task of week 4","thumbnail":"e68f2622375504d7ef9939fe1b94dbfb21e90df3114c96b35408d357c175b94a","access_level":"public","create_time":"$D2020-11-05T18:15:48.724Z","update_time":"$D2020-12-28T21:50:17.547Z","view_time":null,"first_public_time":"$D2020-11-05T18:27:10.510Z","fork":{"id":"4c10073a88f36ab6","slug":"daily-task-of-week-4","title":"Daily task of week 4","owner":{"id":"dc63de81f2766bde","login":"antonbardera","name":""}},"stars":0,"starred":false,"owner":{"type":"team","id":"0df0381955bf1da9","login":"x80110","name":"Xavier B.","avatar_url":"https://avatars-next.observableusercontent.com/9c83aa3d8871a7ab7c57218156f38383132193db6157266d478cff07f8af8a0e","tier":"starter_2024"},"version":104,"publish_version":104,"role":null,"authored":false,"authors":[{"type":"individual","id":"90f34519f98866f3","login":"x80110","name":"Xavier B.","avatar_url":"https://avatars-next.observableusercontent.com/9c83aa3d8871a7ab7c57218156f38383132193db6157266d478cff07f8af8a0e","tier":null}],"members":[{"type":"individual","id":"90f34519f98866f3","login":"x80110","name":"Xavier B.","avatar_url":"https://avatars-next.observableusercontent.com/9c83aa3d8871a7ab7c57218156f38383132193db6157266d478cff07f8af8a0e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Daily task of week 4","cells":[{"id":0,"value":"md`# Daily task of week 4`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"md`In this notebook, you will be able to work on adding new interaction techniques on a scatterplot.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"md`## Preliminary definitions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":15,"value":"d3 = require(\"d3@6\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":37,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13,"value":"gapminder = d3.json(\"https://vega.github.io/vega-datasets/data/gapminder.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":30,"value":"desiredData = gapminder.filter(d => d.year === parameters.year)\n .sort((a,b) => b.pop - a.pop);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":23,"value":"height = 700;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":27,"value":"width = 700;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":43,"value":"margin = 70;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":20,"value":"fertilityScale = d3.scaleLinear()\n .domain([0,d3.max(gapminder, d => d.fertility)]).nice()\n .range([margin, width - margin]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":22,"value":"lifeExpectScale = d3.scaleLinear()\n .domain([0,d3.max(gapminder, d => d.life_expect)]).nice()\n .range([height - margin, margin]); ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":50,"value":"populationScale = d3.scaleSqrt()\n .domain([0,d3.max(desiredData, d => d.pop)])\n .range([0, 40]); ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":58,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin})`)\n .call(d3.axisBottom(fertilityScale)\n .ticks(width / 80)\n .tickSizeOuter(0))\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", '1.5em')\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(\"Fertility\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":61,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin},0)`)\n .call(d3.axisLeft(lifeExpectScale))\n .call(g => g.select(\".domain\"))\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", 3)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(\"Life expectancy\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":32,"value":"md`## Basic chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":35,"value":"viewof parameters = form(html``)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":48,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"