30:[{"id":"23b528e1ee06d5091ac8bc5728bb5bd6b6fd2d363bb71b286fc233e61756bf6059fc3bfbad798601606ce2419e78b8dc067ce1f102a107b6088e728231ef95ba","href":"https://static.observableusercontent.com/files/23b528e1ee06d5091ac8bc5728bb5bd6b6fd2d363bb71b286fc233e61756bf6059fc3bfbad798601606ce2419e78b8dc067ce1f102a107b6088e728231ef95ba","name":"Piano_to_F.jpeg","type":"image/jpeg","lastModified":1620529546258.591,"size":111727},{"id":"2a330586a3bec188f042a2090174612d635156128349512386b83cb1fd8ef64e54416dd9657a6f7e6f1283821dbba964023a074840d54ca54a560603cb41bf5c","href":"https://static.observableusercontent.com/files/2a330586a3bec188f042a2090174612d635156128349512386b83cb1fd8ef64e54416dd9657a6f7e6f1283821dbba964023a074840d54ca54a560603cb41bf5c","name":"solar-system.csv","type":"text/csv","lastModified":1620516570542.882,"size":1031}] 2e:{"title":"Scales","cells":[{"id":0,"value":"md`# Scales\n\nOne of the most basic functions of data visualization is encoding, which we covered last week. All quantitative encoding is basically a unit conversion–_mph_ to _px_, _°C_ to _inches_, _cases per day_ to _opacity %_, _failures per day_ to _angle_. Let's start with an analog example: a mercury thermometer. Thermometers encode temperature units into distance units. Degrees to centimeters. In the case of mercury thermometers, a physical property of mercury is used to do this encoding from reality (aka measurement).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"html`Credit: Wikipedia`","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"md`## Linear scales\n\nThe **domain** is the number space you're mapping from. In the case of the thermometer, it's roughly 0°C to 35°C. The **range** is the number space you're mapping to–in this case something like 0cm to 12cm.\n\nWith digital visualizations, we might ask the computer to convert a numerical value into pixel space or color space.\n\nThe math of this encoding is taught in middle school, but is surprisingly confusing. You can understand it if you need to, but don't worry if it doesn't fit in your brain right away. Here's a javascript function that encodes temperature data to pixel data. We want to use a domain of 0°C to 35°C and a range of 0px to the \\`width\\` of the Observable document.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":174,"value":"md`### Manual scales`","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"function tempToPxScale(value) {\n return width + (0 - width) * ((value - 35) / (0 - 35));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":73,"value":"md`[Observable inputs](https://observablehq.com/@observablehq/inputs) give us a great way to play with this function:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"viewof temp = Range([0, 35], { value: 22, label: \"°C\", step: 1 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":78,"value":"html`

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":83,"value":"md`Now, let's say you wanted to change the color of the bar from green to red as the range slider worked. You'd have to make a second function to map temperature values to color values ranging from 0 to 255. See if you can complete the function below to make the color change as the size of the div does.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"function tempToColorChannelScale(value) {\n return Math.random() * 255; // Your answer here!\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":109,"value":"summary(\n \"Peek at the answer\",\n `\n\\`\\`\\`js\nreturn 255 + (0 - 255) * ((value - 35) / (0 - 35));\n\\`\\`\\`\n`\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"viewof temp2 = Range([0, 35], { value: 22, label: \"°C\", step: 1 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":88,"value":"html`

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":113,"value":"md`Keen observers may see an opportunity to refactor. Our \\`tempToColorChannelScale\\` and \\`tempToPxScale\\` are basically the same function just with different values. This is a challenge problem... see if you can make a higher order function (that is a function that returns another function) to make generic linear scales.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":116,"value":"function makeLinearScale({ domain, range }) {\n // domain and range are both intended to be arrays of two numbers\n return function(value) {\n // your answer goes here!\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":117,"value":"summary(\n \"Peek at the answer\",\n `\n\\`\\`\\`js\nconst [domainMin, domainMax] = domain;\nconst [rangeMin, rangeMax] = range;\n\nreturn (\n rangeMax +\n (rangeMin - rangeMax) * ((value - domainMax) / (domainMin - domainMax))\n);\n\\`\\`\\`\n`\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"md`With your \\`makeLinearScale\\` function, you no longer need to define the code for the previous scales. See if you can replace them using your new HOF.\n\n### Scales in D3\n\nD3 makes this even easier for us, it ships with the ability to declaratively build a linear scale function. To use them, import d3 like this:\n\n\\`\\`\\`js\nd3 = require(\"d3@6\")\n\\`\\`\\`\n\nAnd create your scales like this:\n\n\\`\\`\\`js\ntempToPxScale = d3.scaleLinear()\n .domain([0, 35])\n .range([0, width])\n .interpolate(d3.interpolateRound)\n\ntempToColorChannelScale = d3.scaleLinear()\n .domain([0, 35])\n .range([0, 255])\n .interpolate(d3.interpolateRound)\n\\`\\`\\`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":136,"value":"md`### With Vega Lite\nYou're going to get really excited (or mad, depending on your personality) when we tell you how vega-lite handles scales. It just figures it out for you. The following example has been taken from the [Vega Lite Observable curriculum](https://observablehq.com/@uwdata/multi-view-composition?collection=@uwdata/visualization-curriculum)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":137,"value":"weather = (await require('vega-datasets@1'))['weather.csv']()","pinned":false,"hidden":false,"mode":"ojs"},{"id":149,"value":"vl\n .markLine()\n .data(weather)\n .encode(\n vl.x().month('date'),\n vl.y().average('temp_max'),\n vl.color().fieldN('location')\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":151,"value":"md`Notice anything about domain and range? Nope. Nothing. Most of the time vega lite figures it out. Now, if you want to, you can override the defaults and specify it yourself like this:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"vl\n .markLine()\n .data(weather)\n .encode(\n vl.x().month('date'),\n vl\n .y()\n .average('temp_max')\n .scale({ domain: [-50, 100] }), // << This was the change\n vl.color().fieldN('location')\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":165,"value":"md`So, if vega-lite does this for you 99% of the time without any configuration, why are we telling you about it? Mostly so you can appreciate the nice things you have. But, also, you may need to step in and override the defaults from time to time, so it's good to know what's going on.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":181,"value":"md`## Nonlinear Scales\n\nNot all data fit well with linear scales. If you play a scale on a piano, the sound you hear _feels_ linear. But the frequencies increase exponentailly. Every octive you play represents a doubling of the frequency. The user interface (and visualization) maps a nonlinear system to linear space.\n\n${await FileAttachment(\"Piano_to_F.jpeg\").image()}\n\n(Credit: [pressbooks.com](https://sound.pressbooks.com/chapter/pitch-and-frequency-in-music/))\n\nIf a piano used a linear mapping from frequency space to distance of keys, you'd be out of breath walking from the lowest key to the highest one.\n\nSo, when do you need to use a log scale? They come in handy when data are literally \"off the charts.\" Let's look at two examples.\n\nBecause the sun is _so_ much bigger than the rest of the bodies in the solar system, their relative sizes are hard to compare. If we switch to a log scale, suddenly things get a little easier.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":183,"value":"solarSystem = FileAttachment(\"solar-system.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs"},{"id":261,"value":"viewof solarScale = Radio([\"linear\", \"symlog\", \"sqrt\"], {\n label: \"Scale\",\n value: \"linear\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":188,"value":"vl\n .markBar()\n .title(\"Solar System\")\n .width(680)\n .height(320)\n .data(solarSystem)\n .encode(\n vl.y().fieldN(\"name\"),\n vl\n .x()\n .fieldQ('radius')\n .scale({ type: solarScale })\n )\n .render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":190,"value":"html`Data modifed from Kristin Riebe's Solarsystem Workshop`","pinned":false,"hidden":false,"mode":"ojs"},{"id":207,"value":"md`Let's take a look at money. Consider that Jeff Bazos is worth around $200 billion while the median net worth in the United States is about $120,000, while the median net worth of all people on the planet is about $7,000. You'll see that linear scales just don't work.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":229,"value":"md`It's a little more understandable with a log scale.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":208,"value":"wealth = [\n { name: \"Bill\", amount: 1.175e11 },\n { name: \"US Median\", amount: 12e4 },\n { name: \"World Median\", amount: 7e3 }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":274,"value":"viewof wealthScale = Radio([\"linear\", \"symlog\"], {\n label: \"Scale\",\n value: \"linear\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":217,"value":"vl\n .markBar()\n .title(\"Wealth\")\n .width(680)\n .height(320)\n .data(wealth)\n .encode(\n vl.y().fieldN(\"name\"),\n vl\n .x()\n .fieldQ('amount')\n .scale({ type: wealthScale })\n )\n\n .render()","pinned":true,"hidden":false,"mode":"ojs"},{"id":222,"value":"md`There are many, many examples of data that are ideal for log scales: [earthquakes](https://en.wikipedia.org/wiki/Richter_magnitude_scale), [changes in cost of computing chips and solar panels](https://twitter.com/ZekeNierenberg/status/1362900000641085440), [warp speed](https://en.wikipedia.org/wiki/Warp_drive), and many many more.\n\nOccasionally, it can be _very_ compelling to use linear scales, even when they're inappropriate. For example, if you want the viewer of a visualization to truly understand the magnitude of a difference, you can make them scroll through it. This was very effectively done [here](https://mkorostoff.github.io/1-pixel-wealth/).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"import { Range, Radio } from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"import { vl } from '@vega/vega-lite-api-v5'","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"function summary(title, content) {\n return html`

${title}

\n ${md`${content}`}\n

`;\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}