Data graphics developer at Gapminder. Teacher at DIS Stockholm. Escaping flatland one chart at a time.
My lesson 1My lesson 2My lesson 4My lesson 5Course Materials and PointersLesson 1: IntroductionLesson 2: Data RepresentationLesson 3: ComparisonsLesson 4, TransformationsLesson 5, InteractionData Vis Course AssignmentCourse: Data Visualization Fundamentals and Best PracticesMy pizza orders assignmentData science workflows in JavaScript - Session 3 follow-along notebookAssignment (Data science workflows in JavaScript Workshop Series)Session 4: Introduction to Observable Plot (Follow-along version)Plot course assignment
My lesson 3
Facets
Plot.plot({
facet: {
data: olympians,
y: "sport",
marginLeft: 50
},
marks: [
Plot.frame({stroke: "#aaa", strokeWidth: 0.5}),
Plot.dot(olympians, {x: "weight", y: "sex", fill: "sex", r: 1})
],
height: 400,
marginTop: 0,
marginLeft: 100,
x: {inset: 10, grid: true, label: "weight (kg) →"},
y: {axis: null, inset: 2},
color: {legend: true}
})
Plot.plot({
width: 1000,
x: {
axis: null,
domain: stateage.ages
},
y: {
grid: true,
tickFormat: "s"
},
color: {
domain: stateage.ages,
scheme: "spectral",
legend: true
},
fx: {
domain: d3.groupSort(stateage, v => d3.sum(v, d => -d.population), d => d.state).slice(0,12),
label: null,
tickSize: 6
},
facet: {
data: stateage,
x: "state"
},
marks: [
Plot.barY(stateage, {x: "age", y: "population", fill: "age", title: "age"}),
Plot.ruleY([0])
]
})
import {stateage} from "@observablehq/plot-bar"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
