25:["$","title",null,{"children":"Correlation | FHOÖ Information Visualization | Observable"}] 4b:T59a,Plot.plot({ title: "Life expectancy by GDP per capita, " + 1950 + "-" + 2008, subtitle: "Source: Gapminder", width: width, height: "600", marginBottom: "70", marginLeft: "70", color: { legend: true, type: "categorical", scheme: "Tableau10", domain: regionsUpdated }, x: { label: null, tickFormat: ".0s", type: "log", base: 2, grid: true }, y: { label: null, grid: true }, r: { range: [0, 60] }, marks: [ // Year number "watermark" Plot.text([String(yearValue)], { fontSize: 400, opacity: 0.05, frameAnchor: "middle" }), // x-axis label in larger font size Plot.text(["GDP per capita (price and inflation adjusted, in PPP$2017 units) →"], { fontSize: 15, frameAnchor: "bottom", dy: 50 }), // Vertical y-axis label in larger font size Plot.text(["Life expectancy at birth (in years) →"], { fontSize: 15, frameAnchor: "left", rotate: -90, dx: -50, dy: 110 }), // The data Plot.dot(recentNationsData, { x: "income", y: "lifeExpectancy", filter: (d) => d.year === yearValue, r: "population", fill: "region", opacity: 0.7, stroke: "region", tip: true, title: "name" }), // Crosshair Plot.crosshair(recentNationsData, { x: "income", y: "lifeExpectancy", }) ] })4c:T47a,Plot.plot({ marginTop: 80, marginLeft: 120, r: { type: "linear", range: [5, 28] }, color: { scheme: "RdYlGn", domain: [1, 5] }, x: { domain: ["Z-Score", "", "Key Skill", " ", ...fields], axis: "top", label: null, tickSize: 0, tickRotate: -35 }, y: { domain: d3 .groupSort( data, // Sort by Z-Score, break ties by Key Skill * epsilon (v) => v.find((d) => d.field === "Z-Score").value + 1e-6 * v.find((d) => d.field === "Key Skill").value, (d) => d.name ) .reverse(), label: null, tickSize: 0 }, marks: [ Plot.dot(data, { filter: (d) => d.field !== "Z-Score", x: "field", y: "name", r: "value", fill: "value" }), Plot.dot(data, { filter: (d) => d.field === "Z-Score", x: "field", y: "name", r: (d) => d["value"] * 0.5, fill: "steelblue", fillOpacity: (d) => (d["value"] - 7) * 0.6 }), Plot.text(data, { x: "field", y: "name", text: "value", fill: "white" }) ], width: 700, height: 500 })4d:[{"id":"750230a5453d7e2328a6a7cb6764910e47af2b8534494ffb35a86e1c764dac44770fdcd4bc30c51204e381db3a85cb773575de1242b481b2b1f03dcced82585e","href":"https://static.observableusercontent.com/files/750230a5453d7e2328a6a7cb6764910e47af2b8534494ffb35a86e1c764dac44770fdcd4bc30c51204e381db3a85cb773575de1242b481b2b1f03dcced82585e","name":"anscombe.csv","type":"text/csv","lastModified":1742738428184.658,"size":465},{"id":"ad2039c034329bf5bce8908075eef23ce575b99c7de0ec4fd85a1ddb586469b939bfd5184e6323ee9575c866548db9fced5f12d7d6c875483ef47885f4c3e5de","href":"https://static.observableusercontent.com/files/ad2039c034329bf5bce8908075eef23ce575b99c7de0ec4fd85a1ddb586469b939bfd5184e6323ee9575c866548db9fced5f12d7d6c875483ef47885f4c3e5de","name":"Datasaurus_data+headers.csv","type":"text/csv","lastModified":1742739173675.411,"size":2205},{"id":"f3aaa869b15c50bc2374583e9e671f6a513983b5353076c12a9f5f03732881da17d2a009b2e2c41b7dc6299f077acc0d7ab534e5c512af31bcba331f20ac4ce6","href":"https://static.observableusercontent.com/files/f3aaa869b15c50bc2374583e9e671f6a513983b5353076c12a9f5f03732881da17d2a009b2e2c41b7dc6299f077acc0d7ab534e5c512af31bcba331f20ac4ce6","name":"nations.csv","type":"text/csv","lastModified":1742740379931.049,"size":928960},{"id":"35c424f9c9e195c2b72712727e2998b2bf80d63484ab012e52525c99d1dd6d9ccb7c76f4171a0e2b2fb705651e70ac2c76029c82c1a208ce25a44180e43abb60","href":"https://static.observableusercontent.com/files/35c424f9c9e195c2b72712727e2998b2bf80d63484ab012e52525c99d1dd6d9ccb7c76f4171a0e2b2fb705651e70ac2c76029c82c1a208ce25a44180e43abb60","name":"vaccines.json","type":"application/json","lastModified":1742743117460.066,"size":352852},{"id":"1b20adfd2d1f5d085136334fee4ec6c2b9c15313f190e5df9e4623bb361dd88d82fd8b51e9c24d9f4c28b5ba3b18a266aef6069a57924177e3b2ce5155ef5b03","href":"https://static.observableusercontent.com/files/1b20adfd2d1f5d085136334fee4ec6c2b9c15313f190e5df9e4623bb361dd88d82fd8b51e9c24d9f4c28b5ba3b18a266aef6069a57924177e3b2ce5155ef5b03","name":"candidates.csv","type":"text/csv","lastModified":1742743853158.165,"size":842}] 47:{"id":"f21ba63b34c40397","slug":"correlation","title":"Correlation","thumbnail":"04acacad63cd25b42315bd361a067c4aed28a9c409f5bd2115ec17aafe390856","access_level":"public","create_time":"$D2025-03-23T13:39:12.995Z","update_time":"$D2025-05-02T08:38:40.737Z","view_time":null,"first_public_time":"$D2025-03-23T15:06:59.954Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"4fbb25fe821f18db","login":"fhooe-infovis","name":"FHOÖ Information Visualization","avatar_url":"https://avatars-next.observableusercontent.com/ed8c4512a4de73fcd51f2a548db547555258287f869eea03112d4859ccbac5c3","tier":"education_2026","bio":"","followed_by_you":false,"follows_you":false},"version":198,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"65ffd534de330094","login":"mandykeck","name":"Mandy Keck","avatar_url":"https://avatars-next.observableusercontent.com/0f537a0f64fadffd6bdc89fc8ec0139996ce692d1483c1a1c1a9ef22b7462ec4","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"65ffd534de330094","login":"mandykeck","name":"Mandy Keck","avatar_url":"https://avatars-next.observableusercontent.com/0f537a0f64fadffd6bdc89fc8ec0139996ce692d1483c1a1c1a9ef22b7462ec4","tier":null,"role":"editor"},{"type":"team","id":"4fbb25fe821f18db","login":"fhooe-infovis","name":"FHOÖ Information Visualization","avatar_url":"https://avatars-next.observableusercontent.com/ed8c4512a4de73fcd51f2a548db547555258287f869eea03112d4859ccbac5c3","tier":"education_2026","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"f55abcef8c28faa3","slug":"chart-types","title":"Chart Types","owner":{"id":"4fbb25fe821f18db","login":"fhooe-infovis","name":"FHOÖ Information Visualization"}},"type":"notebook","body":{"titling":"auto","title":"Correlation","cells":[{"id":0,"value":"# Correlation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"## Scatterplot","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"**WHAT:** *quantitative* x *quantitative*
\n**WHY:** correlation, lookup values, distributions, outliers, find trends, locate clusters","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":20,"value":"Plot.plot({\n marks: [\n Plot.dot(cars, {x: \"power (hp)\", y: \"economy (mpg)\"})\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"### Regression line\n* scatterplots are also highly effective for judging the correlation between two attributes\n* the stronger the correlation, the closer the points fall along a perfect diagonal line\n* one way to make correlation even clearer is to add a regression line","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":25,"value":"Plot.plot({\n marks: [\n Plot.dot(cars, {x: \"power (hp)\", y: \"economy (mpg)\"}),\n Plot.linearRegressionY(cars, {x: \"power (hp)\", y: \"economy (mpg)\", stroke: \"red\"})\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"In a 1973 paper, Francis Anscombe [published four small datasets now know as _Anscombe's quartet_](https://eagereyes.org/criticism/anscombes-quartet) to show the limits of summary statistics. The four datasets in the quartet share several statistical properties: their mean values, variances, and regression coefficients. That would make them appear quite similar to each other, but when we visualize them, they're clearly different.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":35,"value":"anscombe = await FileAttachment(\"anscombe.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"anscombe","database":"$undefined"},{"id":33,"value":"Plot.plot({\n grid: true,\n inset: 10,\n width: 928,\n height: 240,\n facet: {\n data: anscombe,\n x: \"group\"\n },\n marks: [\n Plot.frame(),\n Plot.dot(anscombe, {x: \"x\", y: \"y\"}),\n Plot.linearRegressionY(anscombe, {x: \"x\", y: \"y\", stroke: \"steelblue\", ci: 0})\n ],\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"More recently, Alberto Cairo designed the [DataSaurus](https://web.archive.org/web/20240620205540/http:/www.thefunctionalart.com/2016/08/download-datasaurus-never-trust-summary.html) to make the same point, you have to visualize the data to see the dino. Researchers at AutoDesk [created a clever system to create datasets of different shapes that share summary statistics](https://www.autodesk.com/research/publications/same-stats-different-graphs).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":44,"value":"datasaurus = FileAttachment(\"Datasaurus_data+headers.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"Plot.plot({\n marks: [\n Plot.dot(datasaurus, {x: \"A\", y: \"B\", fill: \"steelblue\"})\n ],\n height: 400,\n width: 400\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"## Bubble Chart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":50,"value":"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":63,"value":"import {Scrubber} from '@mbostock/scrubber'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"nations = FileAttachment(\"nations.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"Plot.plot({\n title: \"Life expectancy by GDP per capita, \" + 1950 + \"-\" + 2008,\n x: { type: \"log\"},\n r: { range: [0, 60]},\n marks: [\n Plot.dot(recentNationsData, {\n x: \"income\",\n y: \"lifeExpectancy\",\n filter: (d) => d.year === yearValue,\n r: \"population\",\n fill: \"region\",\n opacity: 0.6\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"viewof yearValue = Scrubber(d3.range(1950, 2008), {\n autoplay: false,\n delay: 300,\n loop: false,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"regionsUpdated = [\n \"America\",\n \"Sub-Saharan Africa\",\n \"Middle East & North Africa\",\n \"Europe & Central Asia\",\n \"South Asia\",\n \"East Asia & Pacific\"\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"recentNationsData = nations.filter(d => d.year >= 1950 && d.year <= 2008)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"## Correlation Matrix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":99,"value":"**WHAT:** *categorical (ordinal or nominal)* x *categorical* x *quantitative*
\n**WHY:** correlation, outliers, distributions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":106,"value":"candidates = FileAttachment(\"candidates.csv\").csv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"candidates","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":179,"value":"Plot.plot({\n marginTop: 80,\n marginLeft: 120,\n r: { type: \"linear\", range: [5, 28] },\n color: { scheme: \"RdYlGn\", domain: [1, 5]},\n x: {\n tickRotate: -35, axis: \"top\",\n },\n marks: [\n Plot.dot(data, {\n x: \"field\",\n y: \"name\",\n r: \"value\",\n fill: \"value\",\n opacity: 0.9\n }),\n\n Plot.text(data, {\n x: \"field\",\n y: \"name\",\n text: \"value\",\n fill: \"white\"\n })\n ],\n width: 700,\n height: 500\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"fields = [\"Z-Score\"].concat(candidates.columns.slice(3))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"// reshape\ndata = candidates\n .map((d) =>\n fields.map((field) => ({\n name: d.Candidate,\n value: field === \"Z-Score\" ? d[\"Z\"] : d[field],\n field\n }))\n )\n .flat()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"## Correlation Heatmap","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":134,"value":"Plot.plot({\n marks: [\n Plot.cell(weather.slice(-365), {\n x: d => d.date.getUTCDate(),\n y: d => d.date.getUTCMonth(),\n fill: \"temp_max\"\n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"#### The impact of vaccines","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":140,"value":"viewof disease = Inputs.select(vaccines.map(d => d.disease), {unique: true, label: \"Disease\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"Plot.plot({\n width,\n height: 930,\n marginBottom: 30,\n padding: 0,\n round: false,\n label: null,\n x: {axis: \"top\"},\n color: {\n scheme: \"purd\",\n legend: true,\n type: \"sqrt\",\n label: \"Cases per 100,000 people\"\n },\n marks: [\n Plot.barX(vaccines.filter(d => d.disease === disease), {\n x: \"date\",\n y: \"state\",\n interval: \"year\",\n inset: 0.5,\n fill: \"cases\",\n title: \"cases\"\n }),\n Plot.ruleX([introductions.find(d => d.disease === disease)], {\n x: \"date\"\n }),\n Plot.text([introductions.find(d => d.disease === disease)], {\n x: \"date\",\n dy: 4,\n lineAnchor: \"top\",\n frameAnchor: \"bottom\",\n text: (d) => `${d.date.getUTCFullYear()}\\nVaccine introduced`\n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"vaccines = {\n const vaccines = await FileAttachment(\"vaccines.json\").json();\n return vaccines\n .flatMap(({title: disease, data: {values: {data}}}) => data\n .map(([date, stateIndex, cases]) => ({\n disease, \n date: new Date(`${date}-01-01`), \n state: states[stateIndex], \n cases\n })));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"introductions = {\n const vaccines = await FileAttachment(\"vaccines.json\").json();\n return vaccines\n .map(({title: disease, data: {chart_options: {vaccine_year}}}) => ({\n disease,\n date: new Date(Date.UTC(vaccine_year, (vaccine_year % 1) * 12, 1))\n }));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"states = [\"Alaska\", \"Ala.\", \"Ark.\", \"Ariz.\", \"Calif.\", \"Colo.\", \"Conn.\", \"D.C.\", \"Del.\", \"Fla.\", \"Ga.\", \"Hawaii\", \"Iowa\", \"Idaho\", \"Ill.\", \"Ind.\", \"Kan.\", \"Ky.\", \"La.\", \"Mass.\", \"Md.\", \"Maine\", \"Mich.\", \"Minn.\", \"Mo.\", \"Miss.\", \"Mont.\", \"N.C.\", \"N.D.\", \"Neb.\", \"N.H.\", \"N.J.\", \"N.M\", \"Nev.\", \"N.Y.\", \"Ohio\", \"Okla.\", \"Ore.\", \"Pa.\", \"R.I.\", \"S.C.\", \"S.D.\", \"Tenn.\", \"Texas\", \"Utah\", \"Va.\", \"Vt.\", \"Wash.\", \"Wis.\", \"W.Va.\", \"Wyo.\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"1"}} 24:null