2c:null 2d:["$","title",null,{"children":"04b. Daily task of week 4 | lamonre | Observable"}] 32:T999,scatterplot = { const svg = d3.select(DOM.svg(width, height)); const tooltip = d3.select('body') .append('div') .attr('id', 'scatterplot-tooltip') .style('position', 'absolute') .style('z-index', '1') // z-index: q tooltip aparegui x sobre del ratolí .style('visibility', 'hidden') .style('padding', '10px') .style('background', 'rgba(255,255,255,0.7)') .style('border-radius', '4px') .style('color', '#343a40') .style('font-family', 'roboto'); 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; // x tenir amplada tooltip let tooltipHeight = tooltip.node().offsetHeight; // x tenir altura tooltip tooltip .style("left", e.pageX - tooltipWidth/2 +'px') .style("top", e.pageY-tooltipHeight - 10+'px') .style('visibility', 'visible') .html(`Country: ${d.country}
Fertility: ${d.fertility}
Life expectancy: ${d.life_expect}`); // text q s'afegeix a tooltip (q s'associa a dades) d3.select(this).attr("fill", "white");}) // efecte hover .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') // - 10+'px': distància, en px, entre ratolí i tooltip }) .on("mouseout", function(e,d) { tooltip .style('visibility', 'hidden') d3.select(this).attr("fill", d => d3.schemeCategory10[d.cluster]);}); // ojo!! s'ha de dir q dps de hover cercles tornin a color original, q és en funció de les dades svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); // Specific to Observable return svg.node(); }33:[] 30:{"id":"acca06d04d929a62","slug":"daily-task-of-week-4","title":"04b. Daily task of week 4","thumbnail":"a5caa2b1d75e3bc7eb0da08fa7638c25addbd3c0cdc544972e8be75ee9223362","access_level":"public","create_time":"$D2020-11-05T17:51:35.998Z","update_time":"$D2020-12-03T09:38:23.266Z","view_time":null,"first_public_time":"$D2020-11-05T18:13:27.707Z","has_unpublished_edits":null,"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":"3a530b25547accb2","login":"lamonre","name":"","avatar_url":"https://avatars-next.observableusercontent.com/31a52d7813ecf302a3bd6a481674e7476e9b143abcc43dfcb6e1cc51ec63d80c","tier":"starter_2024"},"version":135,"publish_version":135,"role":null,"authored":false,"authors":[{"type":"individual","id":"e5ef8a37ef396f6c","login":"lamonre","name":"","avatar_url":"https://avatars-next.observableusercontent.com/31a52d7813ecf302a3bd6a481674e7476e9b143abcc43dfcb6e1cc51ec63d80c","tier":null}],"members":[{"type":"individual","id":"e5ef8a37ef396f6c","login":"lamonre","name":"","avatar_url":"https://avatars-next.observableusercontent.com/31a52d7813ecf302a3bd6a481674e7476e9b143abcc43dfcb6e1cc51ec63d80c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"04b. Daily task of week 4","cells":[{"id":0,"value":"md`# 04b. Daily task of week 4`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"md`## Preliminary definitions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"d3 = require(\"d3@6\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"height = 700;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"width = 900;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"margin = 70;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"md`## Basic chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"viewof parameters = form(html``)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"