Add viewers to your workspace
Build data visualizations with code in notebooks
Not your typical notebook
Observable’s reactive JavaScript notebooks are uniquely suited for interactive data visualization, animation, learning, and experimentation.
View example
Plot.plot({
padding: 0,
color: {
pivot: d3.mean(seattle, d => d.temp_max),
legend: true,
scheme: "BuRd"
},
y: {tickFormat: Plot.formatMonth("en", "short")},
marks: [
Plot.cell(seattle, Plot.group({fill: "max"}, {
x: (d) => d.date.getUTCDate(),
y: (d) => d.date.getUTCMonth(),
fill: "temp_max",
inset: 0.5
}))
]
})View example
Plot.plot({
y: {grid: true},
color: {interpolate: "lab", range: ["#4269d0", "#efb118"]},
marginTop: 10,
marks: [
Plot.ruleY([0], {strokeOpacity: 0.3}),
Plot.dot(gistemp, {x: "Date", y: "Anomaly", r: 3, strokeWidth: 1.5, stroke: "Anomaly"}),
Plot.lineY(gistemp, Plot.windowY(12, {x: "Date", y: "Anomaly"})),
],
})View example
SankeyChart({
links: energy
}, {
nodeGroup: d => d.id.split(/\W/)[0],
nodeAlign,
linkColor,
format: (f => d => `${f(d)} TWh`)(d3.format(",.1~f")),
width,
height: 600
})View example
Plot.plot({
x: {
grid: true,
label: "Population (%) →",
percent: true
},
y: {
domain: stateage.ages,
reverse: true,
label: "↑ Age (years)",
labelAnchor: "top"
},
marks: [
Plot.ruleX([0]),
Plot.tickX(stateage, Plot.normalizeX("sum", {z: "state", x: "population", y: "age", stroke: "lightblue"})),
Plot.dotX(filteredAges, Plot.normalizeX("sum", {x: "population", y: "age", stroke: "darkblue", fill: "darkblue"})),
Plot.line(filteredAges, Plot.normalizeX("sum", { x: "population", y: "age", stroke: "darkblue" }))
],
})View example
SELECT c.longitude as longitude
, c.latitude as latitude
, c.id as customerId
, o.storeId as storeId
, COUNT(*) orders
FROM orders as o
JOIN customers as c
ON o.customerId = c.id
GROUP BY 1, 2, 3, 4View example
Plot.plot({
grid: true,
color: {legend: false, range: ["#4269d0", "#efb118", "#ff725c"]},
marks: [
Plot.dot(penguins, {x: "culmen_length_mm", y: "culmen_depth_mm", fill: "species"}),
Plot.linearRegressionY(penguins, {x: "culmen_length_mm", y: "culmen_depth_mm", stroke: "species"}),
Plot.linearRegressionY(penguins, {x: "culmen_length_mm", y: "culmen_depth_mm"})
]
})View example
Plot.plot({
padding: 0,
color: {
pivot: d3.mean(seattle, d => d.temp_max),
legend: true,
scheme: "BuRd"
},
y: {tickFormat: Plot.formatMonth("en", "short")},
marks: [
Plot.cell(seattle, Plot.group({fill: "max"}, {
x: (d) => d.date.getUTCDate(),
y: (d) => d.date.getUTCMonth(),
fill: "temp_max",
inset: 0.5
}))
]
})View example
Plot.plot({
y: {grid: true},
color: {interpolate: "lab", range: ["#4269d0", "#efb118"]},
marginTop: 10,
marks: [
Plot.ruleY([0], {strokeOpacity: 0.3}),
Plot.dot(gistemp, {x: "Date", y: "Anomaly", r: 3, strokeWidth: 1.5, stroke: "Anomaly"}),
Plot.lineY(gistemp, Plot.windowY(12, {x: "Date", y: "Anomaly"})),
],
})View example
SankeyChart({
links: energy
}, {
nodeGroup: d => d.id.split(/\W/)[0],
nodeAlign,
linkColor,
format: (f => d => `${f(d)} TWh`)(d3.format(",.1~f")),
width,
height: 600
})View example
Plot.plot({
x: {
grid: true,
label: "Population (%) →",
percent: true
},
y: {
domain: stateage.ages,
reverse: true,
label: "↑ Age (years)",
labelAnchor: "top"
},
marks: [
Plot.ruleX([0]),
Plot.tickX(stateage, Plot.normalizeX("sum", {z: "state", x: "population", y: "age", stroke: "lightblue"})),
Plot.dotX(filteredAges, Plot.normalizeX("sum", {x: "population", y: "age", stroke: "darkblue", fill: "darkblue"})),
Plot.line(filteredAges, Plot.normalizeX("sum", { x: "population", y: "age", stroke: "darkblue" }))
],
})
The shortest path from idea to live code
Observable Notebooks run in your browser, so you can immediately start building instead of setting up a local dev environment. Our notebooks were designed from the ground up to encourage collaboration and code reuse.
Literate programming
Weave together Markdown, JavaScript, HTML, and SQL for expressive dynamic documents, charts, and apps.
Connect to any data
Connect to any data source with ease — whether it’s a file, a database, or an API.
Built-in reactivity
Cells re-run automatically as you make changes and interact with inputs, making code easier to understand.
Multiplayer editing
Collaborate and share
Accelerate your feedback loop with real-time multiplayer, comments, automatic version history, and git-style forking & merging to freely explore new ideas.
Importing
Batteries included
Recommended open-source libraries such as D3, Observable Plot, and Observable Inputs are available by default. You can also import any library from npm or import cells from other notebooks.
import {Pack} from "@d3/pack-component"
Embedding
Ready for production
Conveniently embed notebooks as iframes, or for seamless integration, import notebooks into your app as reactive JavaScript modules.
FEATURES
Imports
Reuse code from other notebooks, or import your favorite libraries from npm.
Fork & merge
Quickly duplicate a notebook, then merge changes back in.
Embeds
Take what you build to production as either an iframe or JavaScript.
Databases
Connect to BigQuery, Snowflake, DuckDB, PostgreSQL, and more.
Files
Attach data by simply dragging files onto a notebook.
Inputs
Add interactivity with drop-downs, sliders, checkboxes, and more.
Minimap
Get an instant overview of your notebook’s reactive dataflow graph.
AI Assist
Get help writing code and fixing errors.
Join the community
Observable Notebooks are ideal for prototyping, allowing us to rapidly iterate on data visualizations and explore insights without needing advanced front-end skills.
Yao Yue
Co-founder and Infrastructure Engineer, IOP Systems
Pricing
Notebook Free
Free
Great for getting started with Observable Notebooks.
Notebook Pro
$22/mo/editor
Perfect for teams who want to build in notebooks. Add viewers for $10/mo.
Plan details
Free
Pro
Observable platform
Notebooks
Multiplayer code editing
Schedule notebook runs
Remove Observable watermark on notebook embeds
Create public or private notebooks
Use AI Assist in notebooks
Access databases, cloud files, and web API endpoints
Version control
Workspace management
Manage guest member access at the notebook level
Control access to notebooks
Security
Authenticate via email, Google, GSuite, Microsoft, GitHub
Onboarding and support
Community support through our Forum
Get started today
Get started today