The end-to-end solution for building and hosting better data apps, dashboards, and reports.
wb_tidy.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
Plot.plot({
marks: [
Plot.frame(),
Plot.dot(worldbank, {
filter: d => d.year == 2010,
x: "gdp",
y: "co2",
fill: "#ccc",
r: "life_exp",
opacity: 0.7
}),
Plot.dot(worldbank, {
filter: d => d.year == 2010,
x: "gdp",
y: "co2",
fill: "life_exp",
r: "life_exp",
opacity: 0.7,
tip: true,
fy: "income_group"
})
],
x: { type: "log", label: "GDP (USD)"},
y: { type: "log", label: "CO2 Emissions"},
fy: {label: "Income group", domain: ["NA", "Low income", "Lower middle income", "Upper middle income", "High income"], reverse: true},
color: { legend: true, label: "Life expectancy (years)"},
r: { domain: d3.extent(worldbank, (d) => d.life_exp), range: [1, 10] },
marginRight: 150
})
Plot.plot({
marks: [
Plot.lineY(stocks, {x: "Date", y: "Close", stroke: "symbol"})
],
color: {legend: true}
})
// Calculates (by default a rolling mean, using the current value as the middle of the window). Can also update to "start" or "end" for leading or trailing windows! Add `strict` to avoid noisy tails (from incomplete windows at series endpoints)
Plot.plot({
marks: [
Plot.lineY(stocks, {
x: "Date",
y: "Close",
stroke: "symbol",
opacity: 0.3,
tip: true
}),
Plot.lineY(
stocks,
Plot.windowY(
{ k: 50, anchor: "middle", reduce: "mean", strict: true },
{ x: "Date", y: "Close", stroke: "symbol" }
)
),
Plot.text(
stocks, Plot.selectLast({x: "Date", y: "Close", text: "symbol", fill: "symbol", dx: 15, fontSize: 18})),
Plot.tip([`Oct 27, 2022: Elon Musk becomes Twitter CEO`],
{x: new Date('2022-10-27'), y: 250, anchor: "bottom-left"}
)
],
color: { legend: true, range: ["teal", "navy", "orange"] },
y: { label: "Closing Price (USD)" },
marginRight: 100
})
Meteorite_Landings.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
Plot.plot({
projection: "equal-earth",
marks: [
Plot.graticule(),
Plot.geo(land, {fill: "#ccc"}),
Plot.dot(meteorites, {x: "reclong", y: "reclat", r: "mass (g)", fill: "purple", opacity: 0.5, tip: true})
],
r: {range: [1, 10]}
})
viewof pickColor = Inputs.color({label: "Favorite color", value: "#4682b4"})
// Update the fill option to depend on the value of pickColor to make it interactive!
Plot.plot({
marks: [
Plot.dot(cars, {x: "power (hp)", y: "economy (mpg)"})
]
})
viewof pickWindow = Inputs.range([2, 90], {label: "Amount", step: 1})
Plot.plot({
marks: [
Plot.lineY(stocks, {x: "Date", y: "Close", stroke: "symbol", opacity: 0.3}),
Plot.lineY(stocks, Plot.windowY({k: pickWindow, anchor: "middle", reduce: "mean", strict: true}, {x: "Date", y: "Close", stroke: "symbol"}))
],
color: {legend: true, range: ["teal", "navy", "orange"]},
y: {label: "Closing Price (USD)"}
})
aapl = FileAttachment("aaplStock.csv").csv({typed: true})
goog = FileAttachment("googStock.csv").csv({typed: true})
tsla = FileAttachment("tslaStock.csv").csv({typed: true})
dateParse = d3.timeParse("%m/%d/%y")
stocks = aapl.map(d => ({...d, symbol: "aapl"})).concat(goog.map(d => ({...d, symbol: "goog"})), tsla.map(d => ({...d, symbol: "tsla"}))).map(d => ({...d, Date: dateParse(d.Date)}))
import {land} from "@observablehq/plot-live-earthquake-map"
import { showMe } from "@observablehq/show-me"
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.