25:["$","title",null,{"children":"A first introduction to D3 | Joseph Ricafort | Observable"}] 49:T44e,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. In 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: ~~~ js selection = svg.selectAll('rect'); ~~~ We can also select using the class name by adding a point just before the name. For instance, ~~~ js selection = svg.selectAll('.bar'); ~~~ will select all the elements that belong to the class *bar* or the code ~~~ js selection = svg.select('#main-content'); ~~~ will select the element with the id equal to *main-content*. 4a:T441,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.frequency*1000) .attr('width', 20) .attr('height', d => d.frequency*1000) .style('fill', 'purple') ~~~ So, the different attributes are computed in the following form: - The **x** attribute requires knowing 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 frequency. In this example, the value is multiplied by 1,000 to have an extent similar to the SVG height. Note that we have set the *fill* attribute just to change the default color.4b:T494,As you can see, we have had to tune the ratio between the size of the chart (in pixels) and the letter's frequency, which have a very different range of magnitude. This has been 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, if we don't consider the margin, but let's assume that we have a defined margin:4c:T419, // cirlechartwithaxis = { const svg = d3.create("svg") .attr("width", width2) .attr("height", height2) .attr("viewBox",[0, 0, width2, height2]); const widthScaleC = d3.scaleBand() .domain(alphaSortedData.map(d=>d.letter)) .range([margin.left, width2 - margin.right]) const xAxisC = g => g .attr("transform", `translate(-10,${height2/2 + widthScaleC.step()/2})`) .call(d3.axisBottom(widthScaleC) .ticks(width2 / 80) .tickSizeOuter(0)) const maxR = d3.max(alphaSortedData, d => d.frequency) const radiusScale = d3.scaleSqrt() .domain([0, maxR]) .range([0, widthScaleC.step()/2]); svg.append("g") .call(xAxisC); svg.selectAll("circle") .data(alphaSortedData) .join('circle') .attr('r', d => radiusScale(d.frequency)) .attr('cx', d => widthScaleC(d.letter)) .attr('cy', height2/2) .attr('fill', 'purple') return svg.node() }4d:[{"id":"41a7af1ea21af3592f99c8a02cefbd7f82e19f743fbcd0205d79a2b30533d06333b9fd02e744ff2ea2d16baff5f2d12596ed6597677f1fc5df4de30e45e3c812","href":"https://static.observableusercontent.com/files/41a7af1ea21af3592f99c8a02cefbd7f82e19f743fbcd0205d79a2b30533d06333b9fd02e744ff2ea2d16baff5f2d12596ed6597677f1fc5df4de30e45e3c812","name":"BarPosition.svg","type":"image/svg+xml","lastModified":1666282092632.182,"size":5619},{"id":"ad617d5fb087ecfdeb14b661ef9188ecfd30a8696b9dc033cf12bbd577087d71a42946191df477bb83dc7dc7ef4ef81427eb6e112dcf70c1f0a68eb75f07b18f","href":"https://static.observableusercontent.com/files/ad617d5fb087ecfdeb14b661ef9188ecfd30a8696b9dc033cf12bbd577087d71a42946191df477bb83dc7dc7ef4ef81427eb6e112dcf70c1f0a68eb75f07b18f","name":"circleswithaxis.svg","type":"image/svg+xml","lastModified":1666282092632.182,"size":7050},{"id":"fa5d468df254dc79d836abd79c01b73905da3068da04954c4480783dba83251c6cb12145aa549aadcb94f9699eb8a15b8500fbff9c498d5e9dc29df24ffcddfe","href":"https://static.observableusercontent.com/files/fa5d468df254dc79d836abd79c01b73905da3068da04954c4480783dba83251c6cb12145aa549aadcb94f9699eb8a15b8500fbff9c498d5e9dc29df24ffcddfe","name":"Position@2.svg","type":"image/svg+xml","lastModified":1666282092632.182,"size":6097},{"id":"daa3ec7a72fae9907d90d5649ddc4a1641f1c1640c6a5f99a48bbef164126c35d76b303fadd704d3418668eed36e00d824674d818f0c18a7e39548d116890046","href":"https://static.observableusercontent.com/files/daa3ec7a72fae9907d90d5649ddc4a1641f1c1640c6a5f99a48bbef164126c35d76b303fadd704d3418668eed36e00d824674d818f0c18a7e39548d116890046","name":"Visual Encoding.svg","type":"image/svg+xml","lastModified":1666282092632.182,"size":2288}] 29:{"id":"303c9de2d3e0f23f","slug":null,"title":"A first introduction to D3","thumbnail":"1939d51d873d481fb246b81d5d57bace8332a42880a0f436b1ad296526557025","access_level":"public","create_time":"$D2022-10-20T16:08:12.632Z","update_time":"$D2022-10-20T16:56:01.927Z","view_time":null,"first_public_time":"$D2022-10-20T16:14:49.327Z","has_unpublished_edits":null,"fork":{"id":"190fd0c67c85a58e","slug":null,"title":"A first introduction to D3","owner":{"id":"dc63de81f2766bde","login":"antonbardera","name":""}},"stars":0,"starred":false,"owner":{"type":"team","id":"3d0b4e3ec7e42220","login":"josephricafort","name":"Joseph Ricafort","avatar_url":"https://avatars-next.observableusercontent.com/98de557fc6705b8929316825ea99a949993910a62c69bd71444237f50c5077af","tier":"starter_2024","bio":"See the world 🌏 through data and visuals 🚀","followed_by_you":false,"follows_you":false},"version":1118,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"13742c0768377f5c","login":"josephricafort","name":"Joseph Ricafort","avatar_url":"https://avatars-next.observableusercontent.com/98de557fc6705b8929316825ea99a949993910a62c69bd71444237f50c5077af","tier":null,"bio":"See the world 🌏 through data and visuals 🚀.","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"13742c0768377f5c","login":"josephricafort","name":"Joseph Ricafort","avatar_url":"https://avatars-next.observableusercontent.com/98de557fc6705b8929316825ea99a949993910a62c69bd71444237f50c5077af","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"A first introduction to D3","cells":[{"id":47,"value":"md`# A first introduction to D3`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"[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. D3 is not a monolithic framework that seeks to provide every conceivable feature. Instead, D3 solves the crux of the problem: efficient manipulation of documents based on data. This avoids proprietary representation and affords extraordinary flexibility, exposing the full capabilities of web standards such as HTML, SVG, and CSS.\n\nCurrently, the latest version is ${d3.version}.\n\nTo use D3, we need to include the library in this way:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":660,"value":"d3 = require(\"d3@7\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":662,"value":"d3.version","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"d3v6 = require(\"d3@6\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":665,"value":"d3v6.version","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":667,"value":"d3v7 = require(\"d3@7\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":670,"value":"d3v7.version","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"md`## Data wrangling`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"For the session today, we will use the *alphabet* dataset that has the frequency of each letter in English texts. The datasets contains the 26 letters of the alphabet and for each data element only the letter and the frequency are stored.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":674,"value":"import { alphabet } from \"@observablehq/plot-test-data\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":679,"value":"desiredData = alphabet.data;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"## Chart creation using D3\n\nThe process of creating a chart 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":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":267,"value":"### 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 frequency of each letter. A sketch of the visual encoding may be: ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":274,"value":"FileAttachment(\"Visual Encoding.svg\").image({ width: 420, height : 400 });","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":281,"value":"In this case, we want to codify the letter's frequency 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":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":293,"value":"md`### 2. Create the graphical area`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":324,"value":"In D3, the standard way to proceed is to create an SVG area. \nThis area will consist of the plot area itself, but also some margin (following the [margin conventions](https://observablehq.com/@d3/margin-convention)) to have space to place the axis (⚠️spoiler alert!). \n\nTo do so, we will have to apply this code:\n\n~~~ js\n const margin = ({top: 30, right: 20, bottom: 20, left: 40}); //margin object\n const width = 800; //width of SVG in pixels\n const height = 500; //height of SVG in pixels\n const svg = d3.create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"viewBox\",[0, 0, width, height]);\n~~~\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":760,"value":"FileAttachment(\"Position@2.svg\").image({ width: 620})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":298,"value":"md`### 3. Select the graphical elements`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":355,"value":"$49","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":301,"value":"md`### 4. Bind data to these elements`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":376,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":380,"value":"md`_Credit: [Mike Bostock](https://bost.ocks.org/mike/join/)_`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":307,"value":"md`### 5. Join the data with the visual marks`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":389,"value":"In this step, the **[join()](https://observablehq.com/@d3/selection-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 removes 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.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":311,"value":"md`### 6. Codify the visual channels of the marks`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":410,"value":"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\nAt this point, we can assume to simplify that the margin is zero for all four sides.\n\nBut the origin of the 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":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":432,"value":"FileAttachment(\"BarPosition.svg\").image({width: 620});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":437,"value":"$4a","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":957,"value":"func1 = d => d*1000","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":959,"value":"func2 = function (d) {\n return d*1000;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":962,"value":"func1(0.12);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":966,"value":"func2(0.12);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":445,"value":"md`## Let's draw!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":448,"value":"md`If we merge all the previous code, we will create our **first** D3 chart!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":474,"value":"height = 250;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":476,"value":"width = 600;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"firstchart = {\n\n const svg = d3.create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"viewBox\",[0, 0, 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.frequency*1500)\n .attr('width', 20)\n .attr('height', d => d.frequency*1500)\n .style('fill', 'red') \n .style('stroke', 'black') \n .style('stroke-width', 2); \n\n // Specific to Observable\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"md`## Scales`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":463,"value":"$4b","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":782,"value":"margin = ({top: 30, right: 10, bottom: 40, left: 50});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":793,"value":"Thus, we can define the scale as:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":471,"value":"heightScale = d3.scaleLinear()\n .domain([0,d3.max(desiredData, d => d.frequency)])\n .range([height - margin.bottom, margin.top]);\n ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":988,"value":"desiredData\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":491,"value":"d3.max(desiredData, d => d.frequency);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":990,"value":"height - margin.bottom","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":484,"value":"heightScale(0);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":487,"value":"heightScale(0.127);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":493,"value":"heightScale(0.1);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":815,"value":"heightLogScale(0.001);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":544,"value":"md`Other scales similar to scaleLinear are **scaleLog()** and **scaleSqrt()**.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":560,"value":"heightLogScale = d3.scaleLog()\n .domain(d3.extent(desiredData, d => d.frequency)) //extent returns an Array[2] as [min, max]\n .range([height - margin.bottom, margin.top]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":594,"value":"d3.extent(desiredData, d => d.frequency);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":564,"value":"heightLogScale(d3.min(desiredData, d => d.frequency));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":573,"value":"heightLogScale(0.127);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":576,"value":"heightLogScale(0.1);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":813,"value":"heightLogScale(0.001);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":549,"value":"color = d3.scaleLinear()\n .domain([10, 100])\n .range([\"yellow\", \"white\"]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":801,"value":"Legend(color);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":551,"value":"color(20);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":553,"value":"color(50);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":520,"value":"widthScale = d3.scaleBand()\n .domain(desiredData.map(d=>d.letter))\n .range([margin.left, width - margin.right])\n .padding(0.1);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":873,"value":"desiredData.map(d=>d.letter);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":890,"value":"widthScale(\"A\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":998,"value":"widthScale(\"F\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1000,"value":"widthScale.bandwidth();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":478,"value":"md`Then, the code has to be refactored in this way:` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":483,"value":"chartwithscales = {\n const svg = d3.create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"viewBox\",[0, 0, width, height]);\n \n svg.selectAll('rect')\n .data(desiredData)\n .join('rect')\n .attr('x', d => widthScale(d.letter))\n .attr('y', d => heightScale(d.frequency))\n .attr('width', widthScale.bandwidth())\n .attr('height', d => heightScale(0) - heightScale(d.frequency))\n .style('fill', 'purple');\n \n // Specific to Observable\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":749,"value":"## Axis\n\nA standard element on a plot are the **[axes](https://github.com/d3/d3-axis)**. An axis consists of a path element of class *domain* representing the extent of the scale’s domain, followed by transformed *g* elements of class *tick* representing each of the scale’s ticks. Each tick has a line element to draw the tick line and a text element for the tick label. There are four possible orientations: *d3.axisTop*, *d3.axisBottom*, *d3.axisLeft*, and *d3.axisRight*. In all cases, a scaling function needs to be passed as a parameter. Regardless of the orientation, axes are always rendered at the origin. To change the default position of the axis with respect to the chart, specify a transform attribute on the containing element. Here you have how to do it on the current plot:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":753,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(widthScale)\n .ticks(width / 80)\n .tickSizeOuter(0)\n )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":755,"value":"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.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", 10)\n .attr(\"y\", -20)\n .attr(\"text-anchor\", \"end\")\n .text(\"Frequency\")\n )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":757,"value":"barchartwithaxis = {\n const svg = d3.create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height)\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.selectAll('rect')\n .data(desiredData)\n .join('rect')\n .attr('x', d => widthScale(d.letter))\n .attr('y', d => heightScale(d.frequency))\n .attr('width', widthScale.bandwidth())\n .attr('height', d => heightScale(0) - heightScale(d.frequency))\n .style('fill', 'purple');\n \n // Specific to Observable\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":423,"value":"## Daily task\n\nCreate a set of circles (one for each letter) with a size proportional to its frequency. The final chart has to look like this:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":508,"value":"FileAttachment(\"circleswithaxis.svg\").image({width : 600});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1057,"value":"alphaSortedData = desiredData.sort((a, b) => a.letter.localeCompare(b.letter))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1070,"value":"height2 = 100","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1091,"value":"width2 = 500","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1007,"value":"$4c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"md`## Chart imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"import {chart as barchart} with {desiredData as alphabet, margin} from \"@d3/bar-chart\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"barchart","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":918,"value":"newData = desiredData.slice(4,19);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":920,"value":"import {chart as newbarchart} with {newData as alphabet} from \"@d3/bar-chart\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":922,"value":"newbarchart","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"md`## How to do it out from Observable`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"At the end of this module, we will introduce *Svelte* to create our plots (together with D3). Svelte is a JavaScript framework that facilitates web page reactivity. But if we would like to create a simple chart on an HTML page using Vanilla JavaScript (no framework), you may do something similar to the code below, which starts from an empty SVG tag with a given id on the HTML page:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":122,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"{\n //First remove the current content of the main-chart (from previous cell runs).\n //Probably, out from Observable this step isn't needed\n d3.select('#main-chart').html(null);\n\n //create the plot area \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 .attr(\"viewBox\",[0, 0, width, height]);\n\n //Add X axis\n svg.append(\"g\")\n .call(xAxis);\n\n //Add Y axis\n svg.append(\"g\")\n .call(yAxis);\n\n //Add the bar plot \n svg.selectAll('rect')\n .data(desiredData)\n .join('rect')\n .attr('x', d => widthScale(d.letter))\n .attr('y', d => heightScale(d.frequency))\n .attr('width', widthScale.bandwidth())\n .attr('height', d => heightScale(0) - heightScale(d.frequency))\n .style('fill', 'purple');\n\n //Return 1 to indicate everything is ok \n return 1;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"md`## Apendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":797,"value":"import {Legend} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"1"}} 24:null