2c:null 2d:["$","title",null,{"children":"Task of week 2 (22nd-28th October) | Xavier B. | Observable"}] 32:[] 30:{"id":"ab934415fd03f358","slug":"task-of-week-2-22nd-28th-october","title":"Task of week 2 (22nd-28th October)","thumbnail":"88fc23af269453488917c86308d7b0f53a49f4153eae60305a09862c0fa6d811","access_level":"public","create_time":"$D2020-10-27T23:09:31.151Z","update_time":"$D2020-10-29T19:14:48.259Z","view_time":null,"first_public_time":"$D2020-10-29T13:00:22.152Z","has_unpublished_edits":null,"fork":{"id":"26eafdecfb2405e9","slug":"task-of-week-2-22nd-28th-october","title":"Task of week 2 (22nd-28th October)","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":1755,"publish_version":1755,"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,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Task of week 2 (22nd-28th October)","cells":[{"id":0,"value":"md`# Task of week 2 (22nd-28th October)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"md`*Professor's instructions:*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"md`This week, we have presented an introduction to the D3 library, which is a powerful tool to programmatically create visualizations. We have learned how to do basic visual encodings and how to code them using D3.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"md`Please, take your time on reading again the notebook presented in this session and also take a look at other introductory notebooks such as:\n- [Let's make a bar chart](https://observablehq.com/@d3/lets-make-a-bar-chart) from @mbostock\n- [Introduction to D3](https://observablehq.com/@mitvis/introduction-to-d3) from @arvind\n- [Introduction to D3](https://observablehq.com/@uwdata/introduction-to-d3) from @uwdata` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"md`Besides, you can take a look at different notebooks that implement basic plots. Here you have some of them:\n- [Horizontal bar chart](https://observablehq.com/@d3/horizontal-bar-chart)\n- [Stacked bar chart](https://observablehq.com/@d3/stacked-bar-chart)\n- [Grouped bar chart](https://observablehq.com/@d3/grouped-bar-chart)\n- [Dot plot](https://observablehq.com/@mbostock/global-temperature-trends)\n- [Scatterplot](https://observablehq.com/@d3/scatterplot)`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"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.ted.com/talks/hans_rosling_the_best_stats_you_ve_ever_seen)). 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":74,"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":61,"value":"md `---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"md `## **Task summary** \nUse the gapminder dataset to analyze the correlation between **life expectancy** and **fertility**:\n- use a scatter plot\n- filter data for a given year (wether _cell value_ or _selector_)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"md `## Data wrangling`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1653,"value":"filteredData = gapminder.filter(d => { \n return d.year == parameters.yearValue ;})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1503,"value":"data = filteredData.map(d => {return {\n year : d.year,\n country : d.country,\n cluster: d.cluster,\n population : +d.pop,\n y : +d.life_expect,\n x : +d.fertility,\n };}\n )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1321,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"md `# Scatterplot chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"viewof parameters = form(html``)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1283,"value":"md`### Year selected ▸ _${parameters.yearValue}_`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1713,"value":"chart = {\n const svg = d3.select(DOM.svg(width, height));\n svg.selectAll('circle')\n .data(data)\n .join('circle')\n .attr('cx', d => lengthScale(d.x))\n .attr('cy', d => heightScale(d.y))\n .attr('r', 5)\n .attr('stroke', 'purple')\n .attr('stroke-width', 2)\n .attr('fill', \"orange\");\n \n \n svg.append(\"g\")\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", 10)\n .attr(\"fill\", \"steelblue\")\n .selectAll(\"text\")\n .data(data)\n .join(\"text\")\n .attr(\"dy\", \"0.7em\")\n .attr(\"x\", d => lengthScale(d.x) + 9)\n .attr(\"y\", d => heightScale(d.y) - 4)\n .text(d => d.country);\n \n svg.append(\"g\")\n .call(xAxis);\n\n svg.append(\"g\")\n .call(yAxis);\n \n \n return svg.node();\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1733,"value":"md `## Further experimentation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"chart2 = {\n const svg = d3.select(DOM.svg(width, height));\n svg.selectAll('circle')\n .data(data)\n .join('circle')\n .attr('cx', d => lengthScale(d.x))\n .attr('cy', d => heightScale(d.y))\n .attr('r', d => r(d.population))\n .attr('stroke', 'grey')\n .attr('stroke-width', 1)\n .attr('fill-opacity', 0.40)\n .attr('fill', d => color(d.cluster));\n \n \n// svg.append(\"g\")\n// .attr(\"font-family\", \"sans-serif\")\n// .attr(\"font-size\", 10)\n// .attr(\"fill\", \"grey\")\n// .selectAll(\"text\")\n// .data(data)\n// .join(\"text\")\n// .attr(\"dy\", \"0.7em\")\n// .attr(\"x\", d => lengthScale(d.x) + 9)\n// .attr(\"y\", d => heightScale(d.y) - 4)\n// .text(d => d.country);\n \n svg.append(\"g\")\n .call(xAxis);\n\n svg.append(\"g\")\n .call(yAxis);\n \n \n return svg.node();\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"md`---\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1445,"value":"md `### Parameters and functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1424,"value":"// Parameters and functions","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"width = 800","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"margin = ({top: 25, right: 40, bottom: 35, left: 60})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"lengthScale = d3.scaleLinear()\n .domain(d3.extent(gapminder, d => d.fertility)).nice()\n// .domain([0,d3.max(gapminder, d => d.fertility)])\n .range([margin.left, width - margin.right])\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"heightScale = d3.scaleLinear()\n .domain(d3.extent(gapminder, d => d.life_expect)).nice()\n .range([height - margin.bottom, margin.top])\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1710,"value":"r = d3\n .scaleSqrt()\n .range([1, 35])\n .domain([0, 5e8])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1719,"value":"color = d3.scaleOrdinal()\n .range(d3.schemeSet3);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1454,"value":"md`---\n\n### Chart elements`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1427,"value":"// Chart elements","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1342,"value":"\nxAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(lengthScale).tickSizeOuter(0))\n .call(g => g.append(\"text\")\n .attr(\"x\", width)\n .attr(\"y\", margin.bottom - 4)\n .attr(\"fill\", \"purple\")\n .attr(\"font-size\", 12) \n .attr(\"text-anchor\", \"end\")\n .text(\"Fertility rate →\"))\n\n\n//xAxis = g => g\n// .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n// .call(d3.axisBottom(lengthScale).ticks(width / 80))\n// .call(g => g.select(\".domain\").remove())\n// .call(g => g.append(\"text\")\n// .attr(\"x\", width)\n// .attr(\"y\", margin.bottom - 4)\n// .attr(\"fill\", \"purple\")\n// .attr(\"font-size\", 12) \n// .attr(\"text-anchor\", \"end\")\n// .text(\"Fertility rate →\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1341,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(heightScale))\n .call(g => g.append(\"text\")\n .attr(\"x\", -margin.left)\n .attr(\"y\", 12)\n .attr(\"fill\", \"purple\")\n .attr(\"font-size\", 12)\n .attr(\"text-anchor\", \"start\")\n .text(\"↑ Life expectancy\"))\n\n//yAxis = g => g\n// .attr(\"transform\", `translate(${margin.left},0)`)\n// .call(d3.axisLeft(heightScale))\n// .call(g => g.select(\".domain\").remove())\n// .call(g => g.append(\"text\")\n// .attr(\"x\", -margin.left)\n// .attr(\"y\", 12)\n// .attr(\"fill\", \"purple\")\n// .attr(\"font-size\", 12)\n// .attr(\"text-anchor\", \"start\")\n// .text(\"↑ Life expectancy\"))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1465,"value":"md`---\n### Inputs: data and imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1431,"value":"// Inputs: data & imports","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"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":12,"value":"d3 = require(\"d3\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1294,"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":1433,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1430,"value":" // Spent a lot of hours with some problem corrupting the json file. While exploring data and filtering by year the results showed many entries for a specific year and country, so I thought there was needed some variable grouping and summarizing, that explain the code below. \n\n// At some point the data got corrupted from origin although never edited gapminder cell. The gapminder object printed always same year along all dataset. \n\n// Even when reloading the notebook the gapminder object remained the same. After exploring the json data outside the notebook and verify that each country has only entries per year. That was strange. Finally I solve it by manually re-running (cmd+shift) the gapminder cell, so I guess it was some kind of cache management to optimize performance. \n\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":548,"value":"///////// DEPRECATED /////////////\n// Grouping and summarizing the dataset\n//\n//desiredData = d3.nest()\n// .key(function(d) { return d.country; })\n// .rollup(function(v) { return {\n// x : d3.mean(v, function(d) {return d.fertility; }),\n// y : d3.mean(v, function(d) {return d.life_expect; }),\n// pop : d3.max(v, function(d) {return d.pop; }),\n// year : d3.max(v, function(d) {return d.year; }),\n// }; })\n// .entries(filteredData)\n\n\n// Usage found here -> http://learnjsdata.com/group_data.html\n// Requires importing \"d3-collection\" ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1024,"value":"/////////// DEPRECATED /////////////\n// Mapping values and keys into the same object level\n//data = desiredData.map(({key, value} ) => ({\n// country: key, \n// x: +value.x, \n// y: +value.y, \n// population: +value.pop, \n// year: +value.year}))\n//// .filter(d => d.year = parameters.yearValue)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":993,"value":"///////// DEPRECATED /////////////\n//desiredData__ = desiredData_.reduce(function(acumarray, d) {\n //if(!acumarray.hasOwnProperty(d.condition)){ acumarray[d.condition] = [];acumarray[d.condition].push(d);}\n //else {acumarray[d.condition].push(d);}\n// (acumarray[d.country] = acumarray[d.country] || []).push(d);\n// return acumarray;\n// }, {});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"///////// DEPRECATED /////////////\n// desiredData = gapminder.map(d => {return {\n// year : d.year,\n// country : d.country,\n// cluster: d.cluster,\n// population : +d.pop,\n// y : +d.life_expect,\n// x : +d.fertility,\n// };}\n// )\n// .filter(d => d.year = selectorYear)\n ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 31:"$30:body"