The end-to-end solution for building and hosting better data apps, dashboards, and reports.
alphabet = FileAttachment("alphabet.csv").csv() // about file attachments https://observablehq.com/@observablehq/file-attachments
alphabet[0] // what a row of data in `alphabet` looks like
// about viewof https://observablehq.com/@observablehq/a-brief-introduction-to-viewof
viewof simpleBar = vl.markBar() // Make a bar chart
.data(alphabet) // Using the alphabet data
.encode(
vl.x().fieldO("letter"), // .sort(vl.fieldQ("frequency").order("descending")), // Letters are ordinal on the x-axis
vl.y().fieldQ("frequency").axis({ format: "%" }) // Frequency on the y-axis, formatted as percent
)
.render()
viewof horizontalBar = vl.markBar()
.data(alphabet)
.encode(
vl.y().fieldO("letter"),
vl.x().fieldQ("frequency").axis({ format: "%" })
)
.render()
vowels = alphabet.map(d => ({...d, vowel: "AEIOU".includes(d.letter)}))
viewof aggregatedBar = vl.markBar()
.data(vowels)
.encode(
vl.x().sum("frequency").axis({ format: "%" }),
vl.y().fieldN("vowel")
)
.render()
weather = FileAttachment("pwm-weather@1.csv").csv()
weather[0] // A sample of the weather data
viewof stackedBar = vl.markBar()
.data(weather)
.encode(
vl.x().fieldO("date").timeUnit("utcmonth"),
vl.y().count(), // .stack("normalize").axis({ format: "%" }),
vl.color().fieldN("condition") // .scale({ range: weatherColors })
)
.render()
weatherColors = ["darkgray", "steelblue", "paleturquoise", "gold"]
viewof groupedBar = vl.markBar()
.data(weather)
.encode(
vl.column().fieldO("date").timeUnit("utcmonth"),
vl.x().fieldN("condition").axis({ title: null }),
vl.y().count(),
vl.color().fieldN("condition").scale({ range: weatherColors })
)
.render()
marketCap = FileAttachment("market-cap.csv").csv()
marketCap[0]
viewof line = vl.markLine()
//.data(marketCap)
.data(marketCap.filter(d => new Date(d.date) > new Date(2018, 0, 1)))
.encode(
vl.x().fieldT("date"), // date parsing!
vl.y().fieldQ("market cap").axis({ format: "$s" }),
vl.color().fieldN("symbol") // .sort(vl.max("market cap").order("descending"))
)
.render()
viewof area = vl.markArea()
.data(marketCap)
.encode(
vl.x().fieldT("date").timeUnit("yearmonth"),
vl.y().mean("market cap").axis({ format: "$s" }),
vl.color().fieldN("symbol")
)
.render()
viewof scatter = vl.markPoint()
.data(weather)
.encode(
vl.x().fieldT("date"), // .timeUnit('utcmonthdate'),
vl.y().fieldQ("tmax"),
vl.color().fieldN("condition").scale({ range: weatherColors }),
// vl.shape().fieldN("condition")
)
.render()
viewof strip = vl.markTick()
.data(weather)
.encode(
vl.x().fieldT("date").timeUnit('utcmonthdate'),
vl.y().fieldO("date").timeUnit("utcyear"),
// vl.y().fieldN("condition"),
vl.color().fieldN("condition").scale({ range: weatherColors }),
// vl.size().fieldQ("tmax")
)
.render()
viewof heatmap = vl.markRect({tooltip: {"content": "data"}, clip: true})
.data(weather)
.encode(
vl.y().fieldO("date").timeUnit("month"),
vl.x().fieldO("date").timeUnit("date"),
vl.color().average("tmax").scale({ scheme: "redyellowblue", reverse: true }),
// vl.size().average("precip")
)
.render()
commits = FileAttachment("github.csv").csv()
viewof punchCard = vl.markCircle()
.data(commits)
.encode(
vl.y().fieldO("time").timeUnit("day"), // .sort(["mon", "tue", "wed", "thu", "fri", "sat", "sun"]),
vl.x().fieldO("time").timeUnit("hours"),
vl.size().sum("count") //.scale({ range: [0, 200] })
)
.render()
viewof tableText = vl.markText()
.data(weather)
.encode(
vl.row().fieldO("date").timeUnit("utcyear"),
vl.y().fieldO("date").timeUnit("utcmonth"),
vl.x().fieldO("date").timeUnit("utcdate"),
vl.text().fieldN("condition")
)
.width(860)
.config({axisLeft: {title: null}, header: {title: null}})
.render()
airports = FileAttachment("airports.csv").csv()
airports[0]
viewof geoScatter = vl.markSquare({ size: 3 })
.data(airports)
.project(vl.projection("albersUsa")) // "Albers USA" includes an inset for Alaska and Hawaiʻi
// .project(vl.projection("orthographic").rotate([70, -10]))
.encode(
vl.longitude().fieldQ("longitude"),
vl.latitude().fieldQ("latitude"),
vl.color().fieldN("state").legend(false), // Color by state, but don’t need a legend
vl.tooltip("name")
)
.render()
viewof geoScatterFeatures = {
// Landmass for the U.S.
const landmass = vl.markGeoshape()
// Get the shape for the U.S. from the us-atlas npm module.
.data(vl.topojson("https://unpkg.com/us-atlas@3/nation-10m.json").feature("nation"))
.encode(
vl.stroke().value("lightgray"),
vl.color().value(null)
);
// The previous visualization
const points = vl.markCircle({ size: 3 })
.data(airports)
.encode(
vl.longitude().fieldQ("longitude"),
vl.latitude().fieldQ("latitude"),
vl.color().fieldN("state").legend(false)
);
// Return a combined view
return vl
.layer(landmass, points) // Layer the views together.
.project(vl.projection("albersUSA"))
.render();
}
import { hale } from "@d3/world-choropleth"
lifeExpectancy = new Map(hale.map(d => [d.name, d.hale]))
viewof choropleth = vl.markGeoshape()
.data(vl.topojson("https://unpkg.com/world-atlas@2/countries-110m.json").feature("countries"))
.transform( // Transform is advanced
vl.lookup("properties.name").from( // Lookup is even more advanced
vl.lookupData(Array.from(lifeExpectancy.entries())).key("0").fields("1")
).as("life expectancy")
)
.project(vl.projection("equalEarth"))
.encode(
vl.color().fieldQ("life expectancy").legend({ orient: "top" }),
vl.tooltip(["properties.name", "life expectancy"])
)
.width(width)
.height(width / 2.5)
.autosize({ type: "fit-x", contains: "padding" })
.render()
import { vl } from "@vega/vega-lite-api"
import { tryIt } from "3c458cfcac4dbda8"
d3.utcDay()
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.
