observablehq.com Open in urlscan Pro
2606:4700:10::6816:15dc  Public Scan

Form analysis
0 forms found in the DOM

Text Content

Why Observable
Product
Enterprise
Resources
Pricing
SearchSign inSign up


THE BEST DATA VISUALIZATIONS ARE BUILT WITH CODE.

Create stunning charts and dashboards that shed light on insights that are as
unique as your business — and your data.
Try it for free

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, 4

View 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" }))
  ],
})



FROM THE CREATORS OF D3 WITH 300M+ DOWNLOADS, JOIN THE THOUSANDS OF
ORGANIZATIONS MAKING DATA-DRIVEN DECISIONS FASTER WITH OBSERVABLE.

 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 

TURN COMPLEX DATA SETS INTO CLEAR VISUALIZATIONS IN JUST A FEW CODE SNIPPETS

Answer questions and test ideas faster by securely connecting to your data
sources, pulling from more than 200,000 community examples, or using
plug-and-play code snippets to spin up a chart in minutes.

Explore database connectors


GO DEEPER AND UNCOVER MORE AHA MOMENTS WITH POWERFUL CUSTOM CODE

Peel back the layers of your data with dashboards and data apps that reveal
hidden insights and help you tailor data exploration and analysis to meet your
business needs.

Read the Hugging Face customer story


HELP YOUR TEAM MAKE DATA-DRIVEN DECISIONS WITH CONFIDENCE

Filter, sort, and interact with data visualizations in the same notebook, at the
same time, to uncover insights, answer questions, and get to aha moments faster.

Get a demo


> WHEN LAUNCHING CHATGPT, OUR TEAM AT OPENAI LEVERAGED OBSERVABLE TO CRAFT AND
> DISSEMINATE CRUCIAL VISUAL CHARTS THAT PROVED INVALUABLE WHEN SHOWCASING OUR
> DEVELOPMENTAL PROCESSES AND FEATURES TO A BROAD AUDIENCE WITH EASE.

Thomas Degry

Creative Developer at OpenAI

EXPLORE THOUSANDS OF EXAMPLES

Data visualizationData scienceData analysis
Plot: The Wealth & Health of Nations
Observable•Mike Bostock
Brushable scatterplot matrix
D3•Mike Bostock
Sankey diagram This notebook is a fork
D3
Plot: Window reducers
Observable
Plot: Hexbin map
Observable
Plot: The impact of vaccines
Observable•Mike Bostock
Plot: Marimekko
Observable•Mike Bostock
Plot: Filled contours
Observable
Word cloud
D3•Mike Bostock
Plot: Population pyramid
Observable
Plot: Contours & projection
Observable
Sunburst This notebook is a fork
D3
Parallel coordinates
D3•Mike Bostock
Plot: Arrow variation chart
Observable
Directed chord diagram
D3
Plot: The Wealth & Health of Nations
Observable•Mike Bostock
Brushable scatterplot matrix
D3•Mike Bostock
Sankey diagram This notebook is a fork
D3
Plot: Window reducers
Observable
Plot: Hexbin map
Observable
Plot: The impact of vaccines
Observable•Mike Bostock
Plot: Marimekko
Observable•Mike Bostock
Plot: Filled contours
Observable
Word cloud
D3•Mike Bostock
Plot: Population pyramid
Observable
Plot: Contours & projection
Observable
Sunburst This notebook is a fork
D3
Parallel coordinates
D3•Mike Bostock
Plot: Arrow variation chart
Observable
Directed chord diagram
D3
Plot: The Wealth & Health of Nations
Observable•Mike Bostock
Brushable scatterplot matrix
D3•Mike Bostock
Sankey diagram This notebook is a fork
D3
Plot: Window reducers
Observable
Plot: Hexbin map
Observable
Plot: The impact of vaccines
Observable•Mike Bostock
Plot: Marimekko
Observable•Mike Bostock
Plot: Filled contours
Observable
Word cloud
D3•Mike Bostock
Plot: Population pyramid
Observable
Plot: Contours & projection
Observable
Sunburst This notebook is a fork
D3
Parallel coordinates
D3•Mike Bostock
Plot: Arrow variation chart
Observable
Directed chord diagram
D3

> WITH OBSERVABLE, WE ARE ABLE TO EXPLORE, ITERATE, AND COLLABORATE MUCH MORE
> EFFECTIVELY. ALL THE LOGIC IS TRANSPARENT — EVEN WHEN DISPARATE DATA SETS AND
> APIS ARE USED. THIS ALLOWS US TO COALESCE THE KNOWLEDGE OF MANY DATA
> SCIENTISTS, ENGINEERS, AND DOMAIN EXPERTS WORKING ACROSS THE COMPANY INTO ONE
> COHESIVE DOCUMENT. WE ARE LITERALLY ALL ON THE SAME PAGE.

Tarek Rached

Director of Algo UI at StitchFix

BUILT FOR DEVELOPERS, LOVED BY DEVELOPERS

It the age of remote work, it was surprisingly fun to collaborate on an
@observablehq notebook with my colleague.

Real-time, multi-user editing feels like playing a video game. 🎮

@specialCaseDev

Twitter

We are in love with @observablehq for all our #dataviz pieces 👩🏻‍💻

@carmen_TM_

Twitter

I've become a big fan of @observablehq for building data visualizations, or data
exploration tools

@Jehiah

Twitter

Alright not trying to fangirl too hard but I made this in 40min with
@observablehq. If I had to code that reactivity from scratch I would have NOPE'd
out so fast but now my workshop students can play with them sliders to see how
them svg transforms work~

✨ SO MUCH VALUE ADD ✨

@sxywu

twitter

Ok just set up @observablehq Team for @carbonfact. I am in love❤️

@martindaniel4

Twitter

I ♥️ this so much. If you haven't used @observablehq, I highly recommend it.
It's a super easy way to get started with #javascript for #datascience or #gis.
You can learn JS and forget about #python, #rstats or anything else and easily
share everything you do bcuz... internetz :)

@chrismarx

Twitter

Though really mostly, OBSERVABLE NOTEBOOKS ARE SO AMAZING :)

@smtology

Twitter

IMHO the real beauty of a notebook comes from surprises.😲

The visual aspect is the obvious part but in truth, even though it's important,
it remains superficial compared to the ability to explore.

It's only when you PLAY with the content that a notebook becomes truly valuable!

@utopiah

Twitter

I'd be a thankless liar if I said @observablehq makes me 20x faster. I'm at
least 100x faster 🚀🚀🚀

🙏 @observablehq team!

@denik

Twitter

Getting more into @observablehq. I thought it was a kind of cool but now I
realize it's actually just AMAZING HOLY COW

@vicapow

Twitter

I just want to say that @observablehq is really really good

@MikolaLysenko

Twitter

The great thing with @observablehq is that you directly see the result before
downloading the data, and you can make the Notebook accessible ot anyone. Here's
my work in progress Notebook to allow anyone to easily build this kind of graph

@ladataviz

Twitter

UNCOVER INSIGHTS FASTER

Sign up nowContact sales
Product
 * Integrations
 * Pricing
 * Enterprise

Resources
 * Customer stories
 * Community
 * Documentation

Company
 * Blog
 * Jobs

LinkedInTwitterGitHubYouTube
© 2024 Observable, Inc.PrivacyTerms of Service





Product overview
Integrations
Security
Observable Plot
Customer stories
Release notes

Try Observable
Tutorials
Explore
Community
Documentation
Blog