Parallel Coordinates Chart
Choropleth
Wrapped Facet
Parallel Coordinates Chart
Calendar
Wrapped Facet
Faceted Scatterplot

Not your typical notebook

Observable’s reactive JavaScript notebooks are uniquely suited for interactive data visualization, animation, learning, and experimentation.
Explore the docs
Power Plant Consumption
View example
Cell Heatmap
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
Line Moving Average
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
Sankey
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
Barcode
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
Orders Table
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, 4
View example
Linear Regression
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
Cell Heatmap
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
Line Moving Average
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
Sankey
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
Barcode
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" }))
  ],
})
Choropleth
Candlestick

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.
Read the documentation
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.
Read the documentation
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

Over 1,000,000 notebooks have been created on Observable. Discover new ways to present data, connect with other data visualization enthusiasts, and fork public notebooks to get started more quickly. For even more examples check out trending and recent notebooks.

Discovering Date PatternsView notebook
Discovering Date Patterns
Observable
The impact of vaccinesView notebook
The impact of vaccines
Mike Bostock
User Retention with SegmentsView notebook
User Retention with Segments
Toph Tucker
Electoral College Decision TreeView notebook
Electoral College Decision Tree
Kerry Rodden
Autoplot matrixView notebook
Autoplot matrix
Fil Rivière
Summary TableView notebook
Summary Table
Mike Freeman

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

Yao Yue

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

Add viewers to your workspace
Build data visualizations with code in notebooks

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