31:[] 2f:{"title":"Task of week 2 (22nd-28th October) - Solution","cells":[{"id":0,"value":"md`# Task of week 2 (22nd-28th October) - Solution`","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"md`The task of this week will consist of the implementations of a scatterplot to show the relationship between life expectancy and the fertility rate among countries in a given year. To do so, you will use the dataset on global health and population measures from the [Gapminder Foundation](https://www.gapminder.org/) (and shared in [Hans Rosling's popular TED talk](https://www.youtube.com/watch?v=hVimVzgtD6w)). This dataset comprises data from 1955 to 2005 for each country about population, life expectancy, and fertility. Cluster refers to the geographical group that the country belongs to.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"gapminder = d3.json(\"https://vega.github.io/vega-datasets/data/gapminder.json\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":33,"value":"md`You will have to first filter the data for a given year (it can be set from a cell value or a slider). Then, you will have to create the scatterplot comparing life expectancy and the fertility rate for that year. Feel free to improve the plot in the sense you think is better.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"fertilityScale = d3.scaleLinear()\n .domain([0,d3.max(desiredData, d => d.fertility)])\n .range([margin, width - margin]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":64,"value":"lifeExpectScale = d3.scaleLinear()\n .domain([0,d3.max(desiredData, d => d.life_expect)])\n .range([height - margin, margin]); ","pinned":true,"hidden":false,"mode":"ojs"},{"id":96,"value":"lifeExpectScale(d3.max(desiredData, d => d.life_expect))","pinned":true,"hidden":false,"mode":"ojs"},{"id":79,"value":"populationScale = d3.scaleSqrt()\n .domain([0,d3.max(desiredData, d => d.pop)])\n .range([0, 40]); ","pinned":true,"hidden":false,"mode":"ojs"},{"id":39,"value":"viewof parameters = form(html``)","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"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 // Specific to Observable\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"md`## Apendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"d3.schemeCategory10","pinned":true,"hidden":false,"mode":"ojs"},{"id":17,"value":"width = 600;","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"margin = 50;","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"desiredData = gapminder.filter(d => d.year === parameters.year);","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require(\"d3@6\");","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}