The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Plot.plot({
marks: [
Plot.rectY(selectedAthletes, Plot.binX({y: "count"}, {x: "weight", fill: "sex"})),
Plot.ruleY([0])
],
color: {
legend: true
},
x: {
domain: [0, 200]
}
})
Plot.plot({
marks: [
Plot.barY(alphaFiltered, {x: "letter", y: "frequency"}),
Plot.ruleY([0])
],
x: {
domain: pinAxis ? d3.sort(alphabet.map(d => d.letter)) : undefined
}
})
alphaFiltered = alphabet.filter(d => d.frequency >= minFrequency)
Plot.plot({
marks: [
Plot.dot(carsFiltered, {x: "power (hp)", y: "economy (mpg)", title: "name"})
],
x: {
domain: pinCarAxes ? [40, 240] : undefined
},
y: {
domain: pinCarAxes ? [8, 48] : undefined
}
})
Plot.plot({
marks: [
Plot.ruleY([0, minFreq2]),
Plot.barY(alphabet, {x: "letter", y: "frequency",
fill: d => d.frequency >= minFreq2 ? "steelblue" : "lightgray" })
]
})
visofcylinders = Plot.plot({
marks: [
Plot.dot(cars, {x: "power (hp)", y: "economy (mpg)", title: "name",
fill: d => d.cylinders === cylinders ? "steelblue" : "lightgray",
r: d => d.cylinders === cylinders ? 5 : 3
})
],
height: 600,
width
})
Plot.plot({
marks: [
Plot.dot(carMakes, {x: xDimension, y: yDimension, fill: "cylinders", title: "name",
sort: {y: "x", reverse: true, limit: 10}})
],
color: {
type: "ordinal",
legend: true
},
marginLeft: 100
})
Plot.plot({
marks: [
Plot.areaY(mortgageData.filter(d => d.metric != 'Total Amount Paid'),
Plot.stackY({order: ["Total Principal Paid", "Total Interest Paid"],
x: "key", y: "value", fill: "metric"})),
Plot.ruleY([0])
],
color: {
domain: ["Total Principal Paid", "Total Interest Paid"],
range: ["steelblue", "darkorange"],
legend: true
},
y: {
tickFormat: "s",
},
x: {
label: "months"
}
})
import {Plot} from "@mkfreeman/plot-tooltip"
import {carMakes} from "@observablehq/lesson-2-data-representation"
mortgageData = tidy(calculateMortgageData((interestRate / 100) / 12, duration * 12, purchasePrice - downPayment))
import {calculateMortgageData, tidy} from "@observablehq/modeling-in-observable"
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.
