The avatar for @msalharbi
Mohammad Alharbi
Public
Data Visualization Fundamentals
Edited
Apr 5, 2023
Fork of Lesson 1: Introduction
•
11 forks
4 stars
5
Insert cell
Insert cell
Insert cell
Insert cell
olympians
Insert cell
Insert cell
viewof table3 = Inputs.table(cars)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
viewof table1 = Inputs.table(alphabet)
Insert cell
Plot.plot({
marks: [
Plot.barY(alphabet, {x: "letter", y: "frequency", sort: {x: "y", reverse: true}})
]
})
Insert cell
Insert cell
viewof table2 = Inputs.table(olympians)
Insert cell
olympians
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
cars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
islands
Insert cell
Plot.plot({
marks: [
Plot.barY(islands, {x: "name", y: "value", fill:"name",sort: {x: "y", reverse: true}}),
Plot.ruleY([0])
]
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
datasaurus = FileAttachment("Datasaurus_data+headers.csv").csv({typed: true})
Insert cell
anscombe = FileAttachment("anscombe.csv").csv({typed: true})
Insert cell
import {toc} from "@mbostock/toc"
Insert cell
import {DonutChart} from "@d3/donut-chart"
Insert cell
islands = [...d3.group(penguins, d => d.species).entries()].map(d => {
return {
name: d[0],
value: d[1].length
}
}).sort((a, b) => d3.descending(a.value, b.value))
Insert cell
import {chart as sankey} from "@d3/sankey"
Insert cell
import {Plot} from "@mkfreeman/plot-tooltip"
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