2b:null 2c:["$","title",null,{"children":"Data Visualization Fundamentals, Part 3 | Data Analyst | Observable"}] 31:[] 2f:{"id":"620139aab622173a","slug":null,"title":"Data Visualization Fundamentals, Part 3","thumbnail":"03acd757e5ca1d340c00204d1adad22862e33b9502bb390f36f29bfb076bf3cd","access_level":"public","create_time":"$D2023-03-14T03:21:48.502Z","update_time":"$D2023-03-14T16:57:42.194Z","view_time":null,"first_public_time":"$D2023-03-14T03:21:48.502Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"e9832e750c5328d6","login":"observabledemo1","name":"Data Analyst","avatar_url":"https://avatars-next.observableusercontent.com/5344663a42708976948d92017fd21d898b55b1697fa1e8ac6e2bee81ec749fb4","tier":"starter_2024"},"version":154,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"51fef7f99a55f2b9","login":"observabledemo1","name":"Product manager","avatar_url":"https://avatars-next.observableusercontent.com/5344663a42708976948d92017fd21d898b55b1697fa1e8ac6e2bee81ec749fb4","tier":null}],"members":[{"type":"individual","id":"51fef7f99a55f2b9","login":"observabledemo1","name":"Product manager","avatar_url":"https://avatars-next.observableusercontent.com/5344663a42708976948d92017fd21d898b55b1697fa1e8ac6e2bee81ec749fb4","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Data Visualization Fundamentals, Part 3","cells":[{"id":0,"value":"# Data Visualization Fundamentals, Part 3","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":81,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":34,"value":"inset = 5","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"Plot.plot({\n marks: [\n Plot.barY(alphabet, {x: \"letter\", y: \"frequency\", sort: {x: \"y\", reverse: true},\n insetLeft: inset, insetRight: inset}),\n Plot.ruleY([0])\n ],\n width\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"## Exploration vs. Explanation vs. Analysis","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"

Exploration and analysis

\n\n

Goal: explore a new dataset, get an overview, find answers to specific questions
early on, lots of things to explore
many charts, don't spend much time on individual ones
use generic charts, don't customize or worry about color schemes etc.

Explanation

\n\n

Goal: help others understand a relationship in the data
use as few charts as possible, carefully chosen
sequence so that they are easy to understand
add interaction to help people get a better understanding

Presentation

\n\n

Goal: walk your audience through an argument, help them come to a decision
focus on polishing charts: colors, legends, titles, etc.
highlighting of key elements (which might be considered biasing in exploration)
possibly use of unusual charts for memorability
sequence to make a specific point

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":85,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":19,"value":"## The \"pop-out\" effect","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":129,"value":"Plot.plot({\n marks: [\n Plot.barY(alphabet, {x: \"letter\", y: \"frequency\", sort: {x: \"y\", reverse: true}}),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"viewof letter = Inputs.range([0, 25], {label: \"Letter Position\", step: 1})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"Plot.plot({\n marks: [\n Plot.barY(alphabet, {x: \"letter\", y: \"frequency\",\n fill: (d, i) => i === letter ? \"steelblue\" : \"lightgray\",\n sort: {x: \"y\", reverse: true}}),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"sankey","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":41,"value":"## Comparisons","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":133,"value":"Plot.plot({\n y: {\n grid: true\n },\n marks: [\n Plot.barY([1 / 26], {fill: \"orange\", fillOpacity: .4}),\n // Plot.ruleY([1 / 26], {stroke: \"orange\"}),\n Plot.barY(alphabet, {x: \"letter\", y: \"frequency\", sort: {x: \"y\", reverse: true}}),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"Plot.plot({\n y: {\n grid: true,\n label: \"↑ Unemployment (%)\"\n },\n marks: [\n Plot.ruleY([0]),\n Plot.line(bls, {x: \"date\", y: \"unemployment\", z: \"division\", stroke: \"lightgray\", title: \"division\"}),\n // Plot.line(metro, {x: \"date\", y: \"unemployment\", z: \"division\", stroke: \"black\"}),\n Plot.line(bls, Plot.groupX({y: \"mean\"}, {x: \"date\", y: \"unemployment\", stroke: \"steelblue\"}))\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"viewof k = Inputs.range([1, 20], {label: \"Smoothing\", step: 1, value: 1})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"Plot.plot({\n marks: [\n // Plot.ruleY([0]),\n Plot.lineY(power_vs_temperature,\n Plot.windowY({x: \"date\", y: \"temperature\", k: k, reduce: \"mean\", stroke: \"city\"}))\n ],\n color: {\n domain: [\"Seattle\", \"Los Angeles\"],\n legend: true\n },\n marginLeft: 50\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"Plot.plot({\n marks: [\n Plot.dot(power_vs_temperature, {x: \"temperature\", y: \"power\", fill: \"city\"})\n ],\n color: {\n domain: [\"Seattle\", \"Los Angeles\"],\n legend: true\n },\n marginLeft: 50\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":48,"value":"import {bls} from \"@observablehq/plot-line\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"import {power_vs_temperature} from \"@observablehq/guide-electricity\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"import {Plot} from \"@mkfreeman/plot-tooltip\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"import {stateage} from \"@observablehq/plot-bar\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"import {driving} from \"@observablehq/plot-line\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"import {chart as sankey} from \"@d3/sankey\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1"}} 30:"$2f:body"