Data graphics developer at Gapminder. Teacher at DIS Stockholm. Escaping flatland one chart at a time.
My lesson 1My lesson 2My lesson 3My lesson 4My lesson 5Course Materials and PointersLesson 1: IntroductionLesson 2: Data RepresentationLesson 3: ComparisonsLesson 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
Lesson 4, Transformations
Plot.plot({
marks: [
Plot.barX(olympians, {x: 1, y: "nationality", sort: {y: "x", reverse: true, limit: 10},
title: "name"}),
],
marginLeft: 50
})
Plot.plot({
marks: [
Plot.barX(olympians, Plot.groupY({x: "count", title: "count"}, {y: "nationality",
sort: {y: "x", reverse: true, limit: 10}})),
Plot.ruleX([0])
],
marginLeft: 50
})
Plot.plot({
marks: [
Plot.barX(olympians, Plot.groupY({x: "mean"}, {y: "sport", x: "height",
sort: {y: "x", reverse: true, limit: 10}})),
Plot.ruleX([0])
],
marginLeft: 100
})
Plot.plot({
marks: [
Plot.dot(olympians, {x: "weight", stroke: "steelblue", opacity: .3}),
],
x: {
label: "weight (kg) →"
},
width
})
Plot.plot({
marks: [
Plot.dot(olympians, Plot.dodgeY({x: "weight", stroke: "steelblue", r: 1})),
],
x: {
label: "weight (kg) →"
},
width,
height: 1200
})
Plot.plot({
marks: [
Plot.rectY(olympians, Plot.binX({y: "count"}, {x: "weight"})),
Plot.ruleY([0])
],
width
})
viewof numBins = Inputs.range([1, 100], {label: "Number of bins", step: 1})
Plot.plot({
marks: [
Plot.rectY(olympians, Plot.binX({y: "count", title: "x"}, {x: "weight", thresholds: numBins})),
Plot.ruleY([0])
],
width,
marginLeft: 50
})
Plot.plot({
marks: [
Plot.barY(olympians, Plot.groupX({y: "count"}, {x: "nationality",
sort: {x: "y", reverse: true, limit: 10}})),
],
color: {
legend: true
}
})
Plot.plot({
marks: [
Plot.barY(olympians, Plot.groupX({y: "count"}, {x: "nationality", fill: "sport", title: "sport",
sort: {x: "y", reverse: true, limit: 10}})),
],
color: {
legend: true
}
})
Plot.plot({
marks: [
Plot.barY(olympians, Plot.groupX({y: "count"}, {x: "nationality", fill: "sex", title: "sport",
sort: {x: "y", reverse: true, limit: 10}})),
],
color: {
domain: ["male", "female"],
legend: true
}
})
DonutChart(islands, {name: d => d.name, value: d => d.value, innerRadius: 0})
Plot.plot({
y: {
tickFormat: "s"
},
marks: [
Plot.areaY(industries, {x: "date",
offset: stacking === "baseline" ? null : stacking,
y: "unemployed", fill: "industry"}),
Plot.ruleY([0])
]
})
Plot.plot({
marks: [
Plot.ruleY([0]),
Plot.lineY(aapl, Plot.windowY({x: "Date", y: "Close", reduce: reducer, k: k}))
]
})
Plot.plot({
marks: [
Plot.ruleY([1]),
Plot.line(stocks,
Plot.normalizeY({x: "Date", y: "Close", stroke: "Symbol", title: "Symbol"})),
],
y: {
type: "log",
grid: true,
label: "↑ Change in price (%)",
tickFormat: (f => x => f((x - 1) * 100))(d3.format("+d"))
},
})
import {Plot} from "@mkfreeman/plot-tooltip"
import {islands} from "@observablehq/datavis-course-lesson-1-introduction"
import {DonutChart} from "@d3/donut-chart"
import {stocks} from "@observablehq/plot-map"
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.
