Observable

2020 Year in Review

30 Day Map Challenge was created by 
Topi Tjukanov. Here's a collection of notebooks from around the world of Observable users who participated in the  #30DayMapChallenge. 

30 Day Map Challenge

We hold ourselves accountable for our commitments. That means continued self-assessment and learning about how we can help and positively impact underserved communities and the world. We re-evaluate these commitments over time.

Accountability and Updates

Algorithms

Checkout what the Observable Ambassadors have been working on! Learn more about the program at observablehq.com/ambassadors

Ambassadors Showcase

Approaches for working with data that changes over time

Analyzing Time Series Data

Keep up to date on features, functionality and fun news at Observable.

Announcements

Basic Templates

Winners of our Black History DataViz Contest and other notebooks exploring Black history.

Black History

Canvas, images & animation

This collection contains changelogs from 2018 and 2019. Please see https://observablehq.com/@observablehq/observable-release-notes for the latest news on feature and product releases. 

Changelog [Obsolete]

Community [public]

A selection of notebooks related to COVID-19 and SARS-CoV-2.

Coronavirus

A collection of examples of US County based maps for reference and inpsiration

County Maps

D3 Turns 10

Examples, blog posts, and demos on how developers can use dataviz for their work.

Data Visualization for Developers

Learn how Observable works, from first edit to publish.

Documentation

Workflows for creating content on Observable & sharing it with the world.

Editing, publishing & collaborating

A selection of election-related data visualizations created by our community, the Observable Journalism Network, and our team. Explore maps, voter wait times, paths to victory, and more.

Elections

Notebooks can be embedded and customized anywhere on the web (or off it).

Embedding Notebooks

Observable is committed to helping and contributing to social justice and equality. We will enable data exploration for these efforts. We value prioritizing marginalized people’s safety over privileged people’s comfort.  

Equality

Be an active reader with these playful interactive explanations.

Explorables

Get inspired by the work of these amazing authors, nominated by members of the Observable team. 

Featured creators

Future of Data Work

Brand new and recreated vintage art, made with code and imagination.

Generative art

Generators

Learn more about how to sign-up as an individual or as a team, or start working in a notebook with A Taste of Observable. 

Getting Started

This collection includes notebooks for users of Github on Observable. 

Github on Observable

Learn Observable step by step with a series of guided exercises.

Hands-on tutorial

Learn how to integrate your Observable code into your own web apps with these guides.

Integrations

Welcome to Observable! Get started with these tutorials.

Introduction

JavaScript powers Observable, but you may encounter subtle surprises due to the reactive runtime. Keep your JS notebook-friendly with these techniques.

JavaScript in Observable

Jobs at Observable

Reusable notebooks, ready for import and remix.

Libraries

Embrace your inner shapefile. Or GeoJSON or TopoJSON. 🌍

Maps

Understand the fundamental concepts & techniques for working with Observable notebooks.

Notebook fundamentals

Observable Blog

We're excited to launch new features, in beta, for our community to be able to collaborate in real-time on Observable!  Find out more in these notebooks. 

Observable Collaboration

This collection includes Observable's company values and information on our company culture. 

Observable Culture

Watch and learn how to accomplish different types of data work in Observable.

Observable Demos

Observable Documentation

A set of notebooks introducing Observable to enterprise customers

Observable for Enterprises

A tailored introduction to Observable from the Jupyter & Python perspective.

Observable for Jupyter users

Observable for Vega-Lite

Explore eye-opening notebooks hand-picked by members of the Observable team.

Observable Highlights

Lightweight interface components for exploring data and building interactive displays

Observable Inputs

Observable Networks

A concise API for exploratory data visualization

Observable Plot

A collection of Observable Canvases that we share on Instagram.   https://www.instagram.com/observablehq/

Observable's Instagram Shares

Learn how to use Observable Templates to quickly & easily create powerful data visualizations.

Observable Templates

High-level documentation of the core concepts & motivation behind Observable.

Overviews

A series of exercises to get you started with interactive data visualization in D3.js

Painting with Data: D3.js

Watch recordings of our past meetups, in which the Observable team and community come together to discuss everything from new features to fantastic notebooks to company culture.

Past Meetups

Semi-guided tutorials for data exploration with Observable Plot

Plot Explorations

A design challenge issued by @palewire and the subsequent responses

Precincts Reporting Challenge

Product page

These notebooks are used to create the images that appear at the top of people’s profile pages. They’re mostly forked and adapted from the work of community members. Feel free to fork them yourself and play around some more.

Profile banners

Collections related to areas of social & community interest, curated by the Observable team.

Social topics

This year, we would like to recognize some members of our community who have gone above and beyond to be engaged and supportive community members as we continue on the journey of making data accessible to everyone.

Staff pick: 2021 Community Recognition

An interactive investigation into gender representation in film, complete with a behind-the-scenes video report on the authors' process.

Staff pick: A Feminist Glance at Films

A chronological visualization of 100 African American Authors. 

Staff Pick: African American Writers

In this collection of stories we share how we've looked at a “mountain of data” about energy production in the United States and the signals we've found. These stories are about looking at our data in a way that gives us a a chance to notice.

Staff pick: Analyzing Time Series Data

Trans rights are under attack all across the USA. Learn about the context and status of proposed anti-trans laws, and how to take action against them, in this explainer. 

Staff pick: Anti-Trans Legislation Tracker

Staff pick: Community Recognition

Learning to speak dataviz? Bookmark this helpful glossary of terms related to data visualization & intersecting domains.

Staff pick: Data Visualization Glossary

Data Wrangler provides an interface to guide code composition using the Arquero package, a robust data wrangling library based on the grammar of data manipulation.

Staff pick: Data Wrangler

An analysis of recently released CDC data on drug overdose deaths in the U.S.

Staff pick: Drug Overdose Deaths during COVID-19

Explore different possible outcomes of the 2020 US Presidential Election, depending on who wins each of a set of swing states.

Staff pick: Electoral college decision tree

For Pride month, learn about LGBT rights in the US from this partial re-creation of The Guardian’s "Gay rights in the US, state by state" radial matrix visualization.

Staff pick: Equal-Area Radial Matrix of LGBT Rights

 A beautiful example of small areas of symmetry.

Staff pick: #genuary 2021 ~ Small areas of symmetry

An explanation of what grid cartograms are and when to use them, with multiple examples.

Staff Pick: Grid cartograms

We are thrilled to announce Observable Plot, a new open-source JavaScript library for exploratory data visualization.

Staff pick: Introducing Observable Plot

Today, we are launching the first set of Observable Templates. Now, you can create expressive and interactive data visualizations, charts and dashboards, without starting from a blank slate. And, you can use these templates without expertise in dataviz!

Staff pick: Introducing Observable Templates!

If you want to visualize data on the web, you need to be able to interact with your data using JavaScript. Data manipulation can (and should) happen in JavaScript!

Staff pick: JavaScript Data Wrangling

Learn some of the core tricks behind domain coloring, a simple and well-explored technique for visualizing functions in the complex plane using contours for magnitude and color for phase. 

Staff pick: Locally Scaled Domain Coloring

Visualize the phases of the moon as seen from anywhere in the world, then print it as a paper-cut template!

Staff pick: Moon Grid (paper)

We're asking our community members for feedback on how you use Observable, and more importantly, how we how we can make Observable better meet your needs. Fill out this 10-minute survey to share your feedback & enter to win a gift card!

Staff pick: Observable Community Survey 2021

In his 100th published notebook, a designer/maker/teacher reflects on a yearlong journey of creative coding in Observable, passing through SVGs, animation, WebGL, and more. 

Staff pick: Observable & creative coding

Follow along with Andrew's quest to post a "Discovery" - a Notebook from the huge ecosystem of Notebooks inside Observable - every day in the month of August 2021.

Staff pick: Observable Month of Discovery

A semi-guided tutorial for data exploration with Observable Plot.

Staff pick: Plot Exploration - Penguins

Drawing Angela Walters's Quilts using d3-line and d3-curve.

Staff pick: Quilting with d3-curve 

Washington Post journalists explain how they used U.S. census data, d3.js and streams to generate dot-density maps and render them to canvas.

Staff pick: Racial demographic dot-density map

Learn how to quickly build a customer-facing SaaS product in Observable with this tutorial, which covers login, persisting customer data, security, charging money & more.

Staff pick: Rapid SaaS with Observable, Firebase & Stripe

Explore eye-opening notebooks hand-picked by members of the Observable team. 

Staff picks

An interactive, colorful recreation of a space-filling fractal curve.

Staff pick: Sierpinski curve

What makes the Observable community of data collaborators so unique? Check out our State of Dataviz research report to find out!

Staff pick: State of Dataviz 2021

Our User Research templates help you quickly visualize product usage data. Learn how to quickly explore and analyze survey responses with the Survey Report Builder template.

Staff pick: Survey Report Builder Tutorial

The global coronavirus death toll is broken down using a streamgraph, showing how many people have died every day since it began.

Staff pick: The coronavirus pandemic ends when this chart shrinks again

Learn all about the behavior of oil-in-water mixtures through this interactive science explainer & quiz. 

Staff Pick: The Formation and Breakdown of an Emulsion

Recreating J. C. Holman's radial map, which shows U.S. states' support for legislation of interest to women's suffrage organizations as of 1917

Staff pick: The Woman Citizen's Wheel of Progress, 1917

Since we launched our new Embedding Tool in October, our community has created and shared thousands of embeds that have been seen around the world. Here's a list of the Top 10 Embeds of 2020.

Staff pick: Top 10 Community Embedded Data Visualizations of 2020

How can visualization help us learn complex, difficult subjects like chemistry? Find out in this thoughtful reflection on teaching, learning, and exploring with Vega-Lite. 

Staff pick: Using Vega Lite to explore Chemistry

A notebook showing the number of page views for a given Wikipedia article. Created using Observable Plot.

Staff pick: Wikipedia Pageviews Calendar

Conquered the introduction to Observable? Here are some next steps.

Techniques

Observable Components that are used in and support Observable Templates 

Template Components

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

Templates

Templates: Boilerplates

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

Templates: Business Planning

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

Observable

Public notebooks

Public collections