data = FileAttachment("city_populations.csv").csv({ typed: true })
Plot.plot({
marks: [
Plot.ruleY([0]),
Plot.lineY(data, { x: "year", y: "dehli", stroke: "blue" }),
Plot.lineY(data, { x: "year", y: "london", stroke: "red" }),
Plot.lineY(data, { x: "year", y: "lagos", stroke: "orange" }),
Plot.lineY(data, { x: "year", y: "tokyo", stroke: "green" })
]
})
flatdata = FileAttachment("city_populations_flat@1.csv").csv({ typed: true })
Plot.plot({
marks: [
Plot.ruleY([0]),
Plot.lineY(flatdata, { x: "year", y: "population", z: "city", stroke: "city" })
]
})
Plot.plot({
marks: [
Plot.barX(
flatdata.filter((x) => x.year == year2),
{
x: "population",
y: "city",
sort: { y: "y", reverse: false },
fill: "city"
}
),
Plot.ruleX([0])
]
})
viewof year = Inputs.range([1950, 2000], { step: 1 })
import { Scrubber } from "@mbostock/scrubber"
viewof year2 = Scrubber(
data.reverse().map((x) => x.year),
{ autoplay: false, loop: false, delay: 100 }
)
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.
