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"
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.
