Toph Tucker

Visualize a correlation from a CSV dataset using Plot.

Observable

Plot Scatterplot

Mike Bostock

Visualize a quantitative distribution from a CSV dataset using Plot.

Plot: Histogram

Paul Buffa

Plot U.S. Map

Plot World Map

Shan Carter

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

Simple SVG

Interactive SVG

Simple HTML Canvas

Interactive HTML Canvas

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

Mollie Pettit

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

Regl

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

Three.js

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

Templates

Templates: Boilerplates

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.