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

By default regl-camera uses window width and height to determine the rotation distance. In Observable this means that rotating the camera will feel sluggish, and that vertical rotation can become next to impossible in long notebooks.

To fix this, specify the rotation context explicitly by adding:
```
  element: canvas,
```

Source: https://github.com/regl-project/regl-camera/blob/0182e4e/regl-camera.js#L57-L63

Fabian Iwand

By calling abs() you lose a lot of colors, and orientation gets harder for symmetrical models. I recommend the following change:
```
      gl_FragColor = vec4(vnormal * 0.5 + 0.5, 1.0);
```

This change will also make it easier to add variations, e.g. `vnormal.yyy` to "light" the model from the top.
(comment copied over because I had added it to the wrong cell before)

I recommend to avoid bundle.run whenever possible, since the service can be very unreliable.

You can switch to skypack:
bunny = (await import("https://cdn.skypack.dev/bunny@1.0.1")).default

and:
normals = (await import('https://cdn.skypack.dev/angle-normals@1.0.0')).default

Switched to Skypack. Thanks for the suggestion.