2b:null 2c:["$","title",null,{"children":"Task of week 2 (22nd-28th October) | larago | Observable"}] 31:[] 2f:{"id":"86a5d8da60e569e1","slug":"task-of-week-2-22nd-28th-october","title":"Task of week 2 (22nd-28th October)","thumbnail":"376579aa5f78bc67030e37157f251aa345ccfa629db73ba6bf025422464584ec","access_level":"public","create_time":"$D2020-10-26T19:45:03.669Z","update_time":"$D2020-10-31T11:07:52.553Z","view_time":null,"first_public_time":"$D2020-10-28T15:52:55.484Z","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":"79e9f8765304688a","login":"lauraarago","name":"larago","avatar_url":"https://avatars-next.observableusercontent.com/6b0107d1cbc1c4fee3b4f7693a56e770649d6db1838f4a48cc44de91107b104b","tier":"starter_2024"},"version":291,"publish_version":291,"role":null,"authored":false,"authors":[{"type":"individual","id":"edbb25d071c27af7","login":"lauraarago","name":"larago","avatar_url":"https://avatars-next.observableusercontent.com/6b0107d1cbc1c4fee3b4f7693a56e770649d6db1838f4a48cc44de91107b104b","tier":null}],"members":[{"type":"individual","id":"edbb25d071c27af7","login":"lauraarago","name":"larago","avatar_url":"https://avatars-next.observableusercontent.com/6b0107d1cbc1c4fee3b4f7693a56e770649d6db1838f4a48cc44de91107b104b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"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"},{"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"},{"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"},{"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"},{"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"},{"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"},{"id":31,"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"},{"id":28,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"d3 = require(\"d3@6\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":134,"value":"md`Import form library`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":69,"value":"\nimport {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":138,"value":"md`Set width and height`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":83,"value":"width = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":90,"value":"height = 400","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":140,"value":"md`Set margin and containers regarding the margins stablished`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":95,"value":"margin = ({\n top: 25,\n right: 25,\n bottom: 25,\n left: 25\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":99,"value":"container = d3.create('svg')\n .attr('width', width + margin.left + margin.right)\n .attr('height', height + margin.top + margin.bottom);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":154,"value":"md`Filter dataset by slider menu created at the bottom of the notebook`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":113,"value":"desiredata = gapminder.filter(d => d.year == parameters.year);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":158,"value":"md`Create x axis and link it to life expectancy`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":110,"value":"x = d3.scaleLinear()\n .domain(d3.extent(desiredata, d => d.life_expect)).nice()\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":129,"value":"y = d3.scaleLinear()\n .domain(d3.extent(desiredata, d => d.fertility)).nice()\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":168,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).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(\"text-anchor\", \"end\")\n .text(desiredata.x))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":169,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.append(\"text\")\n .attr(\"x\", -margin.left)\n .attr(\"y\", 10)\n .attr(\"fill\", \"red\")\n .attr(\"text-anchor\", \"start\")\n .text(desiredata.y))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":179,"value":"grid = g => g\n .attr(\"stroke\", \"#d9d9db\")\n .attr(\"stroke-opacity\", 0.8)\n .call(g => g.append(\"g\")\n .selectAll(\"line\")\n .data(x.ticks())\n .join(\"line\")\n .attr(\"x1\", d => 0.5 + x(d))\n .attr(\"x2\", d => 0.5 + x(d))\n .attr(\"y1\", margin.top)\n .attr(\"y2\", height - margin.bottom))\n .call(g => g.append(\"g\")\n .selectAll(\"line\")\n .data(y.ticks())\n .join(\"line\")\n .attr(\"y1\", d => 0.5 + y(d))\n .attr(\"y2\", d => 0.5 + y(d))\n .attr(\"x1\", margin.left)\n .attr(\"x2\", width - margin.right));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":285,"value":"viewof parameters = form(html``)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":174,"value":"chart = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height]);\n\n svg.append(\"g\")\n .call(xAxis);\n\n svg.append(\"g\")\n .call(yAxis);\n\n svg.append(\"g\")\n .call(grid);\n\n svg.append(\"g\")\n .attr(\"stroke\", \"#fcba03\")\n .attr(\"stroke-width\", 0.5)\n .attr(\"fill\", \"#ffd970\")\n .selectAll(\"circle\")\n .data(desiredata)\n .join(\"circle\")\n .attr(\"cx\", d => x(d.life_expect))\n .attr(\"cy\", d => y(d.fertility))\n .attr(\"r\", 3);\n\n svg.append(\"g\")\n .attr(\"font-family\", \"sans-serif\")\n .attr(\"font-size\", 10)\n .selectAll(\"text\")\n .data(desiredata)\n .join(\"text\")\n .attr(\"fill\", \"#868687\")\n .attr(\"dy\", \"0.25em\")\n .attr(\"x\", d => x(d.life_expect)+7)\n .attr(\"y\", d => y(d.fertility))\n .text(d => d.country);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"