31:T92f, ### D3? Having spent significant time covering the basics of the SVG language, the basic control structures of Javascript like `for` loops, and the reactive data flow logic of Observable and its Inputs library, we can turn our attention *finally* to D3 itself, which will be our topic for the remainder of the semester. We have talked up D3 alot. For more technical info, check out this [nice PDF](http://www.jeromecukier.net/presentations/d3-tutorial/S01%20-%20introduction.pdf) or this [Reddit AMA with Mike Bostock](https://www.reddit.com/r/dataisbeautiful/comments/3k3if4/hi_im_mike_bostock_creator_of_d3js_and_a_former/), the author of the libary. D3 is by far the most in-demand technical competency for data visualizers, and it is by a wide-margin the most commonly-used data visualization coding toolkit. The power and flexiblity of D3 is derived from how it *abstracts* away some of the fundamental structures of Javascript. We will no longer see `for` loops to iterate through datasets and manipulate arrays, but rather we will place our trust in D3 to contort the raw data behind the scenes. Our code will shrink in complexity and length, but significantly increase — dramatically on occasion — in head-scratching *what the heck is going on in my own code?*. Debugging will get harder, as with abstraction comes necessary opacity. But, it is worth it — D3 automates so much of the pain of coding visualizations, and for many data visualizers, working without it would be like a communication designer losing Adobe software. *But*, we still need to know how to do `for` loops, and all of the other introductory material covered in previous weeks. D3 gives us a wide variety of tools to transform, mine, and smoothe out data — but it still requires native Javascript structures to guide its behaviors. For example, D3 can help us take a dataset of daily exercise duration and heart rate data, scale everything to pixels, choose *semantic* colors, and draw an interactive, animated, beautiful, and legible data visualization dashboard; but, it cannot (on its own) take that same dataset and **transpose** it into a list of heavy, medium, and light workouts. These *data synthesizing transformations* are often our goal as *design-led* data visualizers, and so we will need to return often to the utilities of "vanilla" Javascript.32:T50d,{ //svg variables const height = 100; //create SVG artboard const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width) .attr("height", height); //simple data const exampleData = [9, 2, 7.1, 5, 0, 1, 6, 3.15, -3, 13]; //draw horizontal line svg .append("line") .attr("x1", 200) .attr("y1", height / 2) .attr("x2", 600) .attr("y2", height / 2) .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", "2"); //loop through all items in dataset for (let i = 0; i < exampleData.length; i = i + 1) { //convert data to pixels const xPosition = exampleScale(exampleData[i]); //draw circle for each item svg .append("circle") .attr("cx", xPosition) .attr("cy", height / 2) .attr("r", 5) .attr("fill", "orange") .attr("stroke", "black") .attr("stroke-width", "2"); //draw text for each item svg .append("text") .attr("x", xPosition) .attr("y", height / 2 - 20) .style("font-family", "courier") .style("font-size", 10) .style("text-anchor", "middle") .text(exampleData[i] + "→" + exampleScale(exampleData[i])); } //show visualization in Observable return svg.node(); }33:T4dc,{ //svg variables const height = 100; //create SVG artboard const svg = d3.create("svg").attr("width", width).attr("height", height); //dataset const exampleData = [1, 10, 100, 1000, 10000, 100000]; //draw horizontal line svg .append("line") .attr("x1", 200) .attr("y1", height / 2) .attr("x2", 600) .attr("y2", height / 2) .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", "2"); //loop through all items in dataset for (let i = 0; i < exampleData.length; i = i + 1) { //convert data to pixels const xPosition = exampleLogScale(exampleData[i]); //draw circle for each item svg .append("circle") .attr("cx", xPosition) .attr("cy", height / 2) .attr("r", 5) .attr("fill", "orange") .attr("stroke", "black") .attr("stroke-width", "2"); //draw text for each item svg .append("text") .attr("x", xPosition) .attr("y", height / 2 - 20) .style("font-family", "courier") .style("font-size", 10) .style("text-anchor", "middle") .text(exampleData[i] + "→" + Math.round(exampleLogScale(exampleData[i]))); } //show visualization in Observable return svg.node(); }34:T53f,{ //svg variables const width = 800; const height = 100; //create SVG artboard const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width) .attr("height", height); //dataset const exampleData = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; //draw horizontal line svg .append("line") .attr("x1", 200) .attr("y1", height / 2) .attr("x2", 600) .attr("y2", height / 2) .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", "2"); //loop through all items in dataset for (let i = 0; i < exampleData.length; i = i + 1) { //convert data to pixels const xPosition = exampleFlipScale(exampleData[i]); //draw circle for each item svg .append("circle") .attr("cx", xPosition) .attr("cy", height / 2) .attr("r", 5) .attr("fill", "orange") .attr("stroke", "black") .attr("stroke-width", "2"); //draw text for each item svg .append("text") .attr("x", xPosition) .attr("y", height / 2 - 20) .style("font-family", "courier") .style("font-size", 10) .style("text-anchor", "middle") .text( exampleData[i] + "→" + Math.round(exampleFlipScale(exampleData[i])) ); } //show visualization in Observable return svg.node(); }35:T40f, ----- ### Statistical Tools and Accessor Functions Very often, we do not know the bounding low and high numbers of a dataset — especially when ingesting dynamic or live data. For example, if we wanted to transform our census data to pixel coordinates with a scale, what should the domain be? We would need to manually find the highest and lowest population values, which is not ideal, and sometimes not even possible with dynamic data (since any new data element might be higher or lower than the previous max or min). So, it can be helpful to extract those values programmatically. This is a very common coding pattern when working with scales, and so D3 provides [excellent statistical utilities](https://observablehq.com/@d3/d3-extent) for deriving meaningful data from a dataset. Take a look at the code below, click through its output, and run it a few times to see the numbers change. Take note specifically of `d3.extent()`. It gives us everything we need to setup scale domains in exactly the right format (a two item array)! 36:T68f,{ //svg variables const width = 800; const height = 100; //create SVG artboard const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width) .attr("height", height); //create empty dataset const exampleData = []; //fill up random dataset for (let i = 0; i < 5; i = i + 1) { exampleData.push(Math.random() * 50); } //extract the min and the max of the dataset const exampleExtent = d3.extent(exampleData); //create scale to convert data to pixels const exampleScale = d3.scaleLinear().domain(exampleExtent).range([200, 600]); //draw horizontal line svg .append("line") .attr("x1", 200) .attr("y1", height / 2) .attr("x2", 600) .attr("y2", height / 2) .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", "2"); //loop through all items in dataset for (let i = 0; i < exampleData.length; i = i + 1) { //convert data to pixels const xPosition = exampleScale(exampleData[i]); //draw circle for each item svg .append("circle") .attr("cx", xPosition) .attr("cy", height / 2) .attr("r", 5) .attr("fill", "orange") .attr("stroke", "black") .attr("stroke-width", "2"); //draw text for each item svg .append("text") .attr("x", xPosition) .attr("y", height / 2 - 20) .style("font-family", "courier") .style("font-size", 10) .style("text-anchor", "middle") .text( exampleData[i].toFixed(1) + "→" + exampleScale(exampleData[i]).toFixed(1) ); } //show visualization in Observable return svg.node(); }37:T687,----- ### Color Scales Another kind of scale, which we ❤️ above most others, is the ability for D3 to take a number and spit out a color proportionally, in the same way we spit out pixel values proporationally with regular scales. This lets us use color *semantically* - color with meaning! These are called *color scales*, and there are a bunch of [built-in gradients](https://observablehq.com/@d3/color-schemes) (important link!) that we can sample, as well as the ability to make our own. Normally, we use the built-in color scales since they were [designed with data](https://colorbrewer2.org/#type=sequential&scheme=BuGn&n=3) to be *perceptually-uniform*. We will do a deep dive into *semantic* color choice in future weeks, as it is a complicated and important topic worthy of coversation and additional study. The names of these scales are universal across many different libraries and programming languages, and are in many ways a shared language across all data visualization practitioners. Note: everyone loves *viridis* and hates *turbo*. Color scales are used just like linear or exponential scales. But, we cannot set the domain or range of a color scale — so, we need to instead contort our data to fit with what color scales expect, which is a number between 0 and 1. We call such values, defined as a position between 0 and 1, a **parameter**. So, we often need to make a scale for the color scales. Sigh. Change the value fed to the scale below to generate data-driven color values. Note that color scales clamp! Any number below or above the [0,1] domain of the color scale maps to the lowest or highest value in the gradient, respectively.38:T921,{ //svg variables const width = 800; const height = 100; //create SVG artboard const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .attr("width", width) .attr("height", height); //simple data const exampleData = [1, 2, 3, 4, 5, 6, 7, 8, 9]; //create scale to convert data to pixels const pixelScale = d3.scaleLinear().domain([0, 10]).range([200, 600]); //create scale to convert data to number between 0 and 1 const parameterScale = d3.scaleLinear().domain([0, 10]).range([0, 1]); const scaleNames = ["viridis", "magma", "cividis"]; for (let i = 0.25; i <= 0.75; i = i + 0.25) { //draw horizontal line svg .append("line") .attr("x1", 200) .attr("y1", height * i) .attr("x2", 600) .attr("y2", height * i) .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", "2"); //draw label svg .append("text") .attr("x", 190) .attr("y", height * i) .style("font-family", "courier") .style("font-size", 10) .style("text-anchor", "end") .style("alignment-baseline", "middle") .text(scaleNames[i * 4 - 1]); } //loop through all items in dataset for (let i = 0; i < exampleData.length; i = i + 1) { //convert data to pixels const xPosition = pixelScale(exampleData[i]); //convert data to number between 0 and 1 const parameterData = parameterScale(exampleData[i]); //draw circle for each item svg .append("circle") .attr("cx", xPosition) .attr("cy", height * 0.25) .attr("r", 10) .attr("fill", d3.interpolateViridis(parameterData)) .attr("stroke", "black") .attr("stroke-width", "2"); //draw circle for each item svg .append("circle") .attr("cx", xPosition) .attr("cy", height * 0.5) .attr("r", 10) .attr("fill", d3.interpolateMagma(parameterData)) .attr("stroke", "black") .attr("stroke-width", "2"); //draw circle for each item svg .append("circle") .attr("cx", xPosition) .attr("cy", height * 0.75) .attr("r", 10) .attr("fill", d3.interpolateCividis(parameterData)) .attr("stroke", "black") .attr("stroke-width", "2"); } //show visualization in Observable return svg.node(); }39:T490, ##### Single Conditions Though we have not been covered conditionals formally yet, their behavior should be familiar since we have used them to limit the looping of `for` loops previously. Programming conditionals borrow from a [linguistic structure](https://en.wikipedia.org/wiki/Conditional_sentence) common to many languages providing alternate options, and in Javascript are introduced by the keywords `if(){}`, `else if(){}`, and `else{}`. The behavior is straightforward — each `if` checks whether or not a simple question is true or not. *Less than* (<), *greater than* (>), *less than or equal to* (<=), *greater than or equal to* (>=), *equal to* (==), and *not equal to* (!=) are all options for comparison. Note the *double* equal sign (==) on *equal to*, it is easy to forget! In the event of an `if()` condition being true, the code within the following containing braces is run. Otherwise, that code is skipped and processing advances to any number of sequential `else if()` blocks in order, before landing in a final catch-all `else()` block. Note how the code below demonstrates conditional, fallback behaviors based on the value of the slider. 3a:T790,betterCirclePlot = { //svg variables const height = 200; const margin = 20; //create SVG artboard const svg = d3.create("svg").attr("width", width).attr("height", height); //background color const background = svg .append("rect") .attr("width", width) .attr("height", height) .attr("fill", "#eeeeff"); //scales to transform data to relevant visualization values const indexToX = d3 .scaleLinear() .domain([0, states.length]) .range([margin, width - margin]); const populationToRadius = d3 .scaleLinear() .domain(d3.extent(states, (d) => d.population)) .range([1, 15]); const populationToParameter = d3 .scaleLinear() .domain(d3.extent(states, (d) => d.population)) .range([0, 1]); //loop through all items in dataset for (let i = 0; i < states.length; i++) { //save current state in variable for reuse const state = states[i]; //draw circle for each item, using scales! svg .append("circle") .attr("cx", indexToX(i)) .attr("cy", height / 2) .attr("r", populationToRadius(state.population)) .attr("fill", d3.interpolateCool(populationToParameter(state.population))) .attr("opacity", 1); //check if i is even or odd (i%2 == 0), and assign alternating y positions //if i is even, set the labelY to height divided by two, minus 25 //otherwise, i is odd, and labelY should be set to height divided by two, plus 25 const labelY = i % 2 == 0 ? height / 2 - 25 : height / 2 + 25; //draw labels svg .append("text") .attr("x", indexToX(i)) .attr("y", labelY) .attr("font-size", 10) .attr("font-family", "Courier") .attr("text-anchor", "middle") .attr("dominant-baseline", "middle") //substring cuts certain characters from a string .text(stateLUT[states[i].name]); } //show visualization in Observable return svg.node(); }3b:T6d4,betterRectPlot = { //svg variables const height = 800; const margin = 30; const leftMargin = 150; //create SVG artboard const svg = d3.create("svg").attr("width", width).attr("height", height); //background color const background = svg .append("rect") .attr("width", width) .attr("height", height) .attr("fill", "#eeeeff"); //scales to transform data to relevant visualization values const indexToY = d3 .scaleLinear() .domain([0, sortedStates.length]) .range([margin, height - margin]); const populationToWidth = d3 .scaleLinear() .domain(d3.extent(sortedStates, (d) => d.population)) .range([50, width - (leftMargin + margin)]); const populationToParameter = d3 .scaleLinear() .domain(d3.extent(sortedStates, (d) => d.population)) .range([0, 1]); const barHeight = (height - margin * 2) / sortedStates.length; //loop through all items in dataset for (let i = 0; i < sortedStates.length; i++) { //save current state for reuse const state = sortedStates[i]; //draw rect for each item svg .append("rect") .attr("x", leftMargin) .attr("y", indexToY(i)) .attr("width", populationToWidth(state.population)) .attr("height", barHeight) .attr( "fill", d3.interpolateCool(populationToParameter(state.population)) ); //draw labels for each item svg .append("text") .attr("x", leftMargin - 10) .attr("y", indexToY(i) + barHeight / 2) .attr("font-size", 10) .attr("font-family", "Courier") .attr("text-anchor", "end") .attr("dominant-baseline", "middle") .text(state.name); } //show visualization in Observable return svg.node(); }3c:T776,md` ----- ### Data Visualization Challenge : Scatter Plot! Let's create a census-based scatterplot, to compare the counts of speakers of different languages in American households. The census variable **group** [B16001](https://api.census.gov/data/2023/acs/acs1/groups/B16001.html) contains data on the use of many different languages across the country. The code here will be very similar to our 2x2 exercise two weeks ago! Choose two languages from the [linked list of variables](https://api.census.gov/data/2023/acs/acs1/groups/B16001.html) — making sure you grab the variable codes that end in "E" for "Population **E**stimate and not "EA", "M", or "MA" which instead return "Estimation Annotation", "Margin of Error", and "Margin of Error Annotation" data respectively — and create a scatterplot comparing states. Take a look at the example visualizations and code below (which you can copy and paste into your own Observable notebooks... don't bother importing) to view how you can grab multiple census variables in one API request. Also note that the Census API might return \`null\` in the event of zero people matching the query (which importantly does not necessarily mean there are 0 people, but instead that the statistical sampling did not have enough data to report a value! We will discuss this distinction next week). A ternary operation can clean that up for us, no problem! You can make these look however you want! And please include Inputs to control data and visualization choices. You will see in the screenshots below the addition of some orienting minor grid lines, as well as major axis lines around the outside. Extra goal: can you calculate the *percentage of each state's total population* that speaks each language and show that in a second plot? Extra extra goal: could you use a look up table and Inputs to allow a user to control which language is shown on both axes? `3d:[{"id":"a6e3f79e942dca8a103c84bfbd7c8b5d6d65460cc75910e9c53e20f054a7ab46062227fbd629d887a381bdcee38b29fa3aaba929ac9ac4fcc9cc64b75e23142b","href":"https://static.observableusercontent.com/files/a6e3f79e942dca8a103c84bfbd7c8b5d6d65460cc75910e9c53e20f054a7ab46062227fbd629d887a381bdcee38b29fa3aaba929ac9ac4fcc9cc64b75e23142b","name":"langCount.png","type":"image/png","lastModified":1726857920827.417,"size":216480},{"id":"aa327d8ae160b8a2532fb0ea842597561c36f92b1e836c6457608dfc6a44097ee8ffcda4d0a3b875f05b5a8296da7d6c9c6f9270f5e53d2bf619c1e13422eef3","href":"https://static.observableusercontent.com/files/aa327d8ae160b8a2532fb0ea842597561c36f92b1e836c6457608dfc6a44097ee8ffcda4d0a3b875f05b5a8296da7d6c9c6f9270f5e53d2bf619c1e13422eef3","name":"langPercent@1.png","type":"image/png","lastModified":1726857920827.417,"size":251739}] 2f:{"title":"Week 6 : D3 Scales, Statistics, and Charts","cells":[{"id":0,"value":"\n# Week 6 : D3 Scales, Statistics, and Charts\n## Transforming numbers, generating colors with data, and \n","pinned":false,"hidden":false,"mode":"md"},{"id":15,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":1932,"value":"\n-----\n### D3 Scales\n\nConverting data units to visualization units consistently and controllably is at the core of data visualization. [D3 scales](https://github.com/d3/d3-scale) let us do that, so we never need to do manual math to convert data to pixels again!\n\nScales are functions that have an input **domain** and an output **range**, and all they do is convert numbers from one to the other. The example scale below takes numbers between 0 and 10, and returns numbers between 200 and 600. 0 becomes 200, 10 becomes 200, 5 becomes 400, and everything else *scales* proportionally. If you are familiar with the [Arduino](https://www.arduino.cc/reference/en/) or [Processing](https://processing.org/reference), scales do the same thing and more that `map()` does in those languages.\n","pinned":false,"hidden":false,"mode":"md"},{"id":1934,"value":"exampleScale = d3.scaleLinear().domain([0, 10]).range([200, 600])","pinned":true,"hidden":false,"mode":"ojs"},{"id":175,"value":"\nThe domain is the low and the high number that define the boundaries of the input data to be considered. The range, similarly, sets the low and the high number that define the boundaries of the data spit out. Most often, the domain is defined by a dataset's units, and the range is set to the pixels available in visualization space.\n\nPlay with the value fed to `exampleScale()` below to see how the output changes. Also adjust the values in the `.domain()` and `.range()` as well to see how everything changes.\n","pinned":false,"hidden":false,"mode":"md"},{"id":1938,"value":"exampleScale(5)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1936,"value":"\nNote that scales (by default) do not **clamp**. We can ask the scale above to transform -3, which is smaller than the lowest number in our domain, and the scale will return 80, which is *proportionally* smaller than the smallest number in our range.\n","pinned":false,"hidden":false,"mode":"md"},{"id":200,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":2428,"value":"latScale = d3.scaleLinear().domain([-90, 90]).range([300, 900]).clamp()","pinned":true,"hidden":false,"mode":"ojs"},{"id":2430,"value":"latScale(200)","pinned":true,"hidden":false,"mode":"ojs"},{"id":187,"value":"\nMost often, we use linear scaling as above, which transforms numbers in one domain to a different range uniformly. Also available to us, amongst others, are logarithmic and exponential scales, which have been used throughout the COVID pandemic to communicate viral spread to middling effect. [Humans are bad at intuiting exponential growth.](https://www.pnas.org/content/117/28/16264)\n\nWe can think about these other more exotic scales as scaling each number differently, depending on its magnitude. Here, even though the numbers are spread out by different amounts from one another, they show up evenly spaced on the line.\n","pinned":false,"hidden":false,"mode":"md"},{"id":1958,"value":"exampleLogScale = d3\n .scalePow()\n .exponent(0.01)\n .domain([1, 10000])\n .range([200, 600])","pinned":true,"hidden":false,"mode":"ojs"},{"id":254,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":377,"value":"\nThe order of values entered as domains and ranges is meaningful. This makes it possible to flip-around datasets, like we saw possible with that confusing subtraction exercise last week. Might be hard to see the difference in the code below, but the only change is in order of the items in `.range()`. Big and then small, rather than the usual small and then big.","pinned":false,"hidden":false,"mode":"md"},{"id":1964,"value":"exampleFlipScale = d3.scaleLinear().domain([0, 10]).range([600, 200])","pinned":true,"hidden":false,"mode":"ojs"},{"id":383,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":298,"value":"$35","pinned":false,"hidden":false,"mode":"md"},{"id":2189,"value":"d3.extent([20, 103, 13, 4, 40, 13, 12, 193])","pinned":true,"hidden":false,"mode":"ojs"},{"id":2191,"value":"Often, we want to find the minimum and maximum of some value in an object, rather than just the low and high in an array. Here, we have an array of colors with their peak wavelength. You will see this same structure many times in D3 and contemporary javascript. The technical D3 term for this is pattern is an **accessor function**, though you will find it often just referred to as an **arrow function** since the signature looks kind of like an arrow \"=>\".\n\nYou could read this code below as *D3 should find the extent (the min and the max) of a dataset of colors, it can do so by looking at each color, calling each `c` one at a time, and comparing the `wavelength` of each `c`.* This is a `for` loop, pretending to be a simple function call.","pinned":false,"hidden":false,"mode":"md"},{"id":2231,"value":"colors = [\n { waveLength: 425, color: \"Indigo\" },\n { waveLength: 630, color: \"Orange\" },\n { waveLength: 470, color: \"Blue\" },\n { waveLength: 600, color: \"Yellow\" },\n { waveLength: 400, color: \"Violet\" },\n { waveLength: 665, color: \"Red\" },\n { waveLength: 550, color: \"Green\" }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":2197,"value":"MinAndMax = d3.extent(colors, (c) => c.waveLength)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2247,"value":"D3 offers many other cool statistical tools, which work in exactly the same way.","pinned":false,"hidden":false,"mode":"md"},{"id":302,"value":"{\n const min = d3.min(colors, (c) => c.waveLength);\n const max = d3.max(colors, (c) => c.waveLength);\n const mean = d3.mean(colors, (c) => c.waveLength);\n const median = d3.median(colors, (c) => c.waveLength);\n const extent = d3.extent(colors, (c) => c.waveLength);\n\n return {\n minimum: min,\n maximum: max,\n average: mean,\n median: median,\n extent: extent,\n data: colors\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":320,"value":"\nWe will very often combine extents and scales like this. Note that the lowest number of the dataset will transform into the lowest number of the range, so this approach automatically **clamps** the data. Data will never fall outside of the range, which is often the goal (but not always!).\n","pinned":false,"hidden":false,"mode":"md"},{"id":277,"value":"$36","pinned":true,"hidden":false,"mode":"ojs"},{"id":401,"value":"$37","pinned":false,"hidden":false,"mode":"md"},{"id":420,"value":"{\n const parameterScale = d3.scaleLinear().domain([0, 10]).range([0, 1]);\n\n return d3.interpolateViridis(parameterScale(5));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":457,"value":"md`\nTo clarify, the data flow is like this...\n\n\\`\\`\\`\nNumbers between a [min,max] -> \n -> regular scale with domain [min,max] and range [0,1] -> \n -> scaled numbers between [0,1] -> \n -> choice of color scale -> \n -> color values\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":450,"value":"$38","pinned":true,"hidden":false,"mode":"ojs"},{"id":1353,"value":"-----\n### Conditionals\nOne of the other issues we often encounter in data processing and visualization is *differential action*; splitting our data elements into separate cases, and handling those cases independently. For this purpose, we write [conditional control structures](https://www.javascript.com/learn/conditionals) to create branching behavior in code.\n`","pinned":false,"hidden":false,"mode":"md"},{"id":1371,"value":"$39","pinned":false,"hidden":false,"mode":"md"},{"id":1385,"value":"viewof moonPhase = Inputs.range([0.0, 1.0], {\n label: \"Moon Phase\",\n value: 0.5,\n step: 0.01\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1392,"value":"{\n if (moonPhase >= 0.93) {\n return \"🌕\";\n } else if (moonPhase >= 0.79) {\n return \"🌖\";\n } else if (moonPhase >= 0.65) {\n return \"🌗\";\n } else if (moonPhase >= 0.51) {\n return \"🌘\";\n } else if (moonPhase >= 0.37) {\n return \"🌑\";\n } else if (moonPhase >= 0.23) {\n return \"🌒\";\n } else if (moonPhase >= 0.09) {\n return \"🌓\";\n } else {\n return \"🌕\";\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1478,"value":"md`\nImportantly, the comparisons that we use in conditionals resolve to simple **true** or **false** values when used on their own. In this way, we can think of conditional statements as *encoded questions*.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1483,"value":"viewof booleanSlider = Inputs.range([0.0, 1.0], {\n label: \"Larger than .5?\",\n value: 0.5,\n step: 0.01\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1488,"value":"booleanSlider > 0.5","pinned":true,"hidden":false,"mode":"ojs"},{"id":1375,"value":"\n##### Compound Conditionals\nConditionals structures can check for multiple comparisons at the same time by way of **compound conditional operators**. Two conditionals can be joined with `||` (pronounced \"or\"), which will exercute if *either* condition is true. Alternatively, `&&` (pronounced \"and\") requires *both* conditionals to be true for the code to run.\n\nNote that this might make some of our calculator logic from last week simpler! ","pinned":false,"hidden":false,"mode":"md"},{"id":1446,"value":"viewof distance = Inputs.range([0.0, 1.0], {\n label: \"Distance to Travel\",\n value: 0.5,\n step: 0.01\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1449,"value":"viewof time = Inputs.range([0.0, 1.0], {\n label: \"Time Available\",\n value: 0.5,\n step: 0.01\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1444,"value":"{\n if (distance > 0.75 && time < 0.25) {\n return \"Recommended Transit Method: 🚀\";\n } else if (distance > 0.5 && time < 0.5) {\n return \"Recommended Transit Method: 🏎\";\n } else if (distance > 0.25 && time < 0.75) {\n return \"Recommended Transit Method: 🚲\";\n } else if (distance >= 0 && time <= 1) {\n return \"Recommended Transit Method: 🛼\";\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1428,"value":"\n##### Ternary Operator\n\nWe already saw this in action, but let us cover it formally. Because writing a whole conditional structure takes lots of time, Javascript has a shortcut called the **ternary operator**, which allows us to write conditionals much more quickly. \"Ternary\" means *containing three parts*, which is a good description!\n\nTernary operators start with a conditional comparison followed by a `?` (remember that these are encoded questions!), then a value for true followed by a `:` followed by a value for false. It's easier to understand via looking at the code. ","pinned":false,"hidden":false,"mode":"md"},{"id":1505,"value":"viewof grapeAge = Inputs.range([0.0, 100], {\n label: \"How old are you?\",\n value: 18\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1503,"value":"grapeAge < 21 ? \"🍇->🧃\" : \"🍇->🍷\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1531,"value":"\nThese ternary operations are commonly encountered with a confusing arithmetic operation called a **modulus** or *modulo*, represented by a percent sign `%`. Remember when you were younger and, when doing division problems, you would have a remainder at then end? The modulo operator is like that! \n","pinned":false,"hidden":false,"mode":"md"},{"id":1550,"value":"viewof modulo = Inputs.range([1, 9], { label: \"9 %\", step: 1 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1545,"value":"9 % modulo","pinned":true,"hidden":false,"mode":"ojs"},{"id":1571,"value":"md`\nThe modulus operator is *very commonly* used to check if a number is even or odd via a ternary expression.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1575,"value":"viewof isItEvenOrOdd = Inputs.range([1, 9], {\n label: \"Is it even or odd?\",\n step: 1,\n value: 3\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1583,"value":"isItEvenOrOdd % 2 == 0 ? \"Even\" : \"Odd\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":2390,"value":"\n-----\n### Sorting\n\nWe can [sort an array with regular javascript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort), but [D3 makes it so much easier](https://observablehq.com/@d3/d3-ascending)!\n\nJust like the accessor functions described above, we can use D3 to sort objects by one of their keys. The syntax is a bit different since we pass two values, but it is basically the same thing. \n\n*Given the list of `states`, treat each one in the list as `a` and compare its `name` with the `name` of the next item in the array `b`. Compare `a.name` and `b.name`, and put them in an `ascending` order.*","pinned":false,"hidden":false,"mode":"md"},{"id":2406,"value":"alphabeticalStates = states.sort((a, b) => d3.ascending(a.name, b.name))","pinned":true,"hidden":false,"mode":"ojs"},{"id":2415,"value":"alphabeticalStates[0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":2417,"value":"And to compare by `population` instead...","pinned":false,"hidden":false,"mode":"md"},{"id":2409,"value":"populationSortedStates = states.sort((a, b) =>\n d3.ascending(a.population, b.population)\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2413,"value":"populationSortedStates[0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":522,"value":"-----\n### Back to the Visualizations!\nLet's use all these techniques to improve our simple visualization from last week.\n\nNote in the code below the use of...\n\n- Linear scales and dynamic extents for placement\n- Color scales for assigning colors to each element based on data\n- Ternary operator for alternating the placement of the labels and avoiding collisions","pinned":false,"hidden":false,"mode":"md"},{"id":2263,"value":"censusData = await d3.json(\n \"https://api.census.gov/data/2023/acs/acs1?get=NAME,B01001_001E&for=state:*\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2266,"value":"states = {\n const statesData = [];\n\n //note we are starting at 1 to skip the first row!\n for (let i = 1; i < censusData.length; i++) {\n const state = censusData[i];\n statesData.push({\n name: state[0],\n population: parseInt(state[1]),\n fipsCode: state[2]\n });\n }\n return statesData;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2272,"value":"stateLUT = ({\n Alabama: \"AL\",\n Alaska: \"AK\",\n Arizona: \"AZ\",\n Arkansas: \"AR\",\n California: \"CA\",\n Colorado: \"CO\",\n Connecticut: \"CT\",\n Delaware: \"DE\",\n \"District of Columbia\": \"DC\",\n Florida: \"FL\",\n Georgia: \"GA\",\n Hawaii: \"HI\",\n Idaho: \"ID\",\n Illinois: \"IL\",\n Indiana: \"IN\",\n Iowa: \"IA\",\n Kansas: \"KS\",\n Kentucky: \"KY\",\n Louisiana: \"LA\",\n Maine: \"ME\",\n Montana: \"MT\",\n Nebraska: \"NE\",\n Nevada: \"NV\",\n \"New Hampshire\": \"NH\",\n \"New Jersey\": \"NJ\",\n \"New Mexico\": \"NM\",\n \"New York\": \"NY\",\n \"North Carolina\": \"NC\",\n \"North Dakota\": \"ND\",\n Ohio: \"OH\",\n Oklahoma: \"OK\",\n Oregon: \"OR\",\n Maryland: \"MD\",\n Massachusetts: \"MA\",\n Michigan: \"MI\",\n Minnesota: \"MN\",\n Mississippi: \"MS\",\n Missouri: \"MO\",\n Pennsylvania: \"PA\",\n \"Puerto Rico\": \"PR\",\n \"Rhode Island\": \"RI\",\n \"South Carolina\": \"SC\",\n \"South Dakota\": \"SD\",\n Tennessee: \"TN\",\n Texas: \"TX\",\n Utah: \"UT\",\n Vermont: \"VT\",\n Virginia: \"VA\",\n Washington: \"WA\",\n \"West Virginia\": \"WV\",\n Wisconsin: \"WI\",\n Wyoming: \"WY\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":527,"value":"$3a","pinned":true,"hidden":false,"mode":"ojs"},{"id":2376,"value":"viewof sortKey = Inputs.radio([\"name\", \"population\"], {\n label: \"Sort by:\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2383,"value":"sortedStates = states.sort((a, b) => d3.ascending(a[sortKey], b[sortKey]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1304,"value":"$3b","pinned":true,"hidden":false,"mode":"ojs"},{"id":601,"value":"\n-----\n### No Longer Boring Charts \nThey look better than last week, right?\n\nWe cleaned-up our code with scales, added some semantic color, and used statisitical properties to enable our charts to ingest data dynamically. That's a big deal! But there is lots more to learn about.\n","pinned":false,"hidden":false,"mode":"md"},{"id":840,"value":"\n-----\n### Next Steps\nThere are some additional improvements that we will discuss in class next week, in particular replacing what is now a *very clunky* `for` loop structure with the much more elegant `d3.data()` and `d3.enter()` data joining structure necessary for advanced animation and interactivity. \n\nAfter that, we will soon encounter more specific data types and handling utilities such as [geographic polygons and shapefiles](https://github.com/d3/d3-geo), [bundling and hierarchical data](https://github.com/d3/d3-chord/tree/v2.0.0) structures, and [D3's time comprehensions](https://github.com/d3/d3-time-format). \n\nBut, we will certainly be pausing here for a bit, to ensure that all of this new stuff clicks after our breakneck pace so far. ","pinned":false,"hidden":false,"mode":"md"},{"id":1603,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs"},{"id":1610,"value":"//B01001_001E is Total Population\n//B16001_105E is Arabic speaking population\n//B16001_003E is Spanish speaking populations\n\nlanguageData = await d3.json(\n \"https://api.census.gov/data/2023/acs/acs1?get=NAME,B01001_001E,B16001_105E,B16001_003E&for=state:*\"\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1619,"value":"languageStates = {\n const data = [];\n\n for (let i = 1; i < languageData.length; i++) {\n const state = languageData[i];\n data.push({\n name: state[0],\n totalPopulation: parseInt(state[1]),\n arabic: state[3] == null ? 0 : parseInt(state[2]),\n arabicPercent: state[3] == null ? 0 : parseInt(state[2]) / state[1],\n spanish: state[3] == null ? 0 : parseInt(state[3]),\n spanishPercent: state[3] == null ? 0 : parseInt(state[3]) / state[1],\n fipsCode: state[4]\n });\n }\n return data;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1796,"value":"md`As an example, here is Arabic speakers compared against Spanish speakers.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1855,"value":"FileAttachment(\"langCount.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1865,"value":"md`\nAnd the same language comparison, but percentage of total population. In both plots color is set by total population.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1834,"value":"FileAttachment(\"langPercent@1.png\").image()","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3d","stdlib":"1","titling":"auto"}