2f:[] 2d:{"title":"Data Visualization Fundamentals, Part 3","cells":[{"id":0,"value":"# Data Visualization Fundamentals, Part 3","pinned":false,"hidden":false,"mode":"md"},{"id":81,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":34,"value":"inset = 5","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":5,"value":"## Exploration vs. Explanation vs. Analysis","pinned":false,"hidden":false,"mode":"md"},{"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.

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

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

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

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"},{"id":85,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":19,"value":"## The \"pop-out\" effect","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":100,"value":"viewof letter = Inputs.range([0, 25], {label: \"Letter Position\", step: 1})","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":131,"value":"sankey","pinned":true,"hidden":false,"mode":"ojs"},{"id":87,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":41,"value":"## Comparisons","pinned":false,"hidden":false,"mode":"md"},{"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"},{"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"},{"id":151,"value":"viewof k = Inputs.range([1, 20], {label: \"Smoothing\", step: 1, value: 1})","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":45,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":48,"value":"import {bls} from \"@observablehq/plot-line\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":51,"value":"import {power_vs_temperature} from \"@observablehq/guide-electricity\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":54,"value":"import {Plot} from \"@mkfreeman/plot-tooltip\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":65,"value":"import {stateage} from \"@observablehq/plot-bar\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":75,"value":"import {driving} from \"@observablehq/plot-line\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":77,"value":"import {chart as sankey} from \"@d3/sankey\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W2f","stdlib":"1","titling":"auto"}