31:T4ba, chart = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); svg.append("g") .call(grid); svg.selectAll("circle") .data(df) .join("circle") .attr("cx", d => x(d.life_expect)) .attr("cy", d => y(d.fertility)) .attr("r", d => rScale(d.pop)) .attr("fill", "#D7AF70") .attr("opacity", 0.5); svg.append("text") .text("Life expectancy") .attr("dx", width -380) .attr("dy", height - margin.top + margin.bottom - 12) .attr("font-family", "Open Sans") .attr("font-size", 11) svg.append("text") .text("Fertility") .attr("x", -margin.top + 40) .style("text-anchor", "start") .attr("y", 10) .attr("font-family", "Open Sans") .attr("font-size", 11) svg.append("g") .attr("font-family", "Open Sans") .attr("font-size", 5) .attr("fill", "#5d5e5e") .selectAll("text") .data(df) .join("text") .attr("dy", "0.35em") .attr("x", d => x(d.life_expect)) .attr("y", d => y(d.fertility)) .text(d => d.country); return svg.node(); } 32:[] 2f:{"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"},{"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"},{"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"},{"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"},{"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"},{"id":9,"value":"gapminder = d3.json(\"https://vega.github.io/vega-datasets/data/gapminder.json\")","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":211,"value":"md`## Chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":172,"value":"viewof paramaters = form(html`

`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"md`## Apendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":134,"value":"height = 400","pinned":false,"hidden":false,"mode":"ojs"},{"id":137,"value":"width = 700","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"d3 = require(\"d3@6\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"df = gapminder.filter(d => d.year == paramaters.Year);","pinned":false,"hidden":false,"mode":"ojs"},{"id":174,"value":"import {form} from \"@mbostock/form-input\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"d3.min(df, d => d.fertility)","pinned":false,"hidden":false,"mode":"ojs"},{"id":114,"value":"d3.max(df, d => d.fertility)","pinned":false,"hidden":false,"mode":"ojs"},{"id":94,"value":"margin = ({top: 25, right: 20, bottom: 35, left: 40})","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"value":"x = d3.scaleLinear()\n .domain(d3.extent(df, d => d.life_expect)).nice()\n .range([margin.left, width - margin.right +5]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":97,"value":"y = d3.scaleLinear()\n .domain(d3.extent(df, d => d.fertility)).nice()\n .range([height - margin.bottom, margin.top]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"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(\"fill\", \"currentColor\")\n .attr(\"text-anchor\", \"end\")\n .text(df.x))","pinned":false,"hidden":false,"mode":"ojs"},{"id":104,"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\", \"currentColor\")\n .attr(\"text-anchor\", \"start\")\n .text(df.y))","pinned":false,"hidden":false,"mode":"ojs"},{"id":188,"value":"rScale = d3.scaleSqrt()\n .domain(d3.extent(df, d => d.pop))\n .range([1, 20]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"grid = g => g\n .attr(\"stroke\", \"currentColor\")\n .attr(\"stroke-opacity\", 0.05)\n .call(g => g.append(\"g\")\n .selectAll(\"line\")\n .data(x.ticks())\n .join(\"line\")\n .attr(\"x1\", d => 0.3 + x(d))\n .attr(\"x2\", d => 0.3 + x(d))\n .attr(\"y1\", margin.top +10)\n .attr(\"y2\", height - margin.bottom +10))\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"}],"files":"$W32","stdlib":"1","titling":"auto"}