cars.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
cars
X
year
Y
power (hp)
Color
—
Size
—
Facet X
—
Facet Y
—
Mark
Auto
Type Chart, then Shift-Enter. Ctrl-space for more options.
cars
X
power (hp)
Y
economy (mpg)
Color
#cccccc
Size
—
Facet X
cylinders
Facet Y
—
Mark
Auto
Type Chart, then Shift-Enter. Ctrl-space for more options.
cars
X
weight (lb)
Y
0-60 mph (s)
Color
#cccccc
Size
—
Facet X
—
Facet Y
—
Mark
Auto
Type Chart, then Shift-Enter. Ctrl-space for more options.
cars
X
power (hp)
Y
0-60 mph (s)
Color
#cccccc
Size
—
Facet X
—
Facet Y
—
Mark
Auto
Type Chart, then Shift-Enter. Ctrl-space for more options.
import { chart } from "@d3/bar-line-chart"
import { data } from "@d3/bar-line-chart"
import { Wrangler, op } from "@observablehq/data-wrangler"
// To use copied code replace "data" with your own variable
processed_data = aq
.from(cars)
.select("name", "power (hp)")
.filter((d) => op.startswith(d["name"], "Volvo"))
.rename({ "power (hp)": "frequency" })
.rename({ name: "letter" })
.objects() // Uncomment to return an array of objects
processed_data
Type Table, then Shift-Enter. Ctrl-space for more options.
import { alphabet } from "@d3/bar-chart"
car_chart
import { chart as car_chart } with { processed_data as alphabet } from "78b3c96c93737459"
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.
