The end-to-end solution for building and hosting better data apps, dashboards, and reports.
alphabet = d3.csvParse(await FileAttachment("alphabet.csv").text())
viewof layeredBar = vl
.data(alphabet)
.layer(
vl.markBar()
.encode(
vl.y().fieldN("letter"),
vl.x().fieldQ("frequency").axis({ format: "%", grid: false })
),
vl.markText({ align: "left", dx: 5, dy: 1 })
.encode(
vl.y().fieldN("letter"),
vl.x().fieldQ("frequency"),
vl.text().fieldN("frequency").format(".2%")
)
)
.render()
weather = d3.csvParse(await FileAttachment("pwm-weather.csv").text())
viewof layeredTrend = vl.data(weather)
.encode(
vl.x().fieldO("date").timeUnit("utcmonth"),
vl.y().fieldQ("tmax")
)
.layer(
vl.markCircle()
.encode(
vl.color().fieldN("condition").scale({ range: weatherColors })
),
vl.markErrorband({ extent: "stdev" }),
vl.markLine()
.encode(
vl.y().mean("tmax")
)
)
.render()
cars = FileAttachment("cars.json").json()
viewof facetedCars = vl.markCircle()
.data(cars)
.encode(
vl.column().fieldN("Origin"),
vl.x().fieldQ("Horsepower"),
vl.y().fieldQ("Miles_per_Gallon")
)
.width(200).height(200)
.render()
viewof facetedWeather = vl.markCircle({ size: 10 })
.data(weather)
.encode(
vl.x().fieldT("date"),
vl.y().fieldQ("tmax"),
vl.column().fieldN("condition"),
vl.color().fieldN("condition").scale({ range: weatherColors }).legend(false)
)
.width(200)
.height(100)
.render();
viewof repeatedQuantities = vl.markBar()
.data(cars)
.encode(
vl.x().fieldQ(vl.repeat("repeat")).bin(true),
vl.y().count(),
vl.color().fieldN("Origin")
)
.width(width / 3 - 100)
.height(width / 4)
.repeat(["Horsepower", "Acceleration", "Displacement", "Miles_per_Gallon"])
.columns(3)
.render()
penguins = d3.csvParse(await FileAttachment("penguins.csv").text())
viewof splom = vl.markCircle()
.data(penguins)
.encode(
vl.x().fieldQ(vl.repeat("row")).scale({ zero: false }),
vl.y().fieldQ(vl.repeat("column")).scale({ zero: false }),
vl.color().fieldN("species").scale({ scheme: "set2" })
)
.width(Math.max(width / 4 - 80, 100))
.height(Math.max(width / 4 - 80, 100))
.repeat({
row: ["culmen_length_mm", "culmen_depth_mm", "flipper_length_mm", "body_mass_g"],
column: ["culmen_length_mm", "culmen_depth_mm", "flipper_length_mm", "body_mass_g"]
})
.render()
viewof marginalHistograms = {
const x = vl.x().fieldQ("culmen_length_mm").scale({ zero: false });
const y = vl.y().fieldQ("flipper_length_mm").scale({ zero: false });
const color = vl.color().fieldN("species").scale({ scheme: "set2" });
const scatter = vl.markCircle()
.encode(x, y, color);
const right = vl.markBar()
.encode(
y.axis(null),
vl.x().count(),
color
)
.width(50);
const top = vl.markBar()
.encode(
x.axis(null),
vl.y().count(),
color
)
.height(50);
return vl.vconcat(top, vl.hconcat(scatter, right))
.data(penguins)
.config({ concat: { spacing: 0 } })
.render();
}
viewof variousCharts = {
const temperatures = vl.markArea({ interpolate: "basis", color: "darkseagreen" })
.data(weather)
.encode(
vl.x().fieldT("date").timeUnit("utcyearmonth"),
vl.y2().average("tmax"),
vl.y().average("tmin")
)
.width(220)
.height(150);
const species = vl.markCircle()
.data(penguins)
.encode(
vl.x().fieldQ("culmen_length_mm").scale({ zero: false }),
vl.y().fieldQ("flipper_length_mm").scale({ zero: false }),
vl.color().fieldN("species").scale({ scheme: "set2" })
)
.width(220)
.height(150);
const letters = vl.markBar()
.data(alphabet)
.encode(
vl.x().fieldN("letter"),
vl.y().fieldQ("frequency")
)
.width(500)
.height(200);
return vl.vconcat(vl.hconcat(temperatures, species), letters).render();
}
d3 = require("d3-dsv@1")
import { vl } from "@vega/vega-lite-api"
import { thumbnail, tryIt, weatherColors } from "a9a4b43c00769b31"
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.
