The avatar for @observablehq
Observable
The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Public
Libraries
Edited
Feb 16, 2023
3 forks
Importers
99 stars
2
Insert cell
Insert cell
Insert cell
Insert cell
_
Insert cell
_.mean([25, 24, 26, 12])
Insert cell
Insert cell
aq
Insert cell
Insert cell
Arrow
Insert cell
Insert cell
d3
Insert cell
d3.mean([25, 24, 26, 12])
Insert cell
d3.create("svg")
.attr("width", 128)
.attr("height", 128)
.call(svg => svg.selectAll("circle")
.data(d3.range(128, 0, -8))
.join("circle")
.attr("fill", d3.scaleSequential(d3.interpolateViridis).domain([0, 128]))
.attr("r", d => d))
.node()
Insert cell
Insert cell
dot
Insert cell
dot`digraph { rankdir = RL; x -> y -> z; }`
Insert cell
Insert cell
htl
Insert cell
htl.html`Hello, <i>world</i>!`
Insert cell
Insert cell
Inputs
Insert cell
viewof gain = Inputs.range([0, 11], {value: 5, step: 0.1, label: "Gain"})
Insert cell
gain
Insert cell
Insert cell
L
Insert cell
map = {
const container = yield htl.html`<div style="height: 400px; max-width: 640px;">`;
const map = L.map(container).setView([37.774, -122.423], 13);
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution: "© <a href=https://www.openstreetmap.org/copyright>OpenStreetMap</a> contributors"
}).addTo(map);
}
Insert cell
Insert cell
mermaid
Insert cell
mermaid`graph TD
A-->B
A-->C
B-->D
C-->D`
Insert cell
Insert cell
Plot
Insert cell
Plot.rectY(movies, Plot.binX({y: "count"}, {x: "IMDB Rating"})).plot()
Insert cell
Insert cell
SQLite
Insert cell
chinook = FileAttachment("chinook.db").sqlite()
Insert cell
Inputs.table(await chinook.query(`SELECT * FROM albums`))
Insert cell
Insert cell
topojson
Insert cell
Insert cell
vl
Insert cell
vl.markBar()
.data(movies)
.encode(vl.x().fieldQ('IMDB Rating').bin(true), vl.y().count())
.render()
Insert cell
movies = FileAttachment("movies.json").json()
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more