2c:null 2d:["$","title",null,{"children":"02.2. Task of week 2 (22nd-28th October) - Solution | lamonre | Observable"}] 32:[] 30:{"id":"7a6f24ae9c421f8f","slug":"02-2-task-of-week-2-22nd-28th-october-solution","title":"02.2. Task of week 2 (22nd-28th October) - Solution","thumbnail":"2a542f85dd65e9c5a4302870b03755ca87b4d9e2222b6dce23b1cebfe1bbb5db","access_level":"public","create_time":"$D2020-11-03T14:32:27.680Z","update_time":"$D2020-11-29T20:54:36.019Z","view_time":null,"first_public_time":"$D2020-11-29T20:54:39.146Z","has_unpublished_edits":null,"fork":{"id":"7b339162350ee717","slug":"task-of-week-2-22nd-28th-october-solution","title":"Task of week 2 (22nd-28th October) - Solution","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":112,"publish_version":112,"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":"02.2. Task of week 2 (22nd-28th October) - Solution","cells":[{"id":0,"value":"md`# 02.2. Task of week 2 (22nd-28th October) - Solution`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"gapminder = d3.json(\"https://vega.github.io/vega-datasets/data/gapminder.json\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"lifeExpectScale(d3.max(desiredData, d => d.life_expect))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"viewof parameters = form(html``)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"md`## Apendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"d3.schemeCategory10","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"width = 600;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"margin = 50;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"desiredData = gapminder.filter(d => d.year === parameters.year);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"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":6,"value":"d3 = require(\"d3@6\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 31:"$30:body"