Source · This report visualizes millions of requests to Observable’s API servers over a 7-day period in January 2024, revealing both traffic patterns and performance characteristics of Observable’s web service. This example showcases the flexibility of Observable Plot for creating custom, performant visualizations, and hints at the potential of Framework’s data loaders for working with large datasets. This example also demonstrates reading Apache Parquet files. (While this public example uses static data, at Observable we use Snowflake data loaders internally to create a similar live dashboard.)

Source · This dashboard visualizes electricity generation and demand across the U.S. electricity grid. The included data loaders demonstrate how to retrieve live data from the U.S. Energy Information Administration (EIA) API, while the dashboard demonstrates how to produce interactive maps, bar charts, and time-series charts with Observable Plot. A range input allows the user to rewind time to any point in the previous 24 hours, and a table shows details.

Source · This dashboard visualizes the popularity and development of Observable Plot, our open-source visualization library. The included data loaders demonstrate how to retrieve data from GitHub and npm APIs, including star counts, releases, downloads, and open issues. A time-series chart shows daily npm downloads with 7- and 28-day moving averages, and a burndown chart shows the age of open issues over time.

Source · This dashboard visualizes Freddie Mac’s historical mortgage rates data. The included data loader demonstrates how to retrieve CSV data from Freddie Mac and visualize the result as a zoomable chart with Observable Plot. The larger time-series line chart at the bottom allows brushing to select an arbitrary time range, while the smaller visualization above zooms to show the selected range.

• geotiff - Parsing GeoTIFF with geotiff.js, then visualizing with Observable Plot
• netcdf - Parsing NetCDF with netcdfjs, then visualizing with Observable Plot
• vega-dark - Responsive dark mode in Vega-Lite
• vega-responsive - Responsive width in Vega-Lite using ResizeObserver

• loader-arrow - Generating Apache Arrow IPC files
• loader-databricks - Loading data from Databricks
• loader-duckdb - Processing data with DuckDB
• loader-github - Loading data from GitHub
• loader-google-analytics - Loading data from Google Analytics
• loader-parquet - Generating Apache Parquet files
• loader-postgres - Loading data from PostgreSQL
• loader-snowflake - Loading data from Snowflake
• netcdf-contours - Converting NetCDF to GeoJSON with netcdfjs and d3-geo-voronoi

• custom-input-2d - A custom 2D input with bidirectional binding

• markdown-it-container - The markdown-it-container plugin
• markdown-it-footnote - The markdown-it-footnote plugin
• markdown-it-wikilinks - The markdown-it-wikilinks plugin

• chess - Loading Zip data from FIDE; creating a bump chart with Observable Plot
• custom-stylesheet - Defining a custom stylesheet (custom theme)
• google-analytics - A Google Analytics dashboard with numbers and charts
• hello-world - A minimal Framework project
• intersection-observer - Scrollytelling with IntersectionObserver
• penguin-classification - Logistic regression in Python; validating models with Observable Plot
• responsive-iframe - Adjust the height of an embedded iframe to fit its content

We offer two types of examples: techniques and showcases.

Technique examples address lower-level needs such as “how to load data from Google Analytics” or “how to make a bump chart”. They’re smaller, piecemeal examples for common development tasks. Technique examples are intended to teach you how to accomplish a specific task and to provide reusable code that can be copy-pasted into your Framework project.

Showcase examples, in contrast, address higher-level user needs such as “how to analyze website traffic” or “how to show the growth of an open-source project”. These larger, complete examples demonstrate how to create useful data apps. Showcase examples are intended primarily to inspire and show Framework’s potential. As applied examples, showcase examples also demonstrate multiple techniques working together; we encourage you to view source.

You can browse the source code for any of the examples by navigating to the respective folder on GitHub. You can then copy-paste the code into your own project or download individual files. All of the example code in this repository is covered by the same open-source license as Framework itself.

If you’d like to run (and tinker with) these examples locally, you can clone the repo like so:

git clone git@github.com:observablehq/framework.git

Then cd into the desired example directory. From there you would typically run npm install or yarn to install dependencies. Please refer to each example’s README.md file for specific instructions; some examples may require additional configuration, such as setting environment variables to talk to external data sources.

If there’s an example you’d like to see, please let us know by filing an issue.

If you have questions about an existing example, please open a discussion.

If you have an example that you’d like to share with the community, please open a pull request. Please follow the conventions set by the existing examples and let us know if you have any questions.

Here are some technique examples we’d like to see:

• Visualization
  • Big number with area chart
  • Daily metric chart with moving average
  • Punchcard chart (activity by day of week and hour of day)
  • Bump chart/rank chart
  • Brushing
  • Zooming
• Data loaders
  • JSZip data loader
  • npm data loader
• Markdown
  • Inline TeX $…$