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

Observable notebooks: Accelerating HR insights for agile talent management through rapid analysis, informed discussions, and impactful presentations.

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

Templates: Business Planning

Behavior gets really weird when I drag these faces off the left or right side. Might want to clip interpretation of mouse position to the visible edges.

Jacob Rus

Like how the heads bunch up? Yeah it feels bad — it’s unintentional and uninvertible! (Well, you can painstakingly move individual heads apart by clicking and dragging very low near the axis.) It's tricky that where to clip would depend on the vertical position of the mouse, too. Could also just *not* clamp head position to extent of timeline, but then once you released them you couldn't see them or easily bring them back, which is a different sort of uninvertibility

No, if I drag to the far left heads disappear, then sometimes appear over to the far right, but sideways.

It should probably keep track of the original positions from mousedown, and then compute new positions during the drag based on the relative mouse position.

When the pointer is directly on top of one head at mousedown I would recommend just selecting that single one.

Raymond Valdes

Hi, Toph! 

Does it read the table and project the employees on the timeline or do you add from the table?