31:[] 2f:{"title":"Daily task of week 4","cells":[{"id":0,"value":"md`# Daily task of week 4`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":10,"value":"md`## Preliminary definitions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"d3 = require(\"d3@6\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"gapminder = d3.json(\"https://vega.github.io/vega-datasets/data/gapminder.json\")","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":23,"value":"height = 700;","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"width = 700;","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"margin = 70;","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"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"},{"id":32,"value":"md`## Basic chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"viewof parameters = form(html``)","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"scatterplot = {\n const svg = d3.select(DOM.svg(width, height));\n \n svg.selectAll('circle')\n .data(desiredData)\n .join('circle')\n .attr('cx', d => fertilityScale(d.fertility))\n .attr('cy', d => lifeExpectScale(d.life_expect))\n .attr('r', d => populationScale(d.pop))\n .attr('fill', d => d3.schemeCategory10[d.cluster])\n .attr('fill-opacity', 0.4)\n .attr('stroke', d => d3.schemeCategory10[d.cluster])\n\n svg.append(\"g\")\n .call(xAxis);\n\n svg.append(\"g\")\n .call(yAxis);\n\n // Specific to Observable\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}