31:T443,md`Then, the code that we have to add is: ~~~ js selection.data(desiredData) .join('rect') .attr('x', (d, i) => i * 25) .attr('y', d => height - d.cases/30000) .attr('width', 20) .attr('height', d => d.cases/30000) .attr('fill', 'purple') ~~~ So, the different attributes are computed in the following form: - The **x** attribute requires to know the position on the array of the datum. This is not stored on the datum itself, so we use a second parameter (usually named *i*) that gives this information. This extra parameter is always available but we only need to add it when necessary. - The **y** attribute, as it can be shown in the plot, has to be computed as the total SVG height minus the bar height. - The **width** attribute has a fixed value (in this example 20 pixels). - The **height** attribute is proportional to the number of cases. In this example, the value is divided by 30,000 to have an extent similar to the SVG height. Note that we have set the *fill* attribute just to change the default color. `32:T478,md`As you can see, we have had to tune the ratio between the size of the chart (in pixels) and the number of cases (in people), that have a very different range of magnitude. This has been quite tricky, but fortunately, D3 has a solution for that: **[scales](https://observablehq.com/@d3/learn-d3-scales)**. D3 scales come in many types. Which you use depends on the abstract dimension (quantitative or nominal?) and the visual variable (position or color?). In our case, the height is a quantitative dimension that codifies position, so the best option is the **scaleLinear()** function. A D3 scale has two primary functions: *.domain()* and *.range()*, both of which expect arrays and which must have arrays of the same length to get the right results. The array in .domain() indicates the series of values being mapped to .range(), which will make more sense in practice. In our case, the domain is from 0 to the maximum number of cases. This value can be computed using the *.max()* function. Other useful functions are *.min()* and *.extend()*. On the other hand, the range is from 0 to the SVG height. Thus, we can define the scale as: `33:[{"id":"71e8c3e039a72ff7864e983bb96c62aed5877da1758b2e392cdce6d2114e89a7b121ed2dde3646c3446860f2ab8bf98fb25d9c481f5d865d1517d5382f068604","href":"https://static.observableusercontent.com/files/71e8c3e039a72ff7864e983bb96c62aed5877da1758b2e392cdce6d2114e89a7b121ed2dde3646c3446860f2ab8bf98fb25d9c481f5d865d1517d5382f068604","name":"barPosition.png","type":"image/png","lastModified":1603321218377.152,"size":5645},{"id":"46ac82843dacd13cffdee7559a900a873185bdb641829342609be047d32bb800c93199ad552db1bcd1d8ce5c514740c46769bf82f27cd12fa787a694c6ef57e7","href":"https://static.observableusercontent.com/files/46ac82843dacd13cffdee7559a900a873185bdb641829342609be047d32bb800c93199ad552db1bcd1d8ce5c514740c46769bf82f27cd12fa787a694c6ef57e7","name":"VisualEncoding@2.png","type":"image/png","lastModified":1603228938490.431,"size":12797},{"id":"cd9880512f464eb2c89d03c4c59c250c6a1fa6fe8b903165dfabe35092373dfb017776c749aa809b80be3f46a779029ffcaa3a1cbfa77d0301152d047ab37457","href":"https://static.observableusercontent.com/files/cd9880512f464eb2c89d03c4c59c250c6a1fa6fe8b903165dfabe35092373dfb017776c749aa809b80be3f46a779029ffcaa3a1cbfa77d0301152d047ab37457","name":"SVG@5.png","type":"image/png","lastModified":1603314549486.991,"size":3234},{"id":"39c298226e816d53f2d8b6c0ca7349113db1190c9b1ced586c8531be7135f37bf684be4be05075e1389aaebdad2e670882501a457beb4d51298630d5f4dc4226","href":"https://static.observableusercontent.com/files/39c298226e816d53f2d8b6c0ca7349113db1190c9b1ced586c8531be7135f37bf684be4be05075e1389aaebdad2e670882501a457beb4d51298630d5f4dc4226","name":"horizontalbarchart.png","type":"image/png","lastModified":1603324721705.297,"size":6305},{"id":"b85e0b7122a6efa07a6a2d511c0b04e6607a060b79eaa8e62896baecbb7aa1ce0be7161a27963c5ec191b5ce10e488d9d55135696ffa2662ac41121d4b298613","href":"https://static.observableusercontent.com/files/b85e0b7122a6efa07a6a2d511c0b04e6607a060b79eaa8e62896baecbb7aa1ce0be7161a27963c5ec191b5ce10e488d9d55135696ffa2662ac41121d4b298613","name":"horizontalbarchart@1.png","type":"image/png","lastModified":1603354844019.504,"size":11416}] 2f:{"title":"A first introduction to D3","cells":[{"id":47,"value":"md`# A first introduction to D3`","pinned":false,"hidden":false,"mode":"ojs"},{"id":189,"value":"md`[D3.js](https://d3js.org/) is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation. Currently, the latest version is ${d3.version}.\n\nTo use D3, we need to include the library in this way:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"d3 = require(\"d3@6\");","pinned":true,"hidden":false,"mode":"ojs"},{"id":0,"value":"md`## Data wrangling`","pinned":false,"hidden":false,"mode":"ojs"},{"id":199,"value":"md`For the session today, we will use the [Oxford COVID-19 Government Response Tracker (OxCGRT)](https://www.bsg.ox.ac.uk/research/research-projects/coronavirus-government-response-tracker) dataset, which collects data on several different common policy responses that governments have taken to respond to the pandemic on 17 indicators such as school closures and travel restrictions. It now has data from more than 180 countries.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":" OxCGRTdata = d3.csv(\"https://raw.githubusercontent.com/OxCGRT/covid-policy-tracker/master/data/OxCGRT_latest.csv\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":207,"value":"md`To simplify the data, we will only take into account the name of the countries, the total number of COVID cases, and the total deaths on the 15th of October. We will take only the countries that had more than 200,000 cases and we sort them according to the number of deaths.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":" desiredData = OxCGRTdata.filter(d => d.Date === \"20201015\" && d.RegionName === \"\")\n .map(d => {return {\n cname : d.CountryName,\n code : d.CountryCode,\n cases : +d.ConfirmedCases,\n deaths : +d.ConfirmedDeaths\n };}\n )\n .filter(d => d.cases > 200000)\n .sort((a,b) => b.deaths - a.deaths); ","pinned":false,"hidden":false,"mode":"ojs"},{"id":116,"value":"md`## Chart creation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":260,"value":"md`The process of creating a chart using D3 has the following steps:\n1. Design the visual encoding\n2. Create the graphical area\n3. Select the graphical elements\n4. Bind data to these elements\n5. Join the data with the visual marks\n6. Codify the visual channels of the marks`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":267,"value":"md`### 1. Design the visual encoding\n\nIn this step, you have to decide how data is mapped into visual channels.\n\nFor instance, imagine you want to create a basic bar chart with the desired data, showing the number of COVID cases per country. A sketch of the visual encoding could be: `","pinned":false,"hidden":false,"mode":"ojs"},{"id":274,"value":"FileAttachment(\"VisualEncoding@2.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":281,"value":"md`In this case, we want to codify the number of COVID cases as the height of the bar. The width will be a constant value (all the bars will have the same). Each bar will start at equally spaced positions.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":293,"value":"md`### 2. Create the graphical area`","pinned":false,"hidden":false,"mode":"ojs"},{"id":324,"value":"md`In D3, the standard way to proceed is to create an SVG area. To do so, we will have to apply this code:\n\n~~~ js\n const width = 800; //width of SVG in pixels\n const height = 500; //height of SVG in pixels\n const svg = d3.select(DOM.svg(width, height));\n~~~\n\nThe way on how the SVG is created is specific for Observable. At the end of this notebook, there's a discussion on how to do this outside Observable.\n\nThe area defined on the SVG will be the are where we will place the plot.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":347,"value":"FileAttachment(\"SVG@5.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":298,"value":"md`### 3. Select the graphical elements`","pinned":false,"hidden":false,"mode":"ojs"},{"id":355,"value":"md`The third step, the [selection](https://github.com/d3/d3-selection), is quite confusing for beginners. You have to select the elements you want to work with (even they don't exist). This selection process can be of a single element (if you use **select()** function) or multiple elements (if you use **selectAll()**function). The syntax for the selectors is equivalent to the [CSS selectors](https://www.w3schools.com/css/css_selectors.asp), where '.' indicates the class name and '#' the id.\nIn our bar chart, we want to create a rectangle for each data item, so we need to select all the rectangles that we have on the SVG. This will make sense in the future when we have interactive plots. The code will be:\n\n~~~ js\n selection = svg.selectAll('rect');\n~~~\nWe can also select using the class name by adding a point just before the name. For instance,\n\n~~~ js\n selection = svg.selectAll('.bar');\n~~~\n\nwill select all the elements that belong to the class *bar*. \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":301,"value":"md`### 4. Bind data to these elements`","pinned":false,"hidden":false,"mode":"ojs"},{"id":367,"value":"md`Once we have selected all the rectangles, we need to bind the data to the initial selection. This binding associates each selected element with each data element. The first datum in data is assigned to the first selected element, the second datum to the second selected element, and so on. But the number of selected elements and the number of data items may not coincide and, therefore, we have three possible situations: `","pinned":false,"hidden":false,"mode":"ojs"},{"id":376,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":380,"value":"md`_Credit: [Mike Bostock](https://bost.ocks.org/mike/join/)_`","pinned":false,"hidden":false,"mode":"ojs"},{"id":391,"value":"md`The code to do this data-binding is simply applying the **data()** function with the data that we want to use as a parameter:\n\n~~~ js\n selection.data(desiredData) \n~~~\n\n `","pinned":false,"hidden":false,"mode":"ojs"},{"id":307,"value":"md`### 5. Join the data with the visual marks`","pinned":false,"hidden":false,"mode":"ojs"},{"id":389,"value":"md`In this step, the **join()** function appends, removes, and reorders elements as necessary to match the data that was previously bound. That is, by default, this **join()** function appends the enter elements, updates the update elements, and remove the exit elements. The parameter of the **join()** function indicates the element that has to be appended in case of exit (in our case, a **rect** element). So, the code we need is:\n\n~~~ js\n selection.data(desiredData) \n .join('rect')\n~~~\nNote that we are using function chaining, i.e., we apply the **join** function to the result of the **data** function.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":311,"value":"md`### 6. Codify the visual channels of the marks`","pinned":false,"hidden":false,"mode":"ojs"},{"id":410,"value":"md`In this latter point, we need to codify the visual channels of the marks. From the first step we know that:\n- the **x** positioning is at equally spaced positions\n- the **y** positioning is aligned on the bottom\n- the **width** is equal for all the data\n- the **height** is proportional to the number of cases\n\nBut the origin of coordinates of the SVG is on the upper left position (instead of the bottom left position as usual), so some adjustments have to be done. This are shown on the next plot:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":432,"value":"FileAttachment(\"barPosition.png\").image();","pinned":false,"hidden":false,"mode":"ojs"},{"id":437,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":445,"value":"md`## Let's draw!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":448,"value":"md`If we merge all the previous code, we will create our **first** D3 chart!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":474,"value":"height = 300;","pinned":true,"hidden":false,"mode":"ojs"},{"id":476,"value":"width = 800;","pinned":true,"hidden":false,"mode":"ojs"},{"id":138,"value":"firstchart = {\n const svg = d3.select(DOM.svg(width, height));\n \n svg.selectAll('rect')\n .data(desiredData)\n .join('rect')\n .attr('x', (d, i) => i * 25)\n .attr('y', d => height - d.cases/30000)\n .attr('width', 20)\n .attr('height', d => d.cases/30000)\n .attr('fill', 'purple'); \n\n // Specific to Observable\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":158,"value":"md`## Scales`","pinned":false,"hidden":false,"mode":"ojs"},{"id":463,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":471,"value":"heightScale = d3.scaleLinear()\n .domain([0,d3.max(desiredData, d => d.cases)])\n .range([0, height]);\n ","pinned":true,"hidden":false,"mode":"ojs"},{"id":491,"value":"d3.max(desiredData, d => d.cases);","pinned":true,"hidden":false,"mode":"ojs"},{"id":484,"value":"heightScale(0);","pinned":true,"hidden":false,"mode":"ojs"},{"id":487,"value":"heightScale(7916100);","pinned":true,"hidden":false,"mode":"ojs"},{"id":493,"value":"heightScale(1000000);","pinned":true,"hidden":false,"mode":"ojs"},{"id":544,"value":"md`Other scales similar to scaleLinear are **scaleLog()** and **scaleSqrt()**.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":560,"value":"heightLogScale = d3.scaleLog()\n .domain(d3.extent(desiredData, d => d.cases)) //extent returns an Array[2] as [min, max]\n .range([0, height]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":594,"value":"d3.extent(desiredData, d => d.cases);","pinned":true,"hidden":false,"mode":"ojs"},{"id":564,"value":"heightLogScale(d3.min(desiredData, d => d.cases));","pinned":true,"hidden":false,"mode":"ojs"},{"id":573,"value":"heightLogScale(7916100);","pinned":true,"hidden":false,"mode":"ojs"},{"id":576,"value":"heightLogScale(1000000);","pinned":true,"hidden":false,"mode":"ojs"},{"id":546,"value":"md`These scales are very generic and they can also be applied with numerical values, but also with color:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":549,"value":"color = d3.scaleLinear()\n .domain([10, 100])\n .range([\"brown\", \"steelblue\"]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":551,"value":"color(20);","pinned":true,"hidden":false,"mode":"ojs"},{"id":553,"value":"color(50);","pinned":true,"hidden":false,"mode":"ojs"},{"id":526,"value":"md`Similarly, we can use the **[scaleBand()](https://observablehq.com/@d3/d3-scaleband)** function to determine the bar width. By default, given a domain of a certain length (an array or an iterator) and a continuous range [start, end], the scaleBand will divide the range evenly between the elements of the domain. We can also add padding, which will control the space between the bars. In this example, the value 0.1 indicates that the space between bars will be the 10% of the total bar width.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":520,"value":"widthScale = d3.scaleBand()\n .domain(d3.range(desiredData.length))\n .range([0, width])\n .padding(0.1);","pinned":true,"hidden":false,"mode":"ojs"},{"id":478,"value":"md`Then, the code has to be refactored in this way:` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":483,"value":"chartwithscales = {\n const svg = d3.select(DOM.svg(width, height));\n \n svg.selectAll('rect')\n .data(desiredData)\n .join('rect')\n .attr('x', (d, i) => widthScale(i))\n .attr('y', d => height - heightScale(d.cases))\n .attr('width', widthScale.bandwidth())\n .attr('height', d => heightScale(d.cases))\n .attr('fill', 'purple');\n\n // Specific to Observable\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":419,"value":"md`## Daily task`","pinned":false,"hidden":false,"mode":"ojs"},{"id":423,"value":"md`Create a horizontal bar chart with the ratio between the number of death by the number of cases. The final chart has to look like:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":508,"value":"FileAttachment(\"horizontalbarchart@1.png\").image();","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"md`## Chart imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":221,"value":"adaptedData = desiredData.map(d => {return {\n name : d.code,\n value : +d.deaths\n };}\n )\n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"import {chart as barchart} with {adaptedData as data, margin} from \"@d3/bar-chart\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":106,"value":"margin = ({top: 30, right: 0, bottom: 30, left: 50});","pinned":true,"hidden":false,"mode":"ojs"},{"id":89,"value":"barchart","pinned":true,"hidden":false,"mode":"ojs"},{"id":167,"value":"md`## How to do it out from Observable`","pinned":false,"hidden":false,"mode":"ojs"},{"id":243,"value":"md`In our html page, there will be a SVG tag with a given id:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":122,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":247,"value":"md`Then, the JavaScript code will be on a .js file and on a function we will place the following code:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"{\n const svg = d3.select('#main-chart')\n .attr('width', width) // add attribute width to svg\n .attr('height', height); // add attribute height to svg\n\n svg.selectAll('rect')\n .data(desiredData)\n .join('rect')\n .attr('x', (d, i) => widthScale(i))\n .attr('y', d => height - heightScale(d.cases))\n .attr('width', widthScale.bandwidth())\n .attr('height', d => heightScale(d.cases))\n .attr('fill', 'purple'); \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"md`## Apendix`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}