Public
Edited
Jun 1, 2023
Insert cell
Insert cell
Plot.plot({
marks: [
Plot.barY(alphabet, {x: "letter", y: "frequency",
title: d => `Frequency: ${(d.frequency * 100).toFixed(2)}%`,
sort: {x: "y", reverse: true}}),
Plot.ruleY([0])
]
})
Insert cell
viewof selectedAthletes = Inputs.select(d3.group(olympians, d => d.sport), {label: "Sport:"})
Insert cell
d3.group(olympians, d => d.sport)
Insert cell
selectedAthletes
Insert cell
Plot.plot({
marks: [
Plot.rectY(selectedAthletes, Plot.binX({y: "count"}, {x: "weight", fill: "sex"})),
Plot.ruleY([0])
],
color: {
legend: true
},
x: {
domain: [0, 200]
}
})
Insert cell
viewof minFrequency = Inputs.range([0, .15], {label: "Min Frequency", step: .01, value: 0})
Insert cell
Plot.plot({
marks: [
Plot.barY(alphaFiltered, {x: "letter", y: "frequency"}),
Plot.ruleY([0])
],
x: {
domain: pinAxis ? d3.sort(alphabet.map(d => d.letter)) : undefined
}
})
Insert cell
import {Plot} from "@mkfreeman/plot-tooltip"
Insert cell
import {carMakes} from "@observablehq/lesson-2-data-representation"
Insert cell
import {calcuateMortgageData, tidy} from "@observablehq/modeling-in-observable"
Insert cell
mortgageData = tidy(calcuateMortgageData((interestRate / 100) / 12, duration * 12, purchasePrice - downPayment))
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