hello everybody
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 { data as lifeExpectancy } from "@d3/world-choropleth"
lifeExpectancy
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()
d3 = require("d3-fetch@1", "d3-array")
import { vl } from "@vega/vega-lite-api"
import { table } from "@tmcw/tables/2"
import { tryIt } from "3c458cfcac4dbda8"
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.