31:T53d,Take a closer look at what happens here. First, we selected the HTML list element based on its ID. Then, we selected all the list item elements that are *children* of the list element. By calling the D3 function **`.data()`**, we associated our data values with the selection of list items. Then, we called the D3 function `.join()` for the resulting mapping. Finally, we changed the text and color of the list items as before, except this time we passed custom functions to `.text()` and `.style()` to calculate the text content and its appearance based on the respective data parameters. The **`.join()`** function establishes a mapping between the data elements and the elements in the DOM, which allows us to update one when the other changes. In our case, if the number of data elements and the number of DOM elements match, each DOM element is updated by the following calls to the D3 functions, e.g. `.text()` and `.style()`, which can now take additional parameters about the associated data element to customize their representation. However, if there are more or less DOM elements than data elements, D3 first creates or removes the appropriate number of DOM elements to match the data for us. For a more in-depth explanation of D3 *joins* see [this tutorial](https://observablehq.com/@d3/learn-d3-joins?collection=@d3/learn-d3).32:T4a4,// 🛠️ Uncomment the following lines (select lines, then Ctrl + Shift + /) and run cell (Shift + Enter or click blue play button). // { // // Remove text and any previously added SVGs from container. // d3.select("#container") // .text('') // .selectAll('svg') // .remove(); // // Create the SVG image. // const svg = d3.select("#container") // Select the HTML element that will contain the SVG image. // .append("svg") // Append / create a new SVG image. // .attr("width", 200) // Set the width of the image. // .attr("height", 200) // Set the height of the image. // .style("border", "1px solid black"); // Give the image an outline. // svg.append("circle") // Add a circle to the SVG image. // .attr("id", "mycircle") // Give the circle an ID so we can refer to it later. // .attr("cx", 100) // Set the x center of the circle. // .attr("cy", 100) // Set the y center of the circle. // .attr("r", 50) // Set the radius of the circle. // .style("fill", "purple") // Set the fill color of the circle. // .style('stroke', 'black'); // The the outline color of the circle. // return svg; // Return the svg image. // }33:T4da,{ // Calculate the sizing of the rectangles. const barPadding = 5; // Space between rectangles. const barWidth = chartWidth / barChartData.length; // Width of one bar / rectangle. const maxValue = Math.max(...barChartData); // Maximum data value. // Create the SVG image with the chosen width and height. const svg = d3.create('svg') .attr('width', chartWidth) .attr('height', chartHeight); // Create the bars / rectangles in the image. svg.selectAll('rect') // Select all existing rectangles (even if there are none at first). .data(barChartData) // Connect the data to the selection. .join('rect') // Create a mapping between the data values and rectangles. .attr('x', (d, i) => barWidth * i) // Set the horizontal position of the rectangle. .attr('y', d => chartHeight - chartHeight * d / maxValue) // Set the vertical position of the rectangle. .attr('width', barWidth - barPadding) // Set the rectangle width. .attr('height', d => chartHeight * d / maxValue) // Set the rectangle height. .style('fill', 'pink') // Set the rectangle fill color. .style('stroke', 'black'); // Set the rectangle outline color. // Return the HTML element of the SVG object. return svg.node(); }34:T484,## Scales in D3 [*Scales in D3*](https://github.com/d3/d3-scale) are used to map a dimension of abstract data to a visual representation. This is useful, for example, when we want to convert data values into image coordinates in order to place or size graphical elements in our SVG images. Scales are also useful to normalize data values or convert them to colors. D3 provides several predefined scale functions for different purposes and data types. For our bar chart, we are mostly interested in D3's `.scaleLinear()` and `.scaleBand()`. The goal is to create reusable mappings between data values and image coordinates to clean up our code. Continuous scales, like [**`.scaleLinear()`**](https://observablehq.com/@d3/d3-scalelinear), map a continuous, quantitative *input domain* to a continuous *output range*. We will use this scale to convert data values to image coordinates. Ordinal Scales, like [**`.scaleBand()`**](https://observablehq.com/@d3/d3-scaleband), map a discrete *input domain* to a discrete *output range*. We will use this scale to convert indices of the data array to separate positions of rectangles / bars in image coordinates.35:T5c1,### E1. Add color coding The rectangles in the bar chart all have the same color. We can change that! Instead of mapping the data values only to the height of the rectangles, we can also introduce color coding based on the data. The goal is to give each rectangle an individual color value that represents the associated data value. In this way, low data values could be represented by small, light colored rectangles and high data values could be represented by high, dark colored rectangles. To achieve this, we need a mapping function that takes a data value as input and returns a color as output. We also need to specify a color palette to be used for the mapping. In general, choosing *"good"* colors is a complex topic. Fortunately, we can refer to [D3's predefined color schemes](https://observablehq.com/@d3/color-schemes). Many of them are based on [ColorBrewer](https://colorbrewer2.org/), which offers several well-designed color schemes. Since we are dealing with continuous data, a sequential color scheme, e.g. from light to dark, is reasonable. To get you started, here is some code to create a color scale function that expects normalized values (between 0 and 1) and returns a color value. Try integrating it to color the bar chart. You'll need to create another scale function to convert data values to normalized values. You can then select all the rectangles in the chart and use both functions together to set the rectangle color based on the data.36:T6b5,### E4. Add animated transitions For the last exercise, we also want to visualize other data. But this time, we want to create a smooth transition in the visualization as the data changes (just like the [visualization at the very beginning of this notebook](https://observablehq.com/@mroehlig/visualization-of-univariate-data-with-d3#cell-2608)). Adding animated transitions can help the reader understand the differences between datasets. For example, imagine we have live data that changes dynamically. If we just switched between different static images of the data, the differences in values would be difficult to understand. Also, when comparing datasets, it is much easier to understand the differences if we can observe how the bars in the graph chart get bigger or smaller. For this to work, you must first create a function that creates different datasets. This can be as simple as creating another array of random values for each function call. But you can also load a different dataset for each function call, or visualize a different column from a data table (see Observable's [*"plot-test-data-repository"*](https://observablehq.com/@observablehq/plot-test-data)). With the new data, you can then update the plot by selecting the elements in the plot that you want to change, assigning the new data to the selection, adding a [D3 *transition*](https://github.com/d3/d3-transition), and then changing their properties based on the data values (e.g., bar position, size, and color). To trigger the update, you can either create a button with [Observable's Inputs](https://observablehq.com/@observablehq/input-button) or an animation loop. Here is an example of a simple D3 transition to get you started.37:T44b,### E5. Try another visualization for univariate data So far, we have mainly dealt with bar charts. However, this is not the only visualization technique for univariate data. There are many other designs you can try. Particularly simple but effective are the [warming stripes](https://en.wikipedia.org/wiki/Warming_stripes) visualizations invented by [Joan E Sheldon](http://sheldonfiberdesigns.net/the-globally-warm-scarf/), [Ellie Highwood](https://elliehighwood.com/2017/06/12/climatechangecrochet-the-global-warming-blanket/), and [Ed Hawkins](https://showyourstripes.info/). Later, a similar strip visualization showing [biodiversity decline]((https://biodiversitystripes.info/global)) was added by [Miles Richardson](https://findingnature.org.uk/2022/08/10/biodiversity-stripes/). Let's try to recreate such a visualization based on the topics we have covered so far! The temperature anomaly data for the warming stripes can, for example, be extracted from the Met Office Hadley Centre's [HadCRUT5 dataset](https://www.metoffice.gov.uk/hadobs/hadcrut5/), which is attached to this notebook. 38:T505,{ const svg = d3.create('svg') .attr('width', width) .attr('height', 50) .style("border", "1px solid black"); const circle = svg.append('circle') .data([manipulatedData]) .attr('cx', d => d.value) .attr('cy', 25) .attr('r', 15) .style('fill', '#CBC3E3') .style('stroke', 'black') .on('pointerenter', (e) => { d3.select(e.target).style("stroke-width", 2); }) .on('pointerleave', (e) => { d3.select(e.target).style("stroke-width", 1); }); const text = svg.append('text') .attr('x', 10) .attr('y', 25) .text('data value: ' + manipulatedData.value) .style('pointer-events', 'none') .style('user-select', 'none'); const dragstart = function(event, d) { d3.select(this).style("stroke-width", 3); }; const dragend = function(event, d) { d3.select(this).style("stroke-width", 1); }; const dragging = function(event, d) { circle.attr("cx", d.value = Math.max(20, Math.min(width - 20, event.x))); text.text('data value: ' + Math.floor(manipulatedData.value)); }; circle.call(d3.drag() .on("start", dragstart) .on("drag", dragging) .on("end", dragend)); return svg.node(); }39:[{"id":"a427035b15aaa1dde545773708ff3b7eb01de098e72740e820efce962628e3b1acd7e16acb0ced74b3c9cfc3b1951e9cbfe9de0440d4e8b1981a605e0c4ad4e8","href":"https://static.observableusercontent.com/files/a427035b15aaa1dde545773708ff3b7eb01de098e72740e820efce962628e3b1acd7e16acb0ced74b3c9cfc3b1951e9cbfe9de0440d4e8b1981a605e0c4ad4e8","name":"HadCRUT5_global_annual.csv","type":"text/csv","lastModified":1687361704369.547,"size":6946}] 2f:{"title":"Visualization of univariate data with D3 (exercise)","cells":[{"id":0,"value":"# Visualization of univariate data with D3 (exercise)","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"A step-by-step demonstration of creating a visualization of univariate data with [D3.js](https://d3js.org/). Univariate data are a type of data which consists of observations on only a single characteristic or attribute. The complete implementation with solutions to the exercises can be found in [this notebook](https://observablehq.com/@mroehlig/visualization-of-univariate-data-with-d3-solution).","pinned":false,"hidden":false,"mode":"md"},{"id":3088,"value":"finalBarChart","pinned":false,"hidden":false,"mode":"ojs"},{"id":1825,"value":"There are several excellent D3 tutorials for visualizing data. Examples are:\n\n- [Learn D3 by Mike Bostock](https://observablehq.com/collection/@d3/learn-d3)\n- [D3 Tutorial by Uviz](https://observablehq.com/collection/@uvizlab/d3-tutorial)\n- [D3 Tutorial by Marius Hogräfer](https://observablehq.com/collection/@mahog/davi-d3-tutorial)\n\nThis notebook borrows ideas from these tutorials. Here, we will have a brief introduction to some of the basics of D3 and then focus on creating an interactive bar chart visualization.\n\nThe steps to create the visualization (+ exercises step) are as follows:\n1. [D3 introduction](#cell-816)\n2. [DOM manipulation](#cell-11)\n3. [Connecting data to the DOM](#cell-62)\n4. [Working with SVGs](#cell-912)\n5. [Creating a simple bar chart](#cell-79)\n6. [Scales in D3](#cell-103)\n7. [Axes in D3](#cell-109)\n8. [Creating a bar chart with scales and axes](#cell-1499)\n9. [Exercises](#cell-1682)","pinned":false,"hidden":false,"mode":"md"},{"id":816,"value":"## D3 introduction\n\nD3 is a JavaScript library for data visualization. It is used to bind data to Document Object Model (DOM) elements of a web page in order to update the web elements based on the data (hence the name of the library \"Data-Driven Documents\"). D3 is considered interactive, flexible, and expressive because it directly interacts with the DOM.\n\nSo, D3 allows us to interactively create, adjust, or remove content from a website. It can be used to manipulate nearly all DOM elements, including `

`, ``, `

`, etc. However, the main focus of D3 is on creating visualizations with SVG (Scalable Vector Graphics) elements. SVGs are drawn by the browser itself by directly rasterizing each described point and line instead of filling a space with a predefined number of pixels. This ensures that SVG images can adapt to different screen sizes without having to worry about problems related to image resolution, such as pixelated visualizations. ","pinned":false,"hidden":false,"mode":"md"},{"id":11,"value":"## DOM manipulation\n\nBefore we create an SVG visualization, we will first take a look at some basic concepts of D3. For this, we will work with some simple text elements.\n\nD3 offers various functions for manipulating the DOM. One of the most important ones is `.select()`. This function returns a reference to an element of the DOM, which we can use to modify the element. Let's consider the following HTML snippet:","pinned":false,"hidden":false,"mode":"md"},{"id":828,"value":"helloWorld = html`

Hello World!

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":834,"value":"If we want to change the content *\"Hello World!\"* to something else, we must first select the paragraph element `p` that contains the text. We can do that by using the ID of the element with D3's `.select()` function:","pinned":false,"hidden":false,"mode":"md"},{"id":838,"value":"myElement = d3.select('#select-by-id') // Refer to an ID of an element with a \"#\" at the beginning ","pinned":true,"hidden":false,"mode":"ojs"},{"id":840,"value":"This gives us a reference to the HTML element. We can now use the reference to read the HTML content...","pinned":false,"hidden":false,"mode":"md"},{"id":842,"value":"myElement.text()","pinned":true,"hidden":false,"mode":"ojs"},{"id":857,"value":"...or to change the HTML content. Uncomment the following code and check the cell with HTML snippet above to see the effect:","pinned":false,"hidden":false,"mode":"md"},{"id":859,"value":"// myElement.text('Hello D3!') // 🛠️ Uncomment and run cell (Shift + Enter or click play button). ","pinned":true,"hidden":false,"mode":"ojs"},{"id":878,"value":"The D3 `.select()` function is used to select a single HTML element (the first match, to be precise). However, we often want to manipulate more than one element at a time. For this purpose, D3 provides the `.selectAll()` function. This function is used to retrieve references of all elements matching a query. For example, consider the list in the following HTML snippet:","pinned":false,"hidden":false,"mode":"md"},{"id":921,"value":"html`

One
Two
Three
Four
Five

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":930,"value":"Here, we can use `.selectAll()` to get a reference to each list item element. We can then manipulate the appearance of the elements using the D3 functions `.attr()` or `.style()`. Concatenating these commands allows us to edit the text in the list and give each list item a new color.","pinned":false,"hidden":false,"mode":"md"},{"id":935,"value":"// 🛠️ Uncomment the following lines (select lines, then Ctrl + Shift + /) and run cell (Shift + Enter or click play button). \n\n// d3.select('.select-by-class') // Select the list element using the class attribute.\n// .selectAll('li') // Select all list item elements.\n// .text('Hello list!') // Change the text of each list item.\n// .style('color', 'red') // Change the text color of each list item.","pinned":true,"hidden":false,"mode":"ojs"},{"id":62,"value":"## Connecting data to the DOM\n\nGiving all HTML elements in a selection the same content is usually not very useful. Fortunately, D3 allows us to manipulate DOM elements based on data. This way, we can vary the content and appearance of each element to represent the associated data values. As an example, consider this simple array of data values.","pinned":false,"hidden":false,"mode":"md"},{"id":64,"value":"listOfDataValues = [10, 20, 30, 40, 50]","pinned":true,"hidden":false,"mode":"ojs"},{"id":1005,"value":"Let's say we want to convert the data array into an HTML list element and represent each data value by a list item. To do so, we first define a new HTML snippet:","pinned":false,"hidden":false,"mode":"md"},{"id":68,"value":"html`

No connected data yet...

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":1009,"value":"Now we can fill the list with information. In the cell below, we set the text of the list items to the indices and data values of the array and change the color of the list items when the associated data value exceeds a threshold.","pinned":false,"hidden":false,"mode":"md"},{"id":66,"value":"// 🛠️ Uncomment the following lines (select lines, then Ctrl + Shift + /) and run cell (Shift + Enter or click blue play button). \n\n// d3.select('#data-list') // Select the list element by its ID.\n// .selectAll('li') // Select all list item elements that are children of the list element.\n// .data(listOfDataValues) // Connect the data to the selection.\n// .join('li') // For each data value, create or update the associated list item element.\n// .text((d, i) => \"The data at index #\" + i + \" is \" + d) // Change the text of the list item based on the data value.\n// .style(\"color\", d => d > 30 ? \"purple\" : \"black\") // Change the text color of the list item based on the data value.","pinned":true,"hidden":false,"mode":"ojs"},{"id":1057,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":912,"value":"## Working with SVGs\n\nSo far, we have used D3 only for editing text in HTML elements. When we create a visualization, we need to work with graphical elements such as circles, lines and rectangles. So, let's see how we can create [scalable vector graphics in the browser](https://developer.mozilla.org/en-US/docs/Web/SVG). Consider the following HTML document, containing an SVG image created *without* D3.","pinned":false,"hidden":false,"mode":"md"},{"id":1341,"value":"exampleDocument = html`\n\n\n \n \n \n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":1356,"value":"As before, we could use D3 to reference and edit the SVG image and its elements. However, most of the time we will be creating a visualization from scratch. So, let's recreate the SVG image using D3, starting with an empty container, adding the needed SVG elements, and giving the circle a different color.","pinned":false,"hidden":false,"mode":"md"},{"id":13,"value":"html`

No SVG image added yet...

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":15,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":1406,"value":"As you can see, with D3 we can create an SVG image and add graphical elements to it using JavaScript code. We can also reference these elements and customize their appearance, as we did before with text. For this to work, we first need a reference to the part of the SVG image that we want to manipulate, e.g., the circle. Uncomment and run the following cells one after the other to see how they affect the image.","pinned":false,"hidden":false,"mode":"md"},{"id":39,"value":"// circle = d3.select(\"#mycircle\") // 🛠️ Get a reference of the circle in the SVG image.","pinned":true,"hidden":false,"mode":"ojs"},{"id":41,"value":"// circle.attr(\"r\", 85); // 🛠️ Change the radius of the circle.","pinned":true,"hidden":false,"mode":"ojs"},{"id":48,"value":"// circle.style(\"fill\", \"green\"); // 🛠️ Change the fill color of the cirle.","pinned":true,"hidden":false,"mode":"ojs"},{"id":79,"value":"## Creating a simple bar chart\n\nNow that we covered the basics, we can create our first data visualization with D3 — a bar chart. We start with the preparation of data to be visualized. For a bar chart, a simple array of numeric values is sufficient.","pinned":false,"hidden":false,"mode":"md"},{"id":81,"value":"barChartData = [50, 90, 120, 250, 200, 150, 100, 50, 10, 40, 80, 60, 40, 70, 50, 90, 120, 60, 40, 70, 50, 60, 40, 70]","pinned":true,"hidden":false,"mode":"ojs"},{"id":1428,"value":"Next, we specify the dimensions of your image. Here, we take the width of the notebook cell (defined by Observable) and specify the height to our liking.","pinned":false,"hidden":false,"mode":"md"},{"id":1435,"value":"chartWidth = width // The default value of \"width\" is the width of a notebook cell (if not overwritten elsewhere in the notebook)","pinned":true,"hidden":false,"mode":"ojs"},{"id":242,"value":"chartHeight = 250;","pinned":true,"hidden":false,"mode":"ojs"},{"id":1441,"value":"What is left to do is to create our SVG image with the data. The goal is to represent each data value in the array by a colored rectangle in our bar chart. Following the example in the section on [*\"Connecting data to the DOM\"*](https://observablehq.com/@mroehlig/visualization-of-univariate-data-with-d3#cell-62), we create an SVG element, establish a mapping between the data elements and SVG rectangles, and then adjust the height of the rectangles to represent the associated data values.","pinned":false,"hidden":false,"mode":"md"},{"id":85,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":101,"value":"And there you have it, our first data visualization *with* D3! 🎉\n\nThere are a few things we can improve. For example, notice that we had to map the data values to the bar height in pixels by first normalizing the data values and then scaling them with the height of the image. We actually did that in two places. Also, we only see bars with different heights, but we can't read the actual data values from the chart. So, the code could be a bit cleaner and the interpretability better. Conveniently, D3 provides solutions to both problems: *scales* and *axes*.","pinned":false,"hidden":false,"mode":"md"},{"id":103,"value":"$34","pinned":false,"hidden":false,"mode":"md"},{"id":1652,"value":"To illustrate the advantage of using scales, let's specify an area in our image where we want to draw our bar chart.","pinned":false,"hidden":false,"mode":"md"},{"id":252,"value":"margin = ({ left: 30, top: 10, right: 10, bottom: 30 }) // Defines the area of the chart in the image.","pinned":true,"hidden":false,"mode":"ojs"},{"id":1642,"value":"We create a linear scale that will help us convert data values to vertical positions along the y-axis in our image.","pinned":false,"hidden":false,"mode":"md"},{"id":105,"value":"yScale = d3.scaleLinear() // Get a linear scale object.\n .domain([0, d3.max(barChartData)]) // Set input min / max (0 to max data value). \n .range([chartHeight - margin.bottom, margin.top]) // Set output min / max (top and bottom edge of chart area).","pinned":true,"hidden":false,"mode":"ojs"},{"id":1644,"value":"When we call this scale function with a data value, we get back a y-position in your image. Note that the function also takes care of the image area, so we do not need to duplicate this code in our drawing calls.","pinned":false,"hidden":false,"mode":"md"},{"id":107,"value":"dataValueInImageCoordinates = yScale(25) // Returns y position in pixels given a data value.","pinned":true,"hidden":false,"mode":"ojs"},{"id":1656,"value":"We can make a similar mapping between data array indices and positions on the x-axis by using the `scaleBand()` function.","pinned":false,"hidden":false,"mode":"md"},{"id":259,"value":"xScale = d3.scaleBand() // Get a scale object for discrete bands.\n .domain(d3.range(barChartData.length)) // Set input min / max (0 to max data array index). \n .range([margin.left, chartWidth - margin.right]) // Set output min / max (left to right edge of chart area).\n .padding(0.1); // Set padding between bands.","pinned":true,"hidden":false,"mode":"ojs"},{"id":1663,"value":"Calling this scale functions with an array index gives us the horizontal position of each bar in our chart. The image area is again taken into account and we can also specify a spacing between the individual bars. ","pinned":false,"hidden":false,"mode":"md"},{"id":265,"value":"dataIndexInImageCoordinates = xScale(5) // Returns x position in pixels given an index of the data array.","pinned":true,"hidden":false,"mode":"ojs"},{"id":109,"value":"## Axes in D3\n\nPositioning and sizing graphical elements based on data is an important part of designing a visualization. Using D3's scaling functions makes it easier for us to calculate appropriate image coordinates for specific data values. However, we also need to ensure that the properties of the graphical elements are easy to interpret. [*Axes in D3*](https://github.com/d3/d3-axis) provide a way to visualize the mapping between data values and position properties of graphical elements. An axis component renders human-readable reference marks for a given scales. Adding labels to an axis aids in understanding the data when viewing our visualization.","pinned":false,"hidden":false,"mode":"md"},{"id":1949,"value":"Typically, we need a graphical axis representation for each dimension of our coordinate system. In our case we, work with the Cartesian X and Y coordinate system. So let's start with the vertical Y-axis.","pinned":false,"hidden":false,"mode":"md"},{"id":122,"value":"{\n // Create the SVG image to draw the axis.\n const width = 60; // Fixed width for vertical axis.\n const svg = d3.select(DOM.svg(width, chartHeight)); // <- Shortcut for creating SVGs in Observable.\n\n // 🧪 Experiment with other scales to see how the axis changes in the image. 🧪\n // For example, try to set a different input domain.\n // const yScale = d3.scaleLinear() // Get a linear scale object.\n // .domain([0, 10]) // ⬅️ Set input min / max. \n // .range([chartHeight - margin.bottom, margin.top]) // Set output min / max.\n \n // Create the SVG elements for the axis.\n svg.append('g') // Create a SVG group.\n .call(d3.axisLeft(yScale)) // Call the D3 axis method.\n .attr('transform', `translate(${margin.left}, 0)`); // Move the axis to the chart area.\n\n // Return the HTML element of the SVG object.\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1958,"value":"The axis will help to interpret the heights of the rectangles. Here, we placed it on the left side of our drawing area (the most common position). If we want, we can also place it on the right side. For this, we only have to change the axis function from `.axisLeft()` to `axisRight()` and adjust the transformation to move it to the right edge of the drawing area.","pinned":false,"hidden":false,"mode":"md"},{"id":1966,"value":"Let's now also create an axis component for the horizontal X axis. We can use the labels of this axis to give each rectangle a name. In this example, we'll just take the array index for the label. If we were working with other data, each bar might represent a different category, so we would adjust the labels accordingly. ","pinned":false,"hidden":false,"mode":"md"},{"id":112,"value":"{\n // Create the SVG image to draw the axis.\n const height = 60; // Fixed height for horizontal axis.\n const svg = d3.select(DOM.svg(chartWidth, height)); // <- Shortcut for creating SVGs in Observable.\n\n // 🧪 Experiment with other scales to see how the axis changes in the image. 🧪\n // For example, try to set a different input domain or padding.\n // const xScale = d3.scaleBand() // Get a scale object for discrete bands.\n // .domain(['One', 'Two', 'Three', 'Four', 'Five']) // ⬅️ Set input min / max.\n // .range([margin.left, chartWidth - margin.right]) // Set output min / max (left to right edge of chart area).\n // .padding(0.5); // Set padding between bands.\n \n // Create the SVG elements for the axis.\n svg.append('g') // Create a SVG group.\n .call(d3.axisBottom(xScale)) // Call the D3 axis method for the group.\n .attr('transform', `translate(0, ${height - margin.bottom})`); // Move the axis to the chart area.\n\n // Return the HTML element of the SVG object.\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1499,"value":"## Creating a bar chart with scales and axes","pinned":false,"hidden":false,"mode":"md"},{"id":2095,"value":"We can now create an improved version of our simple bar chart. This time we implement the mapping using scale functions and add axis components to enhance readability. Let's put everything into a `createBarChart()` function.","pinned":false,"hidden":false,"mode":"md"},{"id":142,"value":"function createBarChart(width, height, margin, xScale, yScale, data) {\n // Create the SVG.\n const svg = d3.select(DOM.svg(width, height));\n \n // Create and append the Y axis.\n svg.append('g')\n .attr('class', 'y-axis') // Give the axis a class name, so we can refer to it later (see excercise E2)\n .attr('transform', `translate(${margin.left},0)`)\n .call(d3.axisLeft(yScale));\n\n // Create and append the X axis.\n svg.append('g')\n .attr('class', 'x-axis') // Give the axis a class name, so we can refer to it later (see excercise E2)\n .attr('transform', `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(xScale));\n \n // Create and join the bars / rectangles.\n svg.selectAll('rect')\n .data(data)\n .join('rect')\n .attr('x', (_, i) => xScale(i))\n .attr('y', d => yScale(d))\n .attr('width', xScale.bandwidth())\n .attr('height', d => yScale(0) - yScale(d))\n .style('stroke', 'black')\n .attr('fill', 'pink');\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2105,"value":"Now, we only have to call our `createBarChart()` function with appropriate parameters to create a bar chart for given data. ","pinned":false,"hidden":false,"mode":"md"},{"id":2069,"value":"barChart = createBarChart(chartWidth, chartHeight, margin, xScale, yScale, barChartData)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2109,"value":"Our bar chart is a simple way to visualize univariate data. However, there is still a lot we can improve. Try some of the exercises to get an idea of how you can develop the visualization further.","pinned":false,"hidden":false,"mode":"md"},{"id":1682,"value":"## Exercises\n\nThe following exercises provide some ideas on how to extend the visualization. Try them out or come up with your own extensions!\n\nSee [this notebook](https://observablehq.com/@mroehlig/visualization-of-univariate-data-with-d3-solution) for solutions to the exercises.","pinned":false,"hidden":false,"mode":"md"},{"id":1832,"value":"$35","pinned":false,"hidden":false,"mode":"md"},{"id":1552,"value":"// Returns a color given a normalized data value.\nfunction getColorScale(schemeName) {\n // Return D3's predefined color interpolator by name.\n return d3[`interpolate${schemeName}`]\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":494,"value":"// An array of available color scheme names.\ncolorSchemeNames = ['Blues', 'Greens', 'Greys', 'Oranges', 'Purples', 'Reds', 'Inferno', 'Magma', 'Plasma', 'Warm', 'Cool', 'CubehelixDefault', 'BuGn', 'BuPu', 'GnBu', 'OrRd', 'PuBuGn', 'PuBu', 'PuRd', 'RdPu', 'YlGnBu', 'YlGn', 'YlOrBr', 'YlOrRd']","pinned":true,"hidden":false,"mode":"ojs"},{"id":2234,"value":"// Create a selection box to choose a color scheme by name.\nviewof selectedColorSchemeName = Inputs.select(colorSchemeNames, {value: \"RdPu\", label: \"Color scheme\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2244,"value":"// Create the color scale function.\ncolorScale = getColorScale(selectedColorSchemeName)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1556,"value":"// Use the color scale function to turn normalized values into colors.\nnormalizedValueInColor = colorScale(0.5)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2314,"value":"Here is a visualization of the colors produced when the input is varied from zero (left) to one (right):","pinned":false,"hidden":false,"mode":"md"},{"id":2269,"value":"drawGradient(colorScale) // Visualization of the color scale.","pinned":false,"hidden":false,"mode":"ojs"},{"id":1667,"value":"Continue by creating a scale function to normalize the data values and adjust the coloring of the rectangles....","pinned":false,"hidden":false,"mode":"md"},{"id":1837,"value":"### E2. Add axes and tick labels\n\nThis exercise is about further improving the readability of the chart. The axis components we added earlier lack labels indicating which data properties are displayed. So far, this hasn't been much of a problem, since we've only been working with synthetic data anyway. However, let's imagine that the values mapped to the Y-axis are labeled *\"Measured value\"* and the indices on the X-axis are labeled *\"Observation\"*. So, the first task is to label each axis with the appropriate labels. To do this, first select the SVG chart, then the axis to be labeled (hint: we gave the axes a class name), and add a text element with the appropriate properties and placement.","pinned":false,"hidden":false,"mode":"md"},{"id":2637,"value":"yAxisLabel = '↑ Measured value'","pinned":true,"hidden":false,"mode":"ojs"},{"id":2635,"value":"xAxisLabel = 'Observation'","pinned":true,"hidden":false,"mode":"ojs"},{"id":2648,"value":"Creating a text element looks something like this, but you need to customize the code to make it work with the chart:","pinned":false,"hidden":false,"mode":"md"},{"id":2644,"value":"d3.create(\"text\") // <- ⚠️ Use append instead of create when attaching the element to a selected axis.\n .attr(\"x\", chartWidth) // Set x position of label (e.g., at the right edge of the chart).\n .attr(\"y\", margin.bottom - 4) // Set y position of label (e.g., at the bootom edge of the chart).\n .attr(\"fill\", \"currentColor\") // Set text color.\n .attr(\"text-anchor\", \"end\") // Set text anchor.\n .text(\"Example label for X-axis\") // Set label text.\n .node() // <- ⚠️ Only for preview, remove when attaching to the axis!","pinned":true,"hidden":false,"mode":"ojs"},{"id":2747,"value":"As a second task, imagine that each observation in the chart also has a name. So far, we have labeled each bar only with the index of the data array. Now, we want to display the names of each observation below the bars. The names of the observations are given in the following array:","pinned":false,"hidden":false,"mode":"md"},{"id":2750,"value":"dataIndexLabels = barChartData.map((_, i) => numberToLetters(i))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2756,"value":"To label the bars you have to modify the text of the X-axis using the [`.tickFormat()`](https://observablehq.com/@d3/axis-ticks#cell-338) function of D3's `.axisBottom()` function with the label array.","pinned":false,"hidden":false,"mode":"md"},{"id":1841,"value":"### E3. Visualize other data\n\nWhen creating a visualization, it's often a good idea to try it out with another dataset to see how well it generalizes. You can either use your own data or search online for a suitable dataset. A good source to try different datasets on Observable is the [*\"plot-test-data-repository\"*](https://observablehq.com/@observablehq/plot-test-data). For example, you can import the \"alphabet\" dataset, which contains measurements of the relative frequency of letters in common English plain text.","pinned":false,"hidden":false,"mode":"md"},{"id":370,"value":"import { alphabet as newDataset } from \"@observablehq/plot-test-data\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":2548,"value":"newDataset","pinned":true,"hidden":false,"mode":"ojs"},{"id":2893,"value":"To be compatible with our bar chart implementation, you need to extract the data values and labels into separate arrays. Then, try to define a new function `createBarChartLabeled()` containing all the functions discussed so far and use it to create a visualization of the imported data.","pinned":false,"hidden":false,"mode":"md"},{"id":1843,"value":"$36","pinned":false,"hidden":false,"mode":"md"},{"id":2969,"value":"replay = Inputs.button(\"Animate circle!\", { reduce: () => {\n d3.select(animatedSvg) // Select the SVG.\n .select('circle') // Select the circle.\n .attr('cx', 20) // Reset the position.\n .transition() // Add a transition.\n .duration(2000) // Set the transition duration in milliseconds.\n .attr('cx', width - 20); // Set the final value when the transition ends.\n}})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2948,"value":"animatedSvg = {\n const svg = d3.select(DOM.svg(width, 50)) // Create an SVG.\n .style(\"border\", \"1px solid black\"); // Add a border.\n\n const circle = svg.append('circle') // Append a circle.\n .attr('cx', 20) // Set the x position.\n .attr('cy', 25) // Set the y position.\n .attr('r', 15) // Set the radius.\n .style('fill', '#CBC3E3') // Set the fill color.\n .style('stroke', 'black'); // Set the outline color.\n\n yield svg.node(); // Return the HTML element.\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":3109,"value":"$37","pinned":false,"hidden":false,"mode":"md"},{"id":3122,"value":"temperatureAnomalyDataset = FileAttachment(\"HadCRUT5_global_annual.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":3124,"value":"temperatureAnomalyValues = temperatureAnomalyDataset.map(d => d['Anomaly (deg C)'])","pinned":true,"hidden":false,"mode":"ojs"},{"id":3130,"value":"You also need a matching diverging color scale to map the data values to the color of the stripes. For this, we first need to get the extent of the data values...","pinned":false,"hidden":false,"mode":"md"},{"id":3138,"value":"temperatureAnomalyRange = d3.extent(temperatureAnomalyValues)","pinned":true,"hidden":false,"mode":"ojs"},{"id":3142,"value":"...and then create the scale function.","pinned":false,"hidden":false,"mode":"md"},{"id":3132,"value":"scaleAnomalyPuOr = d3.scaleDiverging(t => d3.interpolateRdBu(1 - t)) // Invert interpolation value to get correct colors.\n .domain([temperatureAnomalyRange[0], 0, temperatureAnomalyRange[1]]) // Set zero a mid point of color scale.","pinned":true,"hidden":false,"mode":"ojs"},{"id":3145,"value":"You can now continue to create an SVG image with each data value represented by a colored rectangle to create the warming stripes visualization! 🛠️","pinned":false,"hidden":false,"mode":"md"},{"id":1279,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":1315,"value":"In D3, `joins` are usually used to adjust a visualization based on changing data. However, we can also go the other way and edit the data by changing the visualization. Below is an example of changing the value of a data object by dragging a circle.","pinned":false,"hidden":false,"mode":"md"},{"id":1321,"value":"First, we initialize a data object.","pinned":false,"hidden":false,"mode":"md"},{"id":1074,"value":"manipulatedData = ({ value: width / 5 }) // Initialize the data object (also sets the intial circle position).","pinned":true,"hidden":false,"mode":"ojs"},{"id":1319,"value":"Now, we represent the data with a circle. You can now try to change the data values by dragging the circle!","pinned":false,"hidden":false,"mode":"md"},{"id":1076,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":492,"value":"## Helpers","pinned":false,"hidden":false,"mode":"md"},{"id":497,"value":"colorInterpolators = colorSchemeNames.map(p => ({ name: p, interpolator: d3[`interpolate${p}`]}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":525,"value":"import {Legend} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":2879,"value":"Duplicate a SVG image.","pinned":false,"hidden":false,"mode":"md"},{"id":1913,"value":"function duplicateSVG(originalNode, width, height) {\n const original = d3.select(originalNode);\n const other = original.clone(true);\n const copy = d3.select(DOM.svg(original.attr('width'), original.attr('height')));\n copy.append(() => other.node());\n return copy.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2881,"value":"Draw a color gradient with a given color scale function.","pinned":false,"hidden":false,"mode":"md"},{"id":2267,"value":"function* drawGradient(colors, n = 256) {\n // Create a new canvas with it's width set to the number of colors and it's height to one.\n const ctx = DOM.context2d(n, 1, 1);\n // Adjust the styling of the canvas to it is displayed larger.\n ctx.canvas.style.width = \"100%\";\n ctx.canvas.style.height = \"40px\";\n ctx.canvas.style.imageRendering = \"pixelated\";\n // Fill the canvas's pixels based on the given color function.\n for (let i = 0; i < n; ++i) {\n // For each color draw a colored rectangle in the size of a pixel.\n ctx.fillStyle = colors(i / (n - 1));\n ctx.fillRect(i, 0, 1, 1);\n }\n\n // Return the canvas.\n yield ctx.canvas;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2883,"value":"Convert numbers to combination of letters.","pinned":false,"hidden":false,"mode":"md"},{"id":2393,"value":"// Thanks to @gooostaw (https://stackoverflow.com/a/64456745)\nfunction numberToLetters(num) {\n let letters = '';\n while (num >= 0) {\n letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'[num % 26] + letters;\n num = Math.floor(num / 26) - 1;\n }\n \n return letters;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":3092,"value":"Import final visualization from notebook with solutions.","pinned":false,"hidden":false,"mode":"md"},{"id":3094,"value":"import { finalBarChart } from \"@mroehlig/visualization-of-univariate-data-with-d3-solution\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W39","stdlib":"1","titling":"auto"}