The avatar for @observablehq
Observable
The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Public
Data Visualization Fundamentals and Best Practices Course
Edited
Jun 29, 2023
31 forks
10 stars
Data Visualization Fundamentals and Best Practices Course
Data Visualization Fundamentals and Best Practices: Course video and learning materialCourse Materials and PointersLesson 1: IntroductionLesson 2: Data RepresentationLesson 3: Comparisons
Lesson 4, Transformations
Lesson 5, InteractionData Vis Course AssignmentCourse: Data Visualization Fundamentals and Best Practices
Insert cell
Insert cell
Insert cell
Plot.plot({
marks: [
Plot.barX(olympians, {x: 1, y: "nationality", sort: {y: "x", reverse: true, limit: 10},
title: "name"}),
],
marginLeft: 50
})
Insert cell
Insert cell
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
})
Insert cell
Insert cell
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
})
Insert cell
Insert cell
Plot.plot({
marks: [
Plot.dot(olympians, {x: "weight", stroke: "steelblue", opacity: .3}),
],
x: {
label: "weight (kg) →"
},
width
})
Insert cell
Insert cell
Plot.plot({
marks: [
Plot.dot(olympians, Plot.dodgeY({x: "weight", stroke: "steelblue", r: 1})),
],
x: {
label: "weight (kg) →"
},
width,
height: 1200
})
Insert cell
Insert cell
Plot.plot({
marks: [
Plot.rectY(olympians, Plot.binX({y: "count"}, {x: "weight"})),
Plot.ruleY([0])
],
width
})
Insert cell
Insert cell
viewof numBins = Inputs.range([1, 100], {label: "Number of bins", step: 1})
Insert cell
Plot.plot({
marks: [
Plot.rectY(olympians, Plot.binX({y: "count", title: "x"}, {x: "weight", thresholds: numBins})),
Plot.ruleY([0])
],
width,
marginLeft: 50
})
Insert cell
Insert cell
Insert cell
Plot.plot({
marks: [
Plot.barY(olympians, Plot.groupX({y: "count"}, {x: "nationality",
sort: {x: "y", reverse: true, limit: 10}})),
],
color: {
legend: true
}
})
Insert cell
Insert cell
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
}
})
Insert cell
Insert cell
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
}
})
Insert cell
Insert cell
DonutChart(islands, {name: d => d.name, value: d => d.value, innerRadius: 0})
Insert cell
Insert cell
Insert cell
Plot.plot({
y: {
tickFormat: "s"
},
marks: [
Plot.areaY(industries, {x: "date",
offset: stacking === "baseline" ? null : stacking,
y: "unemployed", fill: "industry"}),
Plot.ruleY([0])
]
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
smooth = Plot.plot({
marks: [
Plot.ruleY([0]),
Plot.lineY(aapl, Plot.windowY({x: "Date", y: "Close", reduce: reducer, k: k}))
]
})
Insert cell
Insert cell
Insert cell
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"))
},
})
Insert cell
Insert cell
import {Plot} from "@mkfreeman/plot-tooltip"
Insert cell
import {islands} from "@observablehq/datavis-course-lesson-1-introduction"
Insert cell
import {DonutChart} from "@d3/donut-chart"
Insert cell
import {stocks} from "@observablehq/plot-map"
Insert cell

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.
Learn more