Observable’s first-party templates, collected here, are displayed on https://observablehq.com/templates

Observable

Templates: Boilerplates

Templates: Integrations

Observable Templates to help with data exploration and visualization for developer-related workflows

Templates: Developer Workflows

Toph Tucker

See how payroll depends on the pace of hiring by placing prospective employees on a timeline.

Hiring Timeline

Mollie Pettit

Randomly sort a group of people into smaller groups of roughly equal size.

Breakout Room Breaker Outer

Globally synchronized karaoke to combat the compounding lag of video chat singalongs.

“Happy Birthday” Synchronizer

Ian Johnson

Correlate answers to pairs of questions; drill down to individuals who said this on one and that on the other.

Survey Cross-Tabulation Analysis

Everything running over? Never getting to your crucial final agenda item? Put in a meeting start time and we’ll hold you to it.

Agenda Tracker (Clock Time)

Automatically suggests an appropriate visualization based on the properties of your Google Surveys or Qualtrics data.

Survey Report Builder

Everything running over? Never getting to your crucial final agenda item? Click “Start“ when the meeting starts.

Agenda Tracker (Start Button)

Equitable speaking order for daily standups.

Team-Order Shuffler

Flaky tests waste engineer time; which GitHub Actions jobs fail and then pass when re-run?

Integration Test Flakiness

How long are your GitHub Actions integration tests taking to run?

Integration Test Duration

The only expense is payroll, the key metric is growth, and most cash is VC; how long until you run out of money?

Startup Operating Model

Compare a forecast, goal, or estimate to reality by filling up hollow bars.

Targets vs. Actuals

What percentage of a sign-up cohort are still using your product after some weeks?

User Retention

Visualize a correlation from a CSV dataset using Plot.

Plot Scatterplot

Paul Buffa

Plot U.S. Map

Plot World Map

Do users who searched for you stay engaged longer than those who saw an ad? Compare retention across groups.

User Retention with Segments

Shan Carter

Simple SVG

Interactive SVG

Interactive HTML Canvas

Simple HTML Canvas

The simplest starting point for working with D3.

Simple D3

A good starting point for many two-dimensional charts with x and y axes.

D3 scatterplot

A static U.S. map with county and state outlines.

D3 U.S. map

A static world map with landmasses filled in.

D3 world map

Processing (p5.js)

Get started with high-performance fragment shaders connected to a slider.

WebGL Shader

Get started with default styles for headers and images.

Blog Post

Jimmy Zhang

Help developers and managers ship pull requests faster by visualizing their activity timelines. 

GitHub: Pull Request Visualizer

Monitor the status of your HTTP services with a condensed view of Amazon Web Services CloudWatch Logs.

AWS HTTP Status Dashboard

Load recent transactions into a notebook and start visualizing them with Plot.

Stripe API Starter

Load a Google Sheet into a notebook and start visualizing it with Plot.

Google Sheets Starter

Upload a .db file to begin querying your database with this ubiquitous zero-configuration engine.

SQLite Starter

Load a repository’s issues into a table.

GitHub API Starter

Get started with the lightweight 3D library built atop WebGL.

Regl

Get started with the popular 3D library, built atop WebGL.

Three.js

When did a repo get its stars? Who was first, who was 100th? Chart it over time, annotated with tagged releases.

GitHub Stargazer History

Load information about a Figma document and fetch image assets.

Figma API Starter

AWS S3 API Starter

Manage virtual machines with the Amazon EC2 API

AWS EC2 API Starter

Choose a user and repo and see live results for a curated subset of methods spanning the capabilities of the GitHub API.

GitHub API Explorer

Use visualization to help select an appropriate reviewer for your pull request.

GitHub Suggested Reviewers

Mike Bostock

Visualize a quantitative distribution from a CSV dataset using Plot.

Plot: Histogram

Input + Chart

Connect a freeform search input to a table.

Search + Table

SQL + Chart

The MoMA Collection Data

U.S. Geographic Data

Plot Test Data

Mike Freeman

NOAA Hourly Weather Data

EIA Electricity Data

Bandcamp Sales Data

Google Merchandise Sales Data

DarkCideS: Bats in Caves Data

Templates

Basic Templates

// Import D3.js library
const d3 = require("d3"); 

// Create SVG drawing area
var svg = d3.select("body")
            .append("svg")
            .attr("width", 1000)
            .attr("height", 800);

// Draw central problem
var centralProblem = svg.append("circle")
                       .attr("cx", 500)
                       .attr("cy", 400)
                       .attr("r", 100)
                       .style("fill", "red");

// Label central problem                
svg.append("text")
   .attr("x", 500)
   .attr("y", 400)
   .text("Unsafe Surgical Care in LICs (Africa)")
   .style("text-anchor", "middle");

// Draw contributing factors  
var trainingResources = svg.append("rect")
                          .attr("x", 300)
                          .attr("y", 300)
                          .attr("width", 120)
                          .attr("height", 60)
                          .style("fill", "blue");
                          
// Add label                       
trainingResources.append("text")
                .text("Inadequate Training & Resources");
                
// Draw other factors                
var standardsAdherence = svg.append("rect")
                           .attr("x", 300)
                           .attr("y", 400)
                          //...
                          
var initativesFactor = svg.append("rect")
                         .attr("x", 300)
                         .attr("y", 500)
                        // ...  
 
// Draw links              
var link1 = svg.append("line")
               .attr("x1", 420)
               .attr("y1", 340)
               .attr("x2", 500)
               .attr("y2", 400);
               
// Add arrowheads
svg.append('path')
   .attr('d', 'M 490 390 L 500 400 L 490 410')
   .attr('fill', 'black');
                   
// Draw intervention and outcomes

var intervention = svg.append("rect")
                     .attr("x", 600)
                     .attr("y", 350)
                     //...
                     
var shortTerm = svg.append("circle") 
                  .attr("cx", 800)
                  .attr("cy", 300)
                 // ...  

// Connect boxes