31:T48a,CAREER = [ { text: "Sydney", layer: 2, color: "rgb(18,58,116)", end: new Date(), start: new Date("2018-11-01") }, { text: "Brisbane", layer: 2, color: "#800000", start: new Date("2015-07-01"), end: new Date("2018-11-01") }, { text: "Canva", layer: 0, color: "rgb(0,196,204)", role: "Software Engineer", start: new Date("2022-03-01"), end: new Date() }, { text: "Google", layer: 0, color: "rgb(233,66,52)", role: "Software Engineer", start: new Date("2020-01-06"), end: new Date("2022-02-01") }, { text: "Atlassian", layer: 0, color: "rgb(1,101,255)", role: "Intern Software Engineer", start: new Date("2018-11-01"), end: new Date("2019-12-14") }, { text: "Skedulo", layer: 0, color: "rgb(0,85,254)", role: "Intern Software Engineer", start: new Date("2017-01-01"), end: new Date("2018-11-01") }, { text: "University of Queensland", layer: 1, color: "rgb(85,41,125)", role: "BSc Computer Science Extended Major", start: new Date("2015-07-01"), end: new Date("2019-07-01") } ]32:Ta63,

Property	Value	Accuracy
Mean of x	9	exact
Sample variance of x: s² _x	11	exact
Mean of y	7.50	to 2 decimal places
Sample variance of y: s² _y	4.125	±0.003
Correlation between x and y	0.816	to 3 decimal places
Linear regression line	y = 3.00 + 0.500x	to 2 and 3 decimal places, respectively
Coefficient of determination of the linear regression: $R^{2}$	0.67	to 2 decimal places

33:T4c5,dot` digraph { "Prefuse (Java)" -> "Protovis (JavaScript)" "Grammar of Graphics (book)" -> "ggplot (R)" "Grammar of Graphics (book)" -> "ggplot2 (R)" "ggplot (R)" -> "ggplot2 (R)" "Grammar of Graphics (book)" -> "Gadfly.jl (Julia)" "Grammar of Graphics (book)" -> "Polaris" "Polaris" -> "Tableau/VizQL" "D3.js (JavaScript)" -> "Vega (JSON)" "D3.js (JavaScript)" -> "Plotly.js (JavaScript)" "Grammar of Graphics (book)" -> "Vega (JSON)" "Apache ECharts (TypeScript)" "Google Charts (JavaScript)" "Highcharts (JavaScript)" "Chart.js (JavaScript)" "Vega (JSON)" -> "ggvis (R)" "Vega (JSON)" -> "Vega-Lite (JSON)" "Vega-Lite (JSON)" -> "Observable Plot (JavaScript)" "ggplot2 (R)" -> "ggvis (R)" "ggvis (R)" -> "Vega-Lite (JSON)" "ggplot2 (R)" -> "Gadfly.jl (Julia)" "ggplot2 (R)" -> "plotnine (Python)" "Protovis (JavaScript)" -> "D3.js (JavaScript)" "D3.js (JavaScript)" -> "Observable Plot (JavaScript)" "Semiology of Graphics (book)" -> "Observable Plot (JavaScript)" "Grammar of Graphics (book)" -> "Observable Plot (JavaScript)" "MATLAB" -> "Matplotlib (Python)" "Matplotlib (Python)" -> "seaborn (Python)" "Grammar of Graphics (book)" -> "Vega-Lite (JSON)" } `34:T4ae,Plot.plot({ caption: "Chicago crash deaths", style: "overflow: visible;", caption: "Annual cumulative traffic deaths by day of years in Chicago", y: { grid: true, label: "Deaths" }, color: { domain: [false, true], range: ["#ccc", "red"] }, marks: [ Plot.line( chicagoCrashDeaths, Plot.mapY("cumsum", { x: (d) => new Date(2020, d.crash_date.getMonth(), d.crash_date.getDate()), y: (d) => 1, z: (d) => d.crash_date.getFullYear(), stroke: (d) => new Date().getFullYear() === d.crash_date.getFullYear(), curve: "step-before" }) ), Plot.text( chicagoCrashDeaths, Plot.selectLast( Plot.mapY("cumsum", { x: (d) => new Date(2020, d.crash_date.getMonth(), d.crash_date.getDate()), y: (d) => 1, z: (d) => d.crash_date.getFullYear(), text: (d) => d.crash_date.getFullYear().toString(), textAnchor: "start", dx: 3, dy: -2 }) ) ), Plot.axisX({ ticks: "month", tickSize: 16, tickPadding: -11, tickFormat: " %b", textAnchor: "start" }) ] })35:T574,### Favorite notebooks - [Math for journalists](https://observablehq.com/@nshiab/math-for-journalists) - [Wordle, 15 Million Tweets Later](https://observablehq.com/@rlesser/wordle-twitter-exploration) - [Swag, a Based* Analysis](https://observablehq.com/@wiederkehra/swag-a-diet-analysis) - [Income Inequality in Britain](https://observablehq.com/@jwolondon/income-inequality-in-britain) - [Pseudo-Blue Noise](https://observablehq.com/@jobleonard/pseudo-blue-noise) - [Euclidean rhythms](https://observablehq.com/@toja/euclidean-rhythms) - [Fibonacci lattices](https://observablehq.com/@meetamit/fibonacci-lattices) - [Supreme Court Justice Nominations](https://observablehq.com/d/6c17f4b11c38626e) - [All the passes](https://observablehq.com/@karimdouieb/all-the-passes) - [Visionscarto’s “World Atlas”](https://observablehq.com/@visionscarto/world-atlas-topojson) - [Phases of the Moon](https://observablehq.com/@observablehq/plot-phases-of-the-moon) - [Lunar Visibility](https://observablehq.com/@mbostock/lunar-visibility) - [Playfair's Wheat and Wages](https://observablehq.com/@jwolondon/wheat-and-wages) - [Travelling Sun](https://observablehq.com/d/bc010162c38dfcbd) - [AIS Transponder Events](https://observablehq.com/@observablehq/ais-transponder-events) - [Natural breaks](https://observablehq.com/@visionscarto/natural-breaks) - [Bartosz Ciechanowski](https://ciechanow.ski/) 36:[{"id":"3f14edcc8bd7dd946c62f12ae70bdff6284513c213a63631fddc1cbf96efb9c709d3bb1be593e0c8d47e821d20fecdc192eeaa2f78488dcd9f511b0a9af2349e","href":"https://static.observableusercontent.com/files/3f14edcc8bd7dd946c62f12ae70bdff6284513c213a63631fddc1cbf96efb9c709d3bb1be593e0c8d47e821d20fecdc192eeaa2f78488dcd9f511b0a9af2349e","name":"image.png","type":"image/png","lastModified":1696509024669.954,"size":596794},{"id":"002a5c7c6569fc2b65489436956445653b9a0b82f45b93cd32f0f3e22adae3511eb8b0c904c76ef9d3fc5cfe2fdae2a3989dd3442e29d2d40c212ae2dcb70c1d","href":"https://static.observableusercontent.com/files/002a5c7c6569fc2b65489436956445653b9a0b82f45b93cd32f0f3e22adae3511eb8b0c904c76ef9d3fc5cfe2fdae2a3989dd3442e29d2d40c212ae2dcb70c1d","name":"image@1.png","type":"image/png","lastModified":1696551047588.524,"size":371292},{"id":"c86d587cba5a1d6bd3e227205ec9f10e1c59af0282496697eb3a1de1f962a291a0b7cacdad5b4e9faf3d93246cef8efd11f31bb85e7fd10680b987295c366c30","href":"https://static.observableusercontent.com/files/c86d587cba5a1d6bd3e227205ec9f10e1c59af0282496697eb3a1de1f962a291a0b7cacdad5b4e9faf3d93246cef8efd11f31bb85e7fd10680b987295c366c30","name":"image@2.png","type":"image/png","lastModified":1696574133438.485,"size":1434652},{"id":"9b96b74a426c35a9c6c78a4aec2e7647c7ff94ef6f04ffe0937301651b6c858970d83fcdaff645682f13a2738aa7ee84e3cf14dafa73096b02437b0b584ef2b7","href":"https://static.observableusercontent.com/files/9b96b74a426c35a9c6c78a4aec2e7647c7ff94ef6f04ffe0937301651b6c858970d83fcdaff645682f13a2738aa7ee84e3cf14dafa73096b02437b0b584ef2b7","name":"image@5.png","type":"image/png","lastModified":1696575743960.663,"size":629561},{"id":"e7259caefd8002faa502d82c101bdb05b556f22b6a5ad3e4d488ee2028beb7b3fc97be1b420a8e4111a60370c4af005fa1e264b0c5f5e085062ab84f0947d939","href":"https://static.observableusercontent.com/files/e7259caefd8002faa502d82c101bdb05b556f22b6a5ad3e4d488ee2028beb7b3fc97be1b420a8e4111a60370c4af005fa1e264b0c5f5e085062ab84f0947d939","name":"image@6.png","type":"image/png","lastModified":1696993966058.498,"size":123973},{"id":"a59366618f0093e762b8399e1adabc464b2d969de151329fb52640c6b23ec39c4335b471dd125739bb7b52ae025346a1abdee7759d7feae32059d3c6a5e676af","href":"https://static.observableusercontent.com/files/a59366618f0093e762b8399e1adabc464b2d969de151329fb52640c6b23ec39c4335b471dd125739bb7b52ae025346a1abdee7759d7feae32059d3c6a5e676af","name":"image@3.png","type":"image/png","lastModified":1696574155801.158,"size":1253242},{"id":"e450123dd436bcd39b5d4c1a4cff35345f720f898dff67b9e4c8ae04934751967a43eefef6e3a1c8bb37b656d960fc773e9d2758659388c8d4bd60e681ece517","href":"https://static.observableusercontent.com/files/e450123dd436bcd39b5d4c1a4cff35345f720f898dff67b9e4c8ae04934751967a43eefef6e3a1c8bb37b656d960fc773e9d2758659388c8d4bd60e681ece517","name":"image@4.png","type":"image/png","lastModified":1696575489645.607,"size":661460},{"id":"8c6e93cc2514fc0f1060dc44ab511df92e5f5916a62f45737b01cb88d3cf70fe7eba8246bbcfda2fd740cbaeff75c0f6c6278bf0904ef4dfb0881802e43bebe8","href":"https://static.observableusercontent.com/files/8c6e93cc2514fc0f1060dc44ab511df92e5f5916a62f45737b01cb88d3cf70fe7eba8246bbcfda2fd740cbaeff75c0f6c6278bf0904ef4dfb0881802e43bebe8","name":"IMG_4934.JPG","type":"image/jpeg","lastModified":1696575626613.195,"size":133284}] 2f:{"title":"Intermediate data visualization","cells":[{"id":0,"value":"# Intermediate data visualization","pinned":false,"hidden":false,"mode":"md"},{"id":2244,"value":"*To people stumbling across this on Observable, this is talk I presented to some students at my alma mater in a few days.*","pinned":false,"hidden":false,"mode":"md"},{"id":158,"value":"## About me","pinned":false,"hidden":false,"mode":"md"},{"id":173,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":276,"value":"PREVIOUS_TALKS = [\n {\n name: \"Introduction to Property-Based Testing\",\n url: \"https://www.youtube.com/watch?v=MKLLOxb2nmI&t\",\n date: new Date(\"2019-10-13\")\n },\n {\n name: \"Parser Combinators\",\n url: \"https://www.youtube.com/watch?v=bvjBgAGq3E8\",\n date: new Date(\"2020-05-26\")\n }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":165,"value":"Plot.plot({\n grid: true,\n height: 100,\n x: {\n label: \"Date →\"\n },\n y: {\n ticks: false\n },\n marks: [\n Plot.rect(CAREER, {\n y1: (d) => d.layer,\n y2: (d) => d.layer + 1,\n x1: \"start\",\n x2: \"end\",\n fill: \"color\"\n }),\n Plot.text(CAREER, {\n y: (d) => d.layer + 0.5,\n x: \"start\",\n text: \"text\",\n fontSize: 13,\n fill: \"white\",\n textAnchor: \"start\"\n }),\n Plot.tickX(PREVIOUS_TALKS, {\n channels: { name: \"name\" },\n href: \"url\",\n target: \"_blank\",\n x: \"date\",\n fill: \"black\",\n tip: true\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1499,"value":"import { toc } from \"@nebrius/indented-toc\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1503,"value":"toc(\"h2,h3,h4,h5,h6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"## Why do dataviz?","pinned":false,"hidden":false,"mode":"md"},{"id":43,"value":"> **Anscombe's quartet** comprises four data sets that have nearly identical simple descriptive statistics, yet have very different distributions and appear very different when graphed. Each dataset consists of eleven _(x, y)_ points. They were constructed in 1973 by the statistician Francis Anscombe to demonstrate both the importance of graphing data when analyzing it, and the effect of outliers and other influential observations on statistical properties. He described the article as being intended to counter the impression among statisticians that \"numerical calculations are exact, but graphs are rough\".","pinned":false,"hidden":false,"mode":"md"},{"id":19,"value":"import { anscombe } from \"@observablehq/plot-anscombes-quartet\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"anscombe","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"$32","pinned":false,"hidden":false,"mode":"md"},{"id":27,"value":"Plot.plot({\n caption: \"Anscombe's quartet\",\n aspectRatio: 0.5,\n facet: { data: anscombe, x: \"series\" },\n marks: [\n Plot.frame(),\n Plot.dot(anscombe, { x: \"x\", y: \"y\" }),\n Plot.linearRegressionY(anscombe, {\n x: \"x\",\n y: \"y\",\n ci: 0,\n stroke: \"red\"\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":59,"value":"## 2D plotting paradigms","pinned":false,"hidden":false,"mode":"md"},{"id":62,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"_I'm only drawing edges here if they're explicitly mentioned in their documentation. This was very much inspired by the graph and methodology described by [Family spaghetti of programming languages (2019)](https://erkin.party/blog/190208/spaghetti/)._","pinned":false,"hidden":false,"mode":"md"},{"id":116,"value":"## The Grammar of Graphics\n\nThe Grammar of Graphics (GoG) is a language for defining statistical graphics like bar charts, scatterplots, and line graphs from composable pieces. \n\nIn addition to being a convenient way to write a chart, GoG provides a way for us to think more systematically about charts by splitting them up into orthogonal components. Exactly what these different pieces are varies slightly depending on the system you use, and no system (other than the original) seems to follow GoG's specification to the letter. \n\nThe 3 main components we will be covering are:\n\n1. Marks\n2. Encodings\n3. Scales","pinned":false,"hidden":false,"mode":"md"},{"id":128,"value":"### The render pipeline","pinned":false,"hidden":false,"mode":"md"},{"id":135,"value":"Roughly speaking, GoG splits data visualization into two distinct steps, summarized here:","pinned":false,"hidden":false,"mode":"md"},{"id":144,"value":"dot`\ndigraph {\n rankdir=\"LR\"\n data -> \"abstract space\" [ label=\"encodings + marks\" ]\n \"abstract space\" -> \"screen space\" [ label=\"scales\" ]\n}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":297,"value":"In prose, the GoG pipeline is:\n\n1. Start with a dataset.\n1. Map the dataset to abstract space using encodings and marks.\n1. Map the abstract space to screen space using scales.","pinned":false,"hidden":false,"mode":"md"},{"id":335,"value":"#### Data","pinned":false,"hidden":false,"mode":"md"},{"id":330,"value":"alphabet","pinned":true,"hidden":false,"mode":"ojs"},{"id":339,"value":"#### Encodings + marks","pinned":false,"hidden":false,"mode":"md"},{"id":366,"value":"In the following example, `Plot.barY` is a **mark**. \n\nA mark takes as input:\n\n1. A dataset (`alphabet`)\n2. A set of encodings (`{ x: \"letter\", y: \"frequency\", fill: \"frequency\" }`).","pinned":false,"hidden":false,"mode":"md"},{"id":311,"value":"bars = Plot.barY(alphabet, { x: \"letter\", y: \"frequency\", fill: \"frequency\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":341,"value":"#### Abstract space","pinned":false,"hidden":false,"mode":"md"},{"id":362,"value":"`x` and `fill` are abstract coordinates called an *encoding channel* or just a *channel*. Mappings from data into these channels (like `letter` to `x` and `frequency` to `y1` and `y2`) are called encodings.","pinned":false,"hidden":false,"mode":"md"},{"id":345,"value":"bars.channels","pinned":true,"hidden":false,"mode":"ojs"},{"id":465,"value":"bars.channels.x.value.transform()","pinned":true,"hidden":false,"mode":"ojs"},{"id":468,"value":"bars.channels.y2.value.transform()","pinned":true,"hidden":false,"mode":"ojs"},{"id":501,"value":"#### Screenspace","pinned":false,"hidden":false,"mode":"md"},{"id":383,"value":"barsPlot = bars.plot({\n caption: \"Letter frequencies\",\n color: { type: \"linear\", scheme: \"cividis\" }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":392,"value":"#### [Scales](https://observablehq.com/plot/features/scales)\nTo map between abstract visual space and pixel space, we'll use **scales**.","pinned":false,"hidden":false,"mode":"md"},{"id":421,"value":"##### [Linear scales](https://observablehq.com/plot/features/scales#continuous-scales)\nLinear scales encode linear or affine transformations between abstract and screen space, so they are suitable for reading information from a graphic where linear/affine transformations preserve information. For example, if we care about the relative difference between the frequencies of different letters, we should preserve these relative differences by using a linear transformation.\n\nOur example linear scale specifies a domain (in abstract space) `${JSON.stringify(barsPlot.scale(\"y\").domain)}` and a range (in screen space) `${JSON.stringify(barsPlot.scale(\"y\").range)}` using the smallest and largest value we need to map. The minimum of the domain maps to the minimum of the range and likewise for the maximum. These two points are sufficient to specify the entire linear mapping.","pinned":false,"hidden":false,"mode":"md"},{"id":406,"value":"barsPlot.scale(\"y\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":386,"value":"[barsPlot.scale(\"y\").apply(0), barsPlot.scale(\"y\").apply(0.12702)]","pinned":true,"hidden":false,"mode":"ojs"},{"id":433,"value":"##### [Ordinal scales](https://observablehq.com/plot/features/scales#discrete-scales)\nOrdinal scales map ordered, discrete data to screen space. For example, the letters of the alphabet are ordinal values, and so an ordinal scale is used for them. If data can only be ordered, but unable to be compared \"distance-wise\" in the sense of the frequency values we discussed above, then the scale ought to evenly space ordinal data apart, so that the only meaningful distance comparisons than can be done are the number of hops it takes to get from one discrete value to another.\n\nOur example ordinal scale specifies the discrete domain `${JSON.stringify(barsPlot.scale(\"x\").domain)}`, and a continuous interval range `${JSON.stringify(barsPlot.scale(\"x\").range)}` similar to a linear scale.","pinned":false,"hidden":false,"mode":"md"},{"id":436,"value":"barsPlot.scale(\"x\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":708,"value":"barsPlot.scale(\"x\").apply(\"E\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":480,"value":"##### [Color scales](https://observablehq.com/plot/features/scales#color-scales)","pinned":false,"hidden":false,"mode":"md"},{"id":485,"value":"barsPlot.scale(\"color\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":520,"value":"rgb = barsPlot.scale(\"color\").apply(0.12702)","pinned":true,"hidden":false,"mode":"ojs"},{"id":514,"value":"viewof color = Inputs.color({\n label: \"0.12702 = \",\n value: culori.formatHex(rgb)\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":687,"value":"dot`digraph FP\n{\n rankdir=\"LR\"\n letter -> x [ label=\"Plot.barY encodes channel\" ]\n frequency -> y [ label=\"Plot.barY encodes channel\" ]\n frequency -> fill [ label=\"Plot.barY encodes channel\" ]\n x -> \"band scale\" [ label=\"Plot inspects and synthesizes\" ]\n y -> \"linear scale\" [ label=\"Plot inspects and synthesizes\" ]\n fill -> \"color scale\" [ label=\"Plot inspects and synthesizes\" ]\n \"band scale\" -> \"\" [ label=\"Plot.barY reads and renders\" ]\n \"linear scale\" -> \"\" [ label=\"Plot.barY reads and renders\" ]\n \"color scale\" -> \"\" [ label=\"Plot.barY reads and renders\" ]\n }`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2547,"value":"### [Manipulating marks](https://observablehq.com/plot/features/marks)","pinned":false,"hidden":false,"mode":"md"},{"id":2573,"value":"Too many to talk about. Read the docs:","pinned":false,"hidden":false,"mode":"md"},{"id":2561,"value":"md`${_.take(Object.keys(Plot), 24).map(\n (k) => `- [${k}](https://observablehq.com/plot/marks/${k.toLowerCase()})\\n`\n)}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":1389,"value":"### [Manipulating scales](https://observablehq.com/plot/features/scales)","pinned":false,"hidden":false,"mode":"md"},{"id":1312,"value":"import { data as stateCovidData } from \"@mbostock/covid-cases-by-state\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1317,"value":"filteredCovidData = stateCovidData","pinned":true,"hidden":false,"mode":"ojs"},{"id":2242,"value":"#### log","pinned":false,"hidden":false,"mode":"md"},{"id":1366,"value":"viewof scaleOverride = Inputs.select([\"linear\", \"log\"], {\n label: \"y scale\",\n value: \"linear\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1360,"value":"covidPlot.scale(\"y\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1371,"value":"covidPlot.scale(\"y\").apply(10000)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1327,"value":"covidPlot = Plot.plot({\n caption: \"Covid cases in New York\",\n grid: true,\n marginLeft: 50,\n y: { type: scaleOverride, label: \"↑ Positive cases\" },\n width,\n marks: [\n Plot.ruleY([0]),\n Plot.line(filteredCovidData, {\n x: \"date\",\n y: \"positiveIncrease\"\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1079,"value":"### [Manipulating channels](https://observablehq.com/plot/features/transforms)","pinned":false,"hidden":false,"mode":"md"},{"id":2128,"value":"#### [Filter](https://observablehq.com/plot/transforms/filter)","pinned":false,"hidden":false,"mode":"md"},{"id":2262,"value":"The **filter transform** filters a mark’s index to show a subset of the data. ","pinned":false,"hidden":false,"mode":"md"},{"id":3570,"value":"viewof m = Inputs.range([0, cars.length], {\n value: 5,\n step: 1,\n label: \"Number of points\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3566,"value":"Plot.plot({\n caption: \"The weight of a car is a good linear predictor of its power\",\n marks: [\n Plot.dot(cars, {\n x: \"weight (lb)\",\n y: \"power (hp)\",\n filter: (d, i) => i < m\n }),\n Plot.linearRegressionY(cars, {\n filter: (d, i) => i < m,\n x: \"weight (lb)\",\n y: \"power (hp)\",\n stroke: \"red\"\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2288,"value":"dot`digraph FP\n{\n rankdir=\"LR\"\n weight -> x [ label=\"Plot.dot encodes channel\" ]\n power -> y [ label=\"Plot.dot encodes channel\" ]\n x -> \"linear scale x\" [ label=\"Plot inspects and synthesizes\" ]\n y -> \"linear scale y\" [ label=\"Plot inspects and synthesizes\" ]\n \"linear scale x\" -> \"filtered and scaled x\" [ label=\"Plot.dot filters and scales\" ]\n \"linear scale y\" -> \"filtered and scaled y\" [ label=\"Plot.dot filteres and scales\" ]\n \"filtered and scaled x\" -> \"\" [ label=\"Plot.dot reads and renders\" ]\n \"filtered and scaled y\" -> \"\" [ label=\"Plot.dot reads and renders\" ]\n }`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2485,"value":"#### [Bin](https://observablehq.com/plot/transforms/bin)","pinned":false,"hidden":false,"mode":"md"},{"id":2490,"value":"The **bin transform** groups quantitative or temporal data — continuous measurements such as heights, weights, or temperatures — into discrete bins. You can then compute summary statistics for each bin, such as a count, sum, or proportion.\n","pinned":false,"hidden":false,"mode":"md"},{"id":2503,"value":"\nFor example, the heatmap below shows the weights and heights of Olympic athletes. The color of each hexagon represents the number (count) of athletes with similar weight and height.","pinned":false,"hidden":false,"mode":"md"},{"id":1083,"value":"viewof weightThreshold = Inputs.range(\n d3.extent(olympians, (d) => d.weight),\n {\n label: \"Weight (kg) bin threshold\",\n step: 1,\n value: 0\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1183,"value":"viewof thresholds = Inputs.range([0, 100], {\n label: \"Bin thresholds\",\n step: 10\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1081,"value":"Plot.plot({\n caption: \"Heights and weights of Olympic athletes\",\n nice: true,\n color: {\n legend: true,\n scheme: \"Cividis\"\n },\n marks: [\n Plot.rect(\n olympians,\n Plot.bin(\n { fill: \"count\" },\n {\n filter: (d) => d.weight < weightThreshold,\n x: \"weight\",\n y: \"height\",\n thresholds,\n tip: true\n }\n )\n ),\n Plot.ruleX([weightThreshold], { stroke: \"red \" }),\n Plot.dot(olympians, {\n filter: (d) => d.weight >= weightThreshold,\n x: \"weight\",\n y: \"height\",\n opacity: 0.1,\n fill: \"black\",\n tip: true\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2539,"value":"dot`digraph FP\n{\n rankdir=\"LR\"\n weight -> x [ label=\"[0,1,2,3,5] Plot.bin encodes channel [1,4]\" ]\n height -> y [ label=\"[0,1,2,3,5] Plot.bin encodes channel [1,4]\" ]\n count -> fill [ label=\"Plot.bin encodes channel [2,1]\" ]\n x -> \"linear scale x\" [ label=\"Plot inspects and synthesizes\" ]\n y -> \"linear scale y\" [ label=\"Plot inspects and synthesizes\" ]\n fill -> \"color scale\" [ label=\"Plot inspects and synthesizes\" ]\n \"linear scale x\" -> \"\" [ label=\"Plot.rect reads and renders\" ]\n \"linear scale y\" -> \"\" [ label=\"Plot.rect reads and renders\" ]\n \"color scale\" -> \"\" [ label=\"Plot.rect reads and renders\" ]\n }`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2497,"value":"\n\nFor example, here is a histogram showing the distribution of weights of Olympic athletes.","pinned":false,"hidden":false,"mode":"md"},{"id":2584,"value":"viewof weightThreshold3 = Inputs.range(\n d3.extent(olympians, (d) => d.weight),\n { label: \"Weight (kg) bin threshold\", step: 1, value: 0 }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2482,"value":"Plot.plot({\n caption: \"Distribution of weights of Olympic athletes\",\n color: {\n legend: true,\n scheme: \"Cividis\"\n },\n y: { grid: true },\n marks: [\n Plot.tickX(olympians, {\n x: \"weight\",\n strokeOpacity: 0.05,\n filter: (d) => d.weight >= weightThreshold3\n }),\n Plot.ruleX([weightThreshold3], { stroke: \"red \" }),\n Plot.rectY(\n olympians,\n Plot.binX(\n { y: \"count\", fill: \"count\" },\n {\n x: \"weight\",\n\n filter: (d) => d.weight < weightThreshold3\n }\n )\n ),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2518,"value":"#### [Hexbin](https://observablehq.com/plot/transforms/hexbin)","pinned":false,"hidden":false,"mode":"md"},{"id":2530,"value":"viewof weightThreshold2 = Inputs.range(\n d3.extent(olympians, (d) => d.weight),\n { label: \"Weight (kg) bin threshold\", step: 1, value: 0 }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2528,"value":"viewof binWidth = Inputs.range([0, 40], {\n label: \"Bin width\",\n step: 10\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2522,"value":"Plot.plot({\n caption: \"Heights and weights of Olympic athletes\",\n nice: true,\n color: {\n legend: true,\n scheme: \"Cividis\"\n },\n marks: [\n Plot.hexagon(\n olympians,\n Plot.hexbin(\n { r: \"count\", fill: \"count\" },\n {\n filter: (d) => d.weight < weightThreshold2,\n x: \"weight\",\n y: \"height\",\n binWidth,\n tip: true\n }\n )\n ),\n Plot.ruleX([weightThreshold2], { stroke: \"red\" }),\n Plot.dot(olympians, {\n filter: (d) => d.weight >= weightThreshold2,\n x: \"weight\",\n opacity: 0.1,\n y: \"height\",\n fill: \"black\",\n tip: true\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1190,"value":"dot`digraph FP\n{\n rankdir=\"LR\"\n weight -> x [ label=\"[0,1,2,3,5] Plot.hexbin encodes channel [1,4]\" ]\n height -> y [ label=\"[0,1,2,3,5] Plot.hexbin encodes channel [1,4]\" ]\n count -> fill [ label=\"Plot.hexbin encodes channel [2,1]\" ]\n count -> r [ label=\"Plot.hexbin encodes channel [2,1]\" ]\n x -> \"linear scale x\" [ label=\"Plot inspects and synthesizes [1,1,1]\" ]\n y -> \"linear scale y\" [ label=\"Plot inspects and synthesizes\" ]\n fill -> \"color scale\" [ label=\"Plot inspects and synthesizes\" ]\n r -> \"proportional area scale\" [ label=\"Plot inspects and synthesizes\" ]\n \"linear scale x\" -> \"\" [ label=\"Plot.hexagon reads and renders\" ]\n \"linear scale y\" -> \"\" [ label=\"Plot.hexagon reads and renders\" ]\n \"color scale\" -> \"\" [ label=\"Plot.hexagon reads and renders\" ]\n \"proportional area scale\" -> \"\" [ label=\"Plot.hexagon reads and renders\" ]\n }`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2136,"value":"#### [Map](https://observablehq.com/plot/transforms/map)","pinned":false,"hidden":false,"mode":"md"},{"id":2254,"value":"The **map transform** groups data into series and then transforms each series’ values, say to normalize them relative to some basis or to apply a moving average. \n\nFor example, below the map transform computes a cumulative sum (_cumsum_) of the number of deaths from crashes in Chicago. Each line represents a different year.","pinned":false,"hidden":false,"mode":"md"},{"id":2315,"value":"import { data as chicagoCrashDeaths } from \"@fgregg/chicago-crash-deaths\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2318,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":2147,"value":"#### [Select](https://observablehq.com/plot/transforms/select)","pinned":false,"hidden":false,"mode":"md"},{"id":2325,"value":"import { stocks } from \"@observablehq/plot-labeled-multi-line-chart\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2335,"value":"The **select transform** filters a mark’s index to show a subset of the data. It is a specialized filter transform that pulls a single value or a sample subset out of each series. For example, below `selectLast` is used to label the last value in a line chart.","pinned":false,"hidden":false,"mode":"md"},{"id":2323,"value":"Plot.plot({\n caption: \"Stock prices of major tech companies\",\n style: \"overflow: visible;\",\n y: { grid: true },\n marks: [\n Plot.ruleY([0]),\n Plot.line(stocks, { x: \"Date\", y: \"Close\", stroke: \"Symbol\" }),\n Plot.text(\n stocks,\n Plot.selectLast({\n x: \"Date\",\n y: \"Close\",\n z: \"Symbol\",\n text: \"Symbol\",\n textAnchor: \"start\",\n dx: 3\n })\n )\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2337,"value":"import { plotName } from \"@mjbo/how-to-tell-someones-age-when-all-you-know-is-their-name\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2340,"value":"plotName({\n name: \"Joseph\",\n sex: \"M\",\n caption: \"Age distribution of Americans named Joseph, by year of birth\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2131,"value":"#### [Group](https://observablehq.com/plot/transforms/group)","pinned":false,"hidden":false,"mode":"md"},{"id":2350,"value":"The **group transform** groups ordinal or nominal data — discrete values such as name, type, or category. You can then compute summary statistics for each group, such as a count, sum, or proportion. The group transform is most often used to make bar charts with the bar mark.\n\nFor example, the bar chart below shows a distribution of Olympic athletes by sport.","pinned":false,"hidden":false,"mode":"md"},{"id":2348,"value":"Plot.plot({\n caption: \"Distribution of Olympic athletes by sport\",\n marginBottom: 100,\n x: { label: null, tickRotate: 90 },\n y: { grid: true },\n marks: [\n Plot.barY(olympians, Plot.groupX({ y: \"count\" }, { x: \"sport\" })),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2145,"value":"#### [Normalize](https://observablehq.com/plot/transforms/normalize)\n","pinned":false,"hidden":false,"mode":"md"},{"id":2358,"value":"The **normalize transform** is a specialized map transform that normalizes series values relative to some basis, say to convert absolute values into relative values. \n\nFor example, here is an index chart — a type of multi-series line chart — showing the return of several stocks relative to their closing price on a particular date.","pinned":false,"hidden":false,"mode":"md"},{"id":2361,"value":"Plot.plot({\n caption: \"Stock prices of major tech companies\",\n y: {\n type: \"log\",\n grid: true,\n label: \"Change in price (%)\",\n tickFormat: (\n (f) => (x) =>\n f((x - 1) * 100)\n )(d3.format(\"+d\"))\n },\n marks: [\n Plot.ruleY([1]),\n Plot.line(\n stocks,\n Plot.normalizeY({\n x: \"Date\",\n y: \"Close\",\n stroke: \"Symbol\"\n })\n ),\n Plot.text(\n stocks,\n Plot.selectLast(\n Plot.normalizeY({\n x: \"Date\",\n y: \"Close\",\n z: \"Symbol\",\n text: \"Symbol\",\n textAnchor: \"start\",\n dx: 3\n })\n )\n )\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2151,"value":"#### [Stack](https://observablehq.com/plot/transforms/stack)","pinned":false,"hidden":false,"mode":"md"},{"id":2387,"value":"The **stack transform** comes in two orientations: `stackY` replaces `y` with `y1` and `y2` to form vertical↑ stacks grouped on `x`, while stackX replaces `x` with `x1` and `x2` for horizontal→ stacks grouped on `y`. In effect, stacking transforms a length into lower and upper positions: the upper position of each element equals the lower position of the next element in the stack. Stacking makes it easier to perceive a total while still showing its parts.\n\nFor example, below is a stacked area chart of deaths in the Crimean War — predominantly from disease — using Florence Nightingale’s data.","pinned":false,"hidden":false,"mode":"md"},{"id":2394,"value":"import { crimea } from \"@observablehq/plot-crimean-war-casualties\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2391,"value":"Plot.plot({\n caption: \"Crimean war casualties by cause\",\n y: { grid: true },\n color: { legend: true },\n marks: [\n Plot.areaY(crimea, Plot.stackY({ x: \"date\", y: \"deaths\", fill: \"cause\" })),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2399,"value":"The `areaY` mark applies the stackY transform implicitly if you do not specify either `y1` or `y2`. The same applies to `barY` and `rectY`. Eliding `Plot.stackY` produces an identical chart.","pinned":false,"hidden":false,"mode":"md"},{"id":2409,"value":"Plot.plot({\n caption: \"Crimean war casualties by cause\",\n y: { grid: true },\n color: { legend: true },\n marks: [\n Plot.areaY(crimea, { x: \"date\", y: \"deaths\", fill: \"cause\" }),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2369,"value":"#### [Dodge](https://observablehq.com/plot/transforms/dodge)","pinned":false,"hidden":false,"mode":"md"},{"id":2381,"value":"Given one position dimension (either x or y), the **dodge transform** computes the other position dimension such that dots are packed densely without overlapping.\n\nThe dodge transform is commonly used to produce beeswarm 🐝 plots, a way of showing a one-dimensional distribution that preserves the visual identity of individual data points. \n\nFor example, the dots below represent the weights of cars; the rough shape of the pile gives a sense of the overall distribution (peaking around 2,100 pounds), and you can hover an individual dot to see which car it represents.","pinned":false,"hidden":false,"mode":"md"},{"id":2371,"value":"Plot.plot({\n caption: \"Weights of cars\",\n height: 160,\n marks: [\n Plot.dotX(\n cars,\n Plot.dodgeY(\"middle\", {\n x: \"weight (lb)\",\n tip: true,\n title: \"name\",\n fill: \"currentColor\"\n })\n )\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":3502,"value":"Beeswarm plots avoid the occlusion problem of dense scatterplots and barcode plots.","pinned":false,"hidden":false,"mode":"md"},{"id":2379,"value":"Plot.ruleX(cars, { x: \"weight (lb)\" }).plot({ caption: \"Weights of cars\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":2154,"value":"#### [Window](https://observablehq.com/plot/transforms/window)","pinned":false,"hidden":false,"mode":"md"},{"id":2159,"value":"The **window transform** is a specialized map transform that computes a moving window and then derives summary statistics from the current window, say to compute rolling averages, rolling minimums, or rolling maximums.\n\nFor example, the band chart below shows the daily high and low temperature in San Francisco. The red line represents the 7-day average high, and the blue line the 7-day average low.","pinned":false,"hidden":false,"mode":"md"},{"id":2165,"value":"import { sftemp } from \"@observablehq/plot-window-line-area\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2161,"value":"viewof k = Inputs.range([1, 100], {\n value: 20,\n step: 1,\n label: \"window width (k)\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2163,"value":"Plot.plot({\n caption: \"Daily high and low temperature moving averages in San Francisco\",\n y: {\n grid: true,\n label: \"↑ Temperature (°F)\"\n },\n marks: [\n Plot.areaY(sftemp, { x: \"date\", y1: \"low\", y2: \"high\", fillOpacity: 0.3 }),\n Plot.lineY(\n sftemp,\n Plot.windowY(k, { x: \"date\", y: \"low\", stroke: \"blue\" })\n ),\n Plot.lineY(sftemp, Plot.windowY(k, { x: \"date\", y: \"high\", stroke: \"red\" }))\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1282,"value":"viewof tempK = Inputs.range([0, 62], { label: \"window\", value: 28, step: 1 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":731,"value":"## Faceting","pinned":false,"hidden":false,"mode":"md"},{"id":734,"value":"o = olympians","pinned":true,"hidden":false,"mode":"ojs"},{"id":739,"value":"o","pinned":true,"hidden":false,"mode":"ojs"},{"id":3157,"value":"### Barcode","pinned":false,"hidden":false,"mode":"md"},{"id":746,"value":"Plot.plot({\n caption: \"Heights of Olympic athletes\",\n width: 400,\n marks: [\n Plot.tickY(olympians, {\n y: \"height\",\n stroke: \"sex\",\n strokeOpacity: 0.01,\n strokeWidth: 2,\n channels: OLYMPIAN_TOOLTIP_ATTRIBUTES,\n tip: true\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1008,"value":"Plot.plot({\n\n caption: \"Heights of Olympic athletes\",\n width,\n marks: [\n Plot.dot(\n _.sampleSize(olympians, 2000),\n Plot.dodgeX(\"middle\", {\n y: \"height\",\n fill: \"sex\",\n sort: \"sex\",\n padding: -1,\n tip: true,\n channels: OLYMPIAN_TOOLTIP_ATTRIBUTES\n })\n )\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":3159,"value":"### Series split barcode","pinned":false,"hidden":false,"mode":"md"},{"id":788,"value":"Plot.plot({\n\n caption: \"Heights of Olympic athletes\",\n width: 400,\n marks: [\n Plot.tickY(olympians, {\n y: \"height\",\n x: \"sex\",\n stroke: \"sex\",\n strokeWidth: 2,\n strokeOpacity: 0.02,\n tip: true,\n channels: OLYMPIAN_TOOLTIP_ATTRIBUTES\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":3161,"value":"### Series stacked binned bar chart","pinned":false,"hidden":false,"mode":"md"},{"id":744,"value":"Plot.plot({\n\n caption: \"Heights of Olympic athletes\",\n color: { legend: true },\n marks: [\n Plot.rectX(\n olympians,\n Plot.binY(\n { x: \"count\" },\n {\n y: \"height\",\n fill: \"sex\",\n tip: true\n }\n )\n ),\n Plot.ruleX([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":3492,"value":"### _Faceted_ binned bar chat","pinned":false,"hidden":false,"mode":"md"},{"id":803,"value":"Plot.plot({\n\n caption: \"Heights of Olympic athletes\",\n color: { legend: true },\n marks: [\n Plot.rectX(\n olympians,\n Plot.binY(\n { x: \"count\" },\n { y: \"height\", fill: \"sex\", fx: \"sex\", tip: true }\n )\n ),\n Plot.ruleX([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":3612,"value":"### Stacked beeswarm violin","pinned":false,"hidden":false,"mode":"md"},{"id":818,"value":"viewof sampleSize = Inputs.range([0, 2000], { label: \"Sample size\", step: 100 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":775,"value":"Plot.plot({\n\n caption: \"Heights of Olympic athletes\",\n height: 600,\n width,\n marks: [\n Plot.dot(\n _.sampleSize(olympians, 5000),\n Plot.dodgeX(\"middle\", {\n y: \"height\",\n fill: \"sex\",\n sort: \"sex\",\n padding: -1,\n tip: true,\n channels: OLYMPIAN_TOOLTIP_ATTRIBUTES\n })\n )\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":3619,"value":"### _Faceted_ beeswarm violin","pinned":false,"hidden":false,"mode":"md"},{"id":791,"value":"Plot.plot({\n\n caption: \"Heights of Olympic athletes\",\n width,\n marks: [\n Plot.dot(\n _.sampleSize(olympians, 2000),\n Plot.dodgeX(\"middle\", {\n y: \"height\",\n fx: \"sex\",\n r: \"weight\",\n fill: \"sex\",\n tip: true,\n channels: OLYMPIAN_TOOLTIP_ATTRIBUTES\n })\n )\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":963,"value":"### _Faceted_ beeswarm with even more facets\n\nBad.","pinned":false,"hidden":false,"mode":"md"},{"id":955,"value":"Plot.plot({\n\n caption: \"Heights of Olympic athletes\",\n width,\n fx: {\n domain: d3.groupSort(\n olympians,\n (g) => d3.median(g, (d) => d.height),\n (d) => d.sport\n ),\n tickRotate: 45\n },\n marginBottom: 100,\n marks: [\n Plot.frame(),\n Plot.dot(\n _.sampleSize(olympians, 3000),\n Plot.dodgeX(\"middle\", {\n y: \"height\",\n fx: \"sport\",\n fy: \"sex\",\n padding: -1,\n fill: \"sex\",\n tip: true,\n channels: OLYMPIAN_TOOLTIP_ATTRIBUTES\n })\n )\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":3625,"value":"### _Faceted_ binned bar chart","pinned":false,"hidden":false,"mode":"md"},{"id":972,"value":"Plot.plot({\n caption: \"Heights of Olympic athletes\",\n width,\n marginTop: 70,\n fx: {\n domain: d3.groupSort(\n olympians,\n (g) => d3.median(g, (d) => d.height),\n (d) => d.sport\n ),\n tickRotate: 45\n },\n marginBottom: 100,\n marks: [\n Plot.rectX(\n olympians,\n Plot.binY(\n { x: \"count\" },\n { y: \"height\", fill: \"sex\", fx: \"sport\", fy: \"sex\", tip: true }\n )\n )\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":3631,"value":"### Box plot","pinned":false,"hidden":false,"mode":"md"},{"id":983,"value":"Plot.plot({\n caption: \"Heights of Olympic athletes\",\n height: 800,\n width,\n x: {\n domain: d3.groupSort(\n olympians,\n (g) => d3.median(g, (d) => d.height),\n (d) => d.sport\n ),\n tickRotate: 45\n },\n marginBottom: 100,\n marks: [\n Plot.boxY(olympians, {\n x: \"sport\",\n y: \"height\",\n fy: \"sex\",\n tip: true,\n channels: OLYMPIAN_TOOLTIP_ATTRIBUTES,\n fill: \"sex\"\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":3633,"value":"### Box plot mixed with tick/barcode","pinned":false,"hidden":false,"mode":"md"},{"id":1051,"value":"Plot.plot({\n subcaption: \"Heights of Olympic athletes\",\n height: 800,\n width,\n x: {\n domain: d3.groupSort(\n olympians,\n (g) => d3.median(g, (d) => d.height),\n (d) => d.sport\n ),\n tickRotate: 45\n },\n marginBottom: 100,\n marks: [\n Plot.boxY(olympians, {\n x: \"sport\",\n y: \"height\",\n fy: \"sex\",\n tip: true,\n channels: OLYMPIAN_TOOLTIP_ATTRIBUTES,\n fill: \"sex\"\n }),\n Plot.tickY(olympians, {\n x: \"sport\",\n y: \"height\",\n fy: \"sex\",\n tip: true,\n channels: OLYMPIAN_TOOLTIP_ATTRIBUTES,\n stroke: \"sex\",\n strokeOpacity: 0.1\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":893,"value":"OLYMPIAN_TOOLTIP_ATTRIBUTES = ({\n name: \"name\",\n nationality: \"nationality\",\n sex: \"sex\",\n date_of_bith: \"date_of_birth\",\n height: \"height\",\n weight: \"weight\",\n sport: \"sport\",\n gold: \"gold\",\n silver: \"silver\",\n bronze: \"bronze\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":842,"value":"import { facetByIncome } from \"@mjbo/2019-2022-australian-federal-election-swings\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3641,"value":"facetByIncome","pinned":false,"hidden":false,"mode":"ojs"},{"id":3702,"value":"### Putting it all together, the Walmart data set","pinned":false,"hidden":false,"mode":"md"},{"id":3705,"value":"import {\n walmarts,\n us,\n statemesh,\n nation\n} from \"@observablehq/plot-map-small-multiples\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3783,"value":"Plot.plot({\n marks: [\n Plot.rectY(walmarts, Plot.binX({ y: \"count\" }, { x: \"date\" })),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":3708,"value":"walmarts","pinned":false,"hidden":false,"mode":"ojs"},{"id":3753,"value":"Plot.plot({\n projection: \"albers-usa\",\n fy: {\n interval: \"10 years\",\n tickFormat: (d) => `${d.getUTCFullYear()}’s`\n },\n marks: [\n Plot.geo(statemesh, { strokeOpacity: 0.1 }),\n Plot.geo(nation),\n Plot.dot(walmarts, {\n fy: \"date\",\n x: \"longitude\",\n y: \"latitude\",\n fill: \"currentColor\"\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":3812,"value":"### Temporal parameters","pinned":false,"hidden":false,"mode":"md"},{"id":3818,"value":"import { Scrubber } from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3825,"value":"import { lastDefined } from \"@observablehq/plot-wealth-health-nations\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3816,"value":"viewof year = Scrubber(\n d3.sort(d3.union(walmarts.map((d) => d.date.getFullYear()))),\n { loop: false, delay: 1000 / 24 }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":3814,"value":"Plot.plot({\n projection: \"albers-usa\",\n color: {\n label: \"Age (years) →\",\n type: \"linear\",\n domain: [0, 44],\n reverse: true,\n scheme: \"Magma\",\n legend: true\n },\n marks: [\n Plot.geo(statemesh, { strokeOpacity: 0.1 }),\n Plot.geo(nation),\n Plot.dot(walmarts, {\n filter: (d) => d.date.getFullYear() <= year,\n fill: (d) => year - d.date.getFullYear(),\n stroke: \"black\",\n strokeOpacity: 0.3,\n strokeWidth: 1,\n x: \"longitude\",\n y: \"latitude\"\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":3858,"value":"#### [The Wealth & Health of Nations](https://observablehq.com/@observablehq/plot-wealth-health-nations)\n\n> This is a [recreation](/@mbostock/the-wealth-health-of-nations) of a [Gapminder visualization](http://gapminder.org/world/) made famous by [Hans Rosling](https://www.ted.com/talks/hans_rosling_the_best_stats_you_ve_ever_seen). It shows per-capita income (*x*), life expectancy (*y*) and population (*area*) of 180 nations over the last 209 years, colored by region. Data prior to 1950 is sparse, so this chart shows the latest value in the data.","pinned":false,"hidden":false,"mode":"md"},{"id":2724,"value":"## Dimensionality reduction","pinned":false,"hidden":false,"mode":"md"},{"id":2728,"value":"### [_t_-SNE](https://www.jmlr.org/papers/volume9/vandermaaten08a/vandermaaten08a.pdf) (2008)\n> We present a new technique called “t-SNE” that visualizes high-dimensional data by giving each\ndatapoint a location in a two or three-dimensional map. The technique is a variation of Stochastic\nNeighbor Embedding (Hinton and Roweis, 2002) that is much easier to optimize, and produces\nsignificantly better visualizations by reducing the tendency to crowd points together in the center\nof the map.\n","pinned":false,"hidden":false,"mode":"md"},{"id":2737,"value":"\n### [UMAP](https://umap-learn.readthedocs.io/en/latest/) (2018)\n\n> [UMAP](https://github.com/lmcinnes/umap), by Leland McInnes et al., is a python package that reads a list of data point coordinates in ${tex`\\mathbb{R}^n`}, and calls to output a list of coordinates in, for example, ${tex`\\mathbb{R}^2`}, while maintaining as much as possible of the initial topology: points that are “neighbors” in the original space will be “neighbors” in the projected space.\n\n> In other words, UMAP (“Uniform Manifold Approximation and Projection”) is capable of doing dimensionality reduction, like [t-SNE](https://beta.observablehq.com/@fil/tsne-js-worker), but arguably more grounded from a mathematical standpoint ([DOI:10.21105/joss.00861](https://doi.org/10.21105/joss.00861))\n\n~ [Philippe Riviere](https://observablehq.com/@fil/hello-umap-js)","pinned":false,"hidden":false,"mode":"md"},{"id":2767,"value":"#### [MNIST & UMAP-js](https://observablehq.com/@fil/mnist-umap-js)","pinned":false,"hidden":false,"mode":"md"},{"id":2776,"value":"> The MNIST dataset consists of 65,000 little images of hand-drawn numbers.","pinned":false,"hidden":false,"mode":"md"},{"id":2800,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":2771,"value":"import {\n chart as mnistUmap,\n viewof restart as restartMnistUmap,\n inlineSprite,\n colors\n} from \"@fil/mnist-umap-js\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2860,"value":"Each number below represents a hand-drawn digit (such as ${inlineSprite(5)} or ${inlineSprite(2)}) positioned by similarity using UMAP. Notice that digits representing the same number (say ${inlineSprite(10)}, ${inlineSprite(15)} and ${inlineSprite(19)}, in blue) tend to cluster together.`","pinned":false,"hidden":false,"mode":"md"},{"id":2803,"value":"viewof restartMnistUmap","pinned":false,"hidden":false,"mode":"ojs"},{"id":2792,"value":"mnistUmap","pinned":false,"hidden":false,"mode":"ojs"},{"id":2807,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":2748,"value":"#### [Exploring Fashion MNIST](https://observablehq.com/@stwind/exploring-fashion-mnist)","pinned":false,"hidden":false,"mode":"md"},{"id":2746,"value":"> [Fashion MNIST](https://github.com/zalandoresearch/fashion-mnist) is a MNIST-like fashion product dataset that contains 70,000 28x28 gray scale images each associated with a label from 10 classes. \n\n> This is an explorer of all the 70k images, clustered and embedded into 3 dimensions space using the [UMAP](https://umap-learn.readthedocs.io/en/latest/) algorithm. You can navigate by dragging the camera, clicking a specific image, jumping with an id or picking randomly.`","pinned":false,"hidden":false,"mode":"md"},{"id":2852,"value":"![image@6.png](${await FileAttachment(\"image@6.png\").url()})","pinned":false,"hidden":false,"mode":"md"},{"id":2810,"value":"#### [Genre map explorer for Spotify](https://observablehq.com/@mjbo/genre-map-explorer-for-spotify)","pinned":false,"hidden":false,"mode":"md"},{"id":2813,"value":"import { noiseMap, noiseMap3D } from \"@mjbo/genre-map-explorer-for-spotify\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2847,"value":"You can [embed to non-Euclidian spaces](https://umap-learn.readthedocs.io/en/latest/embedding_space.html) if you want.","pinned":false,"hidden":false,"mode":"md"},{"id":2838,"value":"noiseMap","pinned":false,"hidden":false,"mode":"ojs"},{"id":2843,"value":"noiseMap3D","pinned":false,"hidden":false,"mode":"ojs"},{"id":2869,"value":"### Interpretation caveats\n\n#### [How to [misread t-SNE]](https://distill.pub/2016/misread-tsne/)\n\n> Although extremely useful for visualizing high-dimensional data, t-SNE plots can sometimes be mysterious or misleading. By exploring how it behaves in simple cases, we can learn to use it more effectively.\n> ...\n> 1. Those hyperparameters really matter\n> 2. Cluster sizes in a t-SNE plot mean nothing\n> 3. Distances between clusters might not mean anything\n> 4. Random noise doesn’t always look random.\n> 5. You can see some shapes, sometimes\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":2876,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":2884,"value":"#### [Understanding UMAP](https://pair-code.github.io/understanding-umap/)","pinned":false,"hidden":false,"mode":"md"},{"id":2888,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":1729,"value":"## Perceptual attributes of scales","pinned":false,"hidden":false,"mode":"md"},{"id":1731,"value":"### [Area](https://observablehq.com/plot/features/scales#other-scales)","pinned":false,"hidden":false,"mode":"md"},{"id":1726,"value":"viewof radius = Inputs.range([1, 20], { label: \"radius\", value: 3, step: 0.1 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1723,"value":"areaDots = Plot.plot({\n r: { range: [0, radius] },\n marks: [\n Plot.dot(d3.range(1, 11), {\n x: Plot.identity,\n r: Plot.identity,\n fill: \"currentColor\"\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":3103,"value":"areaDots.scale(\"r\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":3107,"value":"Plot.lineX(\n d3\n .range(...areaDots.scale(\"r\").domain)\n .map((d) => areaDots.scale(\"r\").apply(d) ** 2)\n).plot({\n x: { label: \"r param\" },\n y: { label: \"scaled r ** 2\" }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":3011,"value":"#### [Bank failures](https://observablehq.com/@mbostock/bank-failures)","pinned":false,"hidden":false,"mode":"md"},{"id":945,"value":"import { dodgedBankFailures } from \"a177cf2eae4c1f06\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":948,"value":"dodgedBankFailures","pinned":false,"hidden":false,"mode":"ojs"},{"id":3099,"value":"#### ['Bank failures' as a stacked bar chart](https://observablehq.com/@mjbo/bank-failures-as-a-stacked-bar-chart)","pinned":false,"hidden":false,"mode":"md"},{"id":929,"value":"import { stackedBarBankFailures } from \"@mjbo/bank-failures-as-a-stacked-bar-chart\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":942,"value":"stackedBarBankFailures","pinned":false,"hidden":false,"mode":"ojs"},{"id":1736,"value":"### Color","pinned":false,"hidden":false,"mode":"md"},{"id":583,"value":"import {\n scheme3d,\n viewof schemeq,\n schemeLightness,\n allSchemesLightness\n} from \"@mjbo/perceptually-uniform-color-models\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":589,"value":"scheme3d","pinned":false,"hidden":false,"mode":"ojs"},{"id":591,"value":"viewof schemeq","pinned":false,"hidden":false,"mode":"ojs"},{"id":597,"value":"schemeLightness","pinned":false,"hidden":false,"mode":"ojs"},{"id":685,"value":"

Show all colormaps

\n ${allSchemesLightness}\n

","pinned":false,"hidden":false,"mode":"html"},{"id":602,"value":"#### Colormaps and color vision deficiency ","pinned":false,"hidden":false,"mode":"md"},{"id":1453,"value":" $\"image@5.png\"$ ","pinned":false,"hidden":false,"mode":"html"},{"id":1458,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":534,"value":"import { swatches } from \"@mjbo/color-schemes-under-color-vision-deficiency\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":541,"value":"swatches","pinned":false,"hidden":false,"mode":"ojs"},{"id":3470,"value":"## Simpson's Paradox","pinned":false,"hidden":false,"mode":"md"},{"id":1439,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":1441,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":3472,"value":"> **Simpson's paradox** is a phenomenon in probability and statistics in which a trend appears in several groups of data but disappears or reverses when the groups are combined.","pinned":false,"hidden":false,"mode":"md"},{"id":1418,"value":"viewof strokeSpecies = Inputs.toggle({label: \"stroke: \\\"species\\\"\", value: false})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1415,"value":"Plot.plot({\n grid: true,\n color: {\n legend: true,\n type: \"categorical\",\n domain: strokeSpecies ? [\"Chinstrap\", \"Gentoo\", \"Adelie\"] : undefined,\n range: strokeSpecies\n ? [\"rgb(197,92,199)\", \"rgb(0,116,112)\", \"rgb(255,128,36)\"]\n : undefined\n },\n marks: [\n Plot.dot(penguins, {\n x: \"culmen_length_mm\",\n y: \"culmen_depth_mm\",\n fill: strokeSpecies ? \"species\" : \"N/A\"\n }),\n Plot.linearRegressionY(penguins, {\n x: \"culmen_length_mm\",\n y: \"culmen_depth_mm\",\n stroke: strokeSpecies ? \"species\" : undefined\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":3873,"value":"## Part 2\n\nThis notebook is screaming for mercy so we continue here https://observablehq.com/@mjbo/uqcs-dataviz-talk-part-2","pinned":false,"hidden":false,"mode":"md"},{"id":2911,"value":"## Conclusion","pinned":false,"hidden":false,"mode":"md"},{"id":3881,"value":"$35","pinned":false,"hidden":false,"mode":"md"},{"id":1061,"value":"### Things for future talks","pinned":false,"hidden":false,"mode":"md"},{"id":15,"value":"- GeoJSON\n- Overpass turbo for GeoJSON extraction\n- Leaflet\n- DeckGL / KeplerGL\n- Victor's Ladder of abstraction\n- multi-axis plots\n- how to filter properly\n- tidy data\n- SQLite\n- streamed data (parquet data mapping, SQLiteVFS)","pinned":false,"hidden":false,"mode":"md"},{"id":2913,"value":"### Some of my work at [maxbo.me]()","pinned":false,"hidden":false,"mode":"md"},{"id":2925,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":3878,"value":"### References\n","pinned":false,"hidden":false,"mode":"md"},{"id":3866,"value":"viewof testData","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"- https://github.com/cxli233/FriendsDontLetFriends\n- https://en.wikipedia.org/wiki/Anscombe%27s_quartet\n- https://observablehq.com/@joshpoll/vvt-gog\n- https://ggvis.rstudio.com/\n- https://plotnine.readthedocs.io/en/v0.12.3/\n- https://ggvis.rstudio.com/vega.html\n- https://idl.cs.washington.edu/files/2017-VegaLite-InfoVis.pdf\n- https://seaborn.pydata.org/\n- https://en.wikipedia.org/wiki/Plotly\n- https://en.wikipedia.org/wiki/D3.js\n- https://en.wikipedia.org/wiki/Jacques_Bertin\n- https://en.wikipedia.org/wiki/Hadley_Wickham\n- https://en.wikipedia.org/wiki/Leland_Wilkinson\n- https://observablehq.com/plot/what-is-plot\n- https://ggplot2.tidyverse.org/\n- https://gadflyjl.org/stable/\n- https://github.com/hadley/ggplot1","pinned":false,"hidden":false,"mode":"md"},{"id":3864,"value":"import { viewof selected as testData } from \"@observablehq/plot-test-data\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2906,"value":"## Talk infrastructure","pinned":false,"hidden":false,"mode":"md"},{"id":525,"value":"culori = import(\"https://unpkg.com/culori@2.0.0/bundled/culori.min.mjs?module\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2880,"value":"import { height } from \"@fil/height\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":222,"value":"import { midpoint } from \"@recifs/midpoint-transform\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}