It's the end of 2021, and I would like to reminisce about the amazing work that was produced on Observable over the last year. I have taken all the notebooks that were trending from the Top Trending Notebook Twitter Bot and picked 100 good ones.
The broad categories apparent in 2021 were "dataviz, art, mathematics, maps, apps, development, design, tutorials and tools". Every notebook listed here is worth a read, but there is rather a lot so it might take you a few sessions!
OK, enough chat... here are my favorite notebooks of 2021, sorted into topics...
Dataviz
Observable is a digital community for data practitioners. In 2021 an enormous quantity of informative dataviz notebooks were produced, but here is some of the very best. Special shout out to @karimdouieb who has been on fire using 3D graphics to visualize large datasets with great effect in works like All the passes.
The Sun’s analemma by @fil
If you were to look at the sky every of the year at the exact same hour, where would the Sun be? The diagram below shows its position for each hour of the day, limited by the horizon. Each twisted loop (called an analemma), is in fact made of dots, one for each of the year. The analemma shows by how much solar time is fast or slow compared to clock time, at different periods of the year. Click on the map to set the observer’s location (defaults to Greenwich).
Equal-Area Radial Matrix of LGBT Rights by @kerryrodden
In Why use a radial data visualization?, I wrote about some of the pros and cons of choosing a radial layout for time series, categorical, or hierarchical data. I left out matrix/heatmap data, though—so for Pride month, here’s a partial re-creation of a radial matrix visualization I love, The Guardian’s Gay rights in the US, state by state (whose scope covers both sexual orientation and gender identity, despite the title).
All the passes ⚽️ by @karimdouieb
A visualisation of 882,536 passes from 890 matches played in various major leagues/cups such as the Champion League 1999 FA Women’s Super League 2018 FIFA World Cup 2018, La Liga 2004 – 2020 NWSL 2018 Premier League 2003 – 2004 Women’s World Cup 2019 Data provided by StatsBomb Original inspiration: Alexander Varlamov's blog post Data Dependencies
State of Dataviz by @observablehq
2021 Observations: Data through the lens of the Observable Community One of Observable’s motivating principles is to listen to and learn from its passionate and fast-growing community. Hundreds of our community members generously participated in two research surveys about data analysis and visualization over the past year. Here’s what we learned. Data is exploding, for everyone With the explosive growth in online technologies, services and information, data is overwhelming for all of us.
Women in space 👩🏼🚀 by @ralucanicola
Data I parsed the data from the Wikipedia site List of female spacefarers. I manually enhanced the comments section with information from individual Wikipedia profiles of the astronauts and information from the NASA site. Sky image by Max McKinnon on Unsplash.
Day 9: Smoke Basin by @visnup
These caves seem to be lava tubes. Parts are even still volcanically active; small hydrothermal vents release smoke into the caves that slowly settles like rain. – Advent of Code 2021, Day 9 Part 2 Find the three largest basins. Starting from a low point (or really, any point in a basin), breadth-first search out from it visiting all its neighbors and keep going, stopping at any 9s. Use a FIFO queue(https://en.wikipedia.org/wiki/FIFO_(computing_and_electronics) and when it’s exhausted we’re done.
EU Fishing Flow by @benjamesdavis
Data Helper Functions Scales Dependancies
What story do two decades of weather data tell you? by @analyzer2004
What story do two decades of daily weather data tell you? You are about to find out 😊. As usual, I picked these five major cities across 1000 miles of the US West Coast. The top part of the graph contains two stacked column charts. The left one represents the temperature distribution of the current month, and the right one shows weather condition distribution.
Visualizing Seasonal Daylight by @dbridges
Everyone who lives away from the equator knows how the days lengthen and shorten throughout the year. We hear about the long dark polar winters, and the endlessly looping sun of the polar summer. Many people might be able to toss out the answer to these natural phenomena, "because the Earth is tilted," but in my experience far fewer intuitively grasp the geometries involved.
How much warmer? (BBC) by @fil
A recreation, for educational purposes, of this beautiful map by the BBC Visual and Data Journalism team (31 July 2019). You can learn more on the original project in this very detailed and complete write-up by the BBC team. Made with D3 (the original visualization uses THREE.js). See also Matt’s version, which uses a phyllotaxis distribution instead of the original’s rectangular grid.
Votes for Women: Suffragette Collage Maker by @oliviafvane
Submission for Observable's Women's History Month DataViz Contest. Thank you to Jacob Rus for his help optimising the code. Political movements generate their own “stuff”: the posters from the the 2017 Women's March (and the Pussyhat), the Brexit tea towel, the gilets of the Gilets Jaunes. The same is true when women were fighting for the vote in the 20th Century.
2021 Observable Community Recognition by @observablehq
Observable is built as a space where those who work with data can come together to explore, analyze, discover and communicate with each other. Working with data and making sense of it is challenging, but with the contributions of you, the community, it is easier than ever to work together to make sense of the world with data. Our community inspires data collaborators around the world to collaborate, share, learn, and teach. Every day our community invents new and creative ways to explore and visualize data.
The Most Frequently Used Emoji of 2021 by @jenniferdaniel
92% of the world’s online population use emoji — but which emoji are we using? Well, it appears that reports of Tears of Joy’s death are greatly exaggerated 😂. According to data collected by the Unicode Consortium, the not-for-profit organization responsible for digitizing the world’s languages, Tears of Joy accounts for over 5% of all emoji use (the only other character that comes close is ❤️ and there is a steeeeeep cliff after that). The top ten emoji used worldwide are 😂 ❤️ 🤣 👍 😭 🙏 😘 🥰 😍 😊.
Hacking Power BI Charts with Plot by @analyzer2004
Are you a fan of both PowerBI and Observable Plot? Here are some ideas for recreating PowerBI charts with the 🙏almighty Plot🙏!! Waterfall Chart Ribbon Chart It's a variant of Bump Chart which reflects both value and the changes in rank over time. Tornado Chart LineDot Chart Waffle Chart Funnel Chart 🌐ericlo.
Lucy mission animation by @theeconomist
This notebook contains the code for generating the animated diagram of NASA’s Lucy probe, which will visit many of the “Trojan asteroids”, a pair of clusters of asteroids at the Lagrange points of Jupiter’s orbit. You can read more about Lucy’s mission and see the complete animation in our article. The visualisation above shows one frame of the animation. Labels were added to the final video in AfterEffects, so this diagram has none.
The story of Observable on Twitter by @floatingpurr
** Main info** 📝 forked integration notebook: Google Sheets Starter ℹ️ dataset: the Observable twitter activity up to (and updated to) 🗓 (source: Twitter API) 📗 Data are hosted in a Google Sheet and published as a csv file Once Upon a Time... ✨✨✨ 💫 Welcome to the data story of Observable on Twitter. Every story has a beginning... Do you remember this? Back in 2017, that was the first "official" Observable tweet, and it has been liked times 💙 (as of 2021-07-26).
Digital and Generative Art
The Observable platform is great for iterating on visuals quickly. In 2021 there were many digital artists producing novel and interesting works, some of my top picks are shown below. Makio135's Creative Coding tutorial notebook on producing generative art on Observable remains a must-read for aspiring digital artists.
Flow fields by @esperanc
An attempt to reproduce some of the techniques described in Tyler Hobbs' Flow Fields post. A simple field A more interesting field Curves through the field Position sampling Perlin noise fields Colored Perlin fields The idea here is to set the color of each flow curve to the color picked from a "seed" image.
Simplex Stacks by @enjalot
You may have heard of Simplex Noise, you can find many amazing visuals using it on Observable. But have you ever seen a stacked area chart of Simplex noise? This notebook does just that, using Plot to visualize the noise in a number of familiar and unfamiliar ways. Try changing the z\ parameter to see the noise in action: The data samples the simplex function primarily along the x axis. Each series in the stack is sampled at a single y value.
Procedural Face Exploration by @stringertheory
This is a copy, with only very slight modifications, of the excellent Procedural Face Generator written by Amit Patel. I wanted to play around with some of the facial features so I ported it into Observable, but you should check out the original (especially the cool sliders that help understand how changing the parameters will change the face 😍)! It's interesting to explore how the face color, eye shape, and the addition of eyelashes change the way the face looks.
Pseudo-Blue Noise by @jobleonard
Blue noise is a noise color[1] that is particularly well-suited for image dithering purposes (see also [2][3]). Unfortunately it's also computationally intensive to generate. For example, Bart Wronski mentions that generating a "64×64 wrapping blue noise-like sequence" took "a couple hours on an old MacBook." This was in 2016, but unless dramatic progress has been made in the algorithms to generate blue noise this will not be significantly faster today.
D3 Force Along a Path by @mootari
Implements a custom force for d3-force which moves nodes along an SVG path. "Track strength" vs "Max step size" At each simulation step ("tick") a node is moved towards its target position on the path. The further a node is from its target, the more distance it will cover during a tick.
The "Track strength" multiplier (strength\ option) gets applied to this distance. A value of 0.5\ means that the node will cover half the remaining distance towards its target on each tick.
Generative Painting by @karimdouieb
This is a recreation of a generative water colour like painting technique described beautifully by Tyler Hobbs during his "How to Hack a Painting" talk in the Strange Loop Conference '17. Also checkout his essay on the same subject on his blog.
Building a Parametric Seashell by @bronna
The clam and the conch seem to be drastically different creatures. One spends its life burrowing in the sand, staying in one spot to glean nutrients from the water. The other constantly vaults itself around the seafloor to find its next meal. One has a gently curving, sand-colored shell, whereas the other has a shell spiking and spiraling and splaying out in the colors of the sunset. These two species are opposites in many ways, yet the same equation underlies both of their shells.
SVG flowers by @daformat
I stumbled on this tweet by @wks_jp and since spring is coming, I was inspired to create the same kind of floral patterns using svg stroke-dasharray\. There are two patterns that we randomly draw: Variable density dotted path: a stroke-dasharray\ is used with a 0 length for the stroke so it becomes rounded to evenly spaced circles when stroke-linecap\ which is set to round\. Additionally, using this pattern, the resulting flower may or may not have a solid center drawn.
Processing https://10print.org/ (p5.js) by @hellonearthis
Get started with creative coding. Learn more in the tutorial.
What's That Noise? by @ambassadors
A closer look at various types of 2D noise and how to massage their output. Move your cursor over a noise field (or click/tap) to update its line. (Note: currently not optimized for narrow screens. If you're on mobile, please switch your phone to landscape.
Guided Tour of an Infinite Sphere Grid by @mast4461
An Exploration of Parameter Space Best viewed in fullscreen landscape mode, if your GPU can handle all the ray marching. Shortcuts: I've split the fragment shader into small chunks so that I can move the canvas cell next to the chunk I'm working on, to see both the canvas and the code. This would otherwise be difficult when working on GLSL code in the middle of a large cell.
Playing with Hilbert by @zekenie
Space filling curves are fractals that weave through every point in space. They're useful when you are building a system that needs to<twilight-zone-voice>\
jump dimensions </twilight-zone-voice>\. Let's say you have a piece of string that represents 1-dimentional space. You could mark that string with a sharpie and represent a point.
Raytracing in 40 minutes, the Observable port by @migueldeicaza
This is an ObservableHQ port of the "Raytracing in 40 minutes" from Peter Shirley, one cute feature is that when you update any of the values of this port, it automatically updates all the renderings as you change the functions and variables in this file. Peter announced that he would be doing a short lecture explaining this on his twitter feed. 3D Vectors and Colors in this notebook are represented as arrays of three values, there is no special data type for it.
Mathematics
There is something about the reactive interactivity of Observable that makes it useful for intuition building. There is an avid group of mathmaticians on Observable producing engaging mathmatical teaching materials. Prof. McClure
in particular has an extensive set of notebooks to support his classes.
Hilbert Curve Plot by @enjalot
A simple representation of the Hilbert curve, calculated with d3-hilbert and rendered with Plot. Stacking Plots When you stack several orders of Hilbert curves on top of each other the pattern between orders can be a bit clearer. It helped me to notice the multiples of 4, and how each level "up" creates 4 corners of a box surrounding a point at the level below.
Aliasing by @cscheid
This tweet shows the phenomenon of aliasing through a very effective animation. The notebook port here provides a little bit of interactivity so you can explore what happens when a signal is not sampled often enough in a reconstruction: A well-sampled signal must be sampled at least twice as often as the highest frequency in the original signal. It's not obvious yet always possible to reconstruct a signal exactly if it's been sampled at a sufficiently-high rate.
Wrap Your Eye Around Rubik's Cube 👁 by @mast4461
Controls: A technique called ray marching is used to render the cube. Usually in ray marching, rays project out from a single point. Here, we don't just project rays in different directions, but we let them start at different points! The graphic below illustrates how the ray origins and ray directions change with the wrap factor. Scroll it to wrap! Implementation Notes to self: Here's a nice example of how to color objects in ray marching: https://www.shadertoy.
Density contours with linear binning by @d3
new in d3-contour@3 and d3@7! This brownian motion system with particles is visualized with the contours from d3.contourDensity. The first chart uses the traditional nearest neighbor method; the second chart shows the improved method—linear binning—adopted by d3-contour@3. Density contours are calculated in three stages: first, each of the data points registers its weight onto a grid. The total weights on that grid are then blurred, and contours are computed.
Dimensionality Reduction drawings by @saehrimnir
UMAP and t-SNE are iterative dimensionality reduction methods. The picture gets drawn by drawing the voronoi cells of the intermediate results above each other with some opacity.
Hexagon grid rounding by @jrus
If we have points in a hexagon grid represented using “axial coordinates” – and coordinates aligned with two grid axes oriented 1/6 turn (60°) apart – we can round to the nearest hexagon with the pseudocode below: def axial_round(x, y):
xgrid = round(x); ygrid = round(y)
x -= xgrid; y -= ygrid # remainder
if abs(x) >= abs(y):
return xgrid + round(x + 0.5*y), ygrid
else:
return xgrid, ygrid + round(y + 0.
Maps
Maps are a specialised subset of dataviz dealing with realworld spatial data. Maps are a loved topic on Observable. In 2021 @floledermann produced the projection notebook to end all projection notebooks.
Local Spatial Autocorrelation Interactive Tutorial by @michelleeesi
Text in this notebook is adapted from Luc Anselin's GeoDa workbook, available here. GeoDa is a free and open-source program for exploratory spatial data analysis and basic spatial regression modeling that you can download here. When we look at maps, we spot concentrations and groupings of high and low values, start to recognize patterns, and construct stories about what might be going on.
Map Projection Playground by @floledermann
Adapted for my course "Cartographic and Geodetic Foundations for Planners". You can find even more static examples map projections in this overview. Map Style: ⚠️ This causes rendering errors for some projections: For some interrupted projections, you can set the number of lobes: 1 The circles for visualizing distortions are taken from here.
Aires d’accueil des « Gens du voyage » by @visionscarto
Export officiel, par @visionscarto, des données collectées par William Acker dans le cadre de l’inventaire critique publié sous le titre « Où sont les “gens du voyage” ? ». URL de référence : https://visionscarto.net/aires-d-accueil-les-donnees (Date de mise à jour : ) \* Les aires d’accueil sont classées par grandes caractéristiques : aires d’habitat, de petit passage, de grand passage (GP).
Five Oceans by @visionscarto
30DayMapChallenge — Day 18. Water. Attached to this notebook is a topojson file that I crafted more or less by hand. As I was trying to polish my “Born in Antarctica” notebook, I wasted quite a bit of time in an elusive search for a simple shapefile of the Antarctic Convergence. Unable to find a base map of the Oceans, I decided to create this one and add it to my toolbox.
The Earth-Nose-Direction game by @ambassadors
How many friends can you find? SHARE! https://bit.ly/earth-nose-game code starts below Acknowledgments Notebook developed and edited by: @fil @mootari @radames Thanks for the fantastic feedback/ideas from all our ambassadors friends who almost broke their noses/necks testing the notebook.
Getting routes with OSRM by @neocartocnrs
The distance between and is km. It takes hours to cover this distance by car. OSRM (Open Source Routing Machine) is a C++ implementation of a high performance route search engine to obtain the shortest paths in a road network. Available under a simplified BSD license, OSRM is an open source service. See http://project-osrm.org/docs/v5.24.0/api/ Preliminary remarks: To query the OSRM API, you need to have CORS enabled. For that, you can use CORS Anywhere Observable.
Latitude and longitude precision by @mourner
How many decimal digits do you need for longitude and latitude? Following the famous XKCD comic on coordinate precision, let's see how this looks on a map. There's a location defined at the bottom of this page, but we've rounded the coordinates to integers, losing all precision. Now it looks like ** , **. Where could it originally point to? The map below shows the exact area of all locations that round to these numbers. So, with zero decimal digits, we can place the location somewhere around London.
Deriving Pantelleria by @visionscarto
30DayMapChallenge — Day 21. Elevation. DEM This notebook starts with a Digital elevation model (DEM) of the Italian island of Pantelleria, halfway between Sicily and the coast of Tunisia in the Mediterranean Sea. I’ve never been there, but it looks like the perfect shape of an island… anyway… let’s begin. I captured this DEM on nextzen’s terrarium. The DEM is pixels wide by pixels high. For reference, it corresponds to the following projection (we won’t use it in the notebook).
30 days and as many maps by @visionscarto
A look back on the #30DayMapChallenge, 2021. Embarking on this challenge at the last minute was a bit stupid, but it felt like an opportunity to finish a few open projects, to try a few ideas, and to showcase a part of my usual toolbox. Day 1. Points. “Dotted Oceans” This globe uses: a backface projection that allows to “see through” the Earth, and a nice-looking random point distribution. Although it’s a very simple notebook, it was quite successful. Day 2. Lines.
Download the shape of a country by @severo
Select a country (or Antartica) #### Settings You think France is weird? Maybe look at Map Template France Lambert-93 or d3-composite-projections instead. Also, the precision is very bad for small countries. Credits Developed by Sylvain Lesage Data from Natural Earth. Code from Countries by area by Mike Bostock.
PHYLLO FORK 🌻🍴 How much warmer? (BBC) by @mattdzugan
This is a fork of Fil's notebook. I simply replaced the regular lat/lon grid with a spherical Phyllotaxis sampling. How much warmer? (BBC) A recreation, for educational purposes, of this beautiful map by the BBC Visual and Data Journalism team (31 July 2019). You can learn more on the original project in this very detailed and complete write-up by the BBC team. Made with D3 (the original visualization uses THREE.js).
Hello, spatialmerge by @chrispahm
spatialmerge is a (relatively) fast library for spatial joining and merging data in JavaScript 🚀 This notebook will walk you through different ways to combine spatial datasets. It is a (blatant) copy of the "merging data" tutorial from geopandas, and uses the same underlying datasets. Merging data There are two ways to combine datasets in spatialmerge – attribute joins and spatial joins. In an attribute join, a GeoJSON feature collection is combined with an array of objects (e.g.
World Grids by @neocartocnrs
- Data Import 2. Map Layout ** 3. ### World Elevation Line Map by @neocartocnrs
- Data import. We do... ** 2. Data Handling & stuffs for cartography*. Here, we... 3. Lines * 3. ### Macromap by @oliviafvane
An interactive ‘small multiples’ visualisation for historical map collections. How can we get a handle on very large, partially-digitised collections of maps? We need a map of the maps. Macromap is designed to help researchers understand what map sheets the British Ordnance Survey (OS) made, when and where. In addition, it illuminates what’s been digitised: a lot, but not everything.
30 Day Map Challenge: Day 8 - Blue by @ambassadors
The Ocean blue This literally took about 15 minutes to build, in spite of the fact that I never used the drop shadow technique before.
Let's make an extruded map by @neocartocnrs
- Data Import & handling **2. ### Day 11: 3D, 30 Day Map Challenge 2021 by @ambassadors
https://data.linz.govt.nz/layer/50768-nz-contours-topo-150k/ This is a little slow load as it needs to extract the data files from a zip file. The contours Shapefile contains two types of geometry types, LineString and MultiLineString The Mouse can interact with the maps orientation. Add colours based on elevation, there are zones over a range of to ✅ The objective here is to convert the contours of Taranaki into a three.js objects. ✅ Fix map orientation.
Apps
At its core, Observable is a front end development platform, and a few of the community have built fully fledged web applications.
Sign a PDF and Adobe: Go F* Yourself by @tomlarkworthy
Allows super-imposing an image of your signature on a PDF. ** Note: you can also do this using Mac Preview, see Tools > Annotate > Signature (docs)** Why not use Adobe? I once had a Adobe subscription exactly for this purpose but I was unable to cancel it. So it cost me $200 to sign a document. They are predatory, and its not just me. Why not use the free tools on the internet? I want to sign financial documents and privacy is critical. Unfortunately, I cannot audit most free software on the internet.
Morse code trainer by @visnup
Use the button below to practice your Morse code. Sound on 🔊. Once you’ve focused the button by pressing it, you can also use the spacebar. If you’re finding it difficult to encode a dah (a.k.a. dash −), try adjusting the dit (a.k.a. dot ·) duration. Built with 
Sequencer by @tomlarkworthy
The sequence connects to the drum pads which connect to the samples.
Development
Building complex applications on Observable requires all kinds of supporting libraries. A number of development notebooks stood out in 2021. Databases were a strong theme over the year, due to additional SQL support provided by the platform.
Interactive exploration with DuckDB: 5.2 million rows of college degrees in the browser by @bmschmidt
I've looked in the past at in-browser analytics of a granular database of college degrees using basic Apache Arrow functions and arquero. This notebook does the same thing using the new duckdb wasm module. At first pass it's a cut above in speed and flexibility, because: It can load from compressed parquet files, which allow it to work with larger datasets, faster; It can often be about 10x faster than equivalent in-browser solutions if the data is more than several thousand rows.
Introducing SQL with DuckDB in your browser by @cmudig
SQL is a declarative programming language transforming and querying data. It is declarative, meaning that you specify the data you want and not how the query should be computed. SQL is a great fit for a range of data transformation tasks including filter, sample, aggregation, window, and, join. SQL is the most popular query language for database management systems and essential to many business and data science workflows.
Hello, CodeMirror 5! by @mootari
Demo Stuff
SQLite by @observablehq
Observable has built-in support for SQLite, “a small, fast, self-contained, high-reliability, full-featured, SQL database engine” and “the most used database engine in the world.” Observable’s SQLite client uses sql.js, an Emscripten port of SQLite. After attaching a SQLite file to your notebook, create a SQLite database client by calling file.sqlite(). Here we’ll explore the Chinook sample database which represents a music library. You can also call SQLiteDatabaseClient.
localStorageView: Non-invasive local persistance by @tomlarkworthy
Lets make it simple to add local storage to a UI control (e.g. @observablehq/inputs) We exploit back-writability and input binding to avoid having to mess with existing UI control code. localStorageView(key) creates a read/write view of a safe-local-storage. Because it's a view it can be synchronized to any control we want to provide persistence for. We avoid having to write any setItem/getItem imperative wiring. If you want all users to share a networked value, consider shareview.
Hacking Observable's new Cell Modes to use SQL by @asg017
2021-12-01 Update: Rejoice! Observable now has SQL cells as a proper feature.
UI, UX and Web Design
Observble notebooks promote resuse. A number of useful components were developed which can be used in other Dataviz notebooks. Mathieu Jouhet wrote a stunning library + tutorial notebook on Rounding polygon corners in SVG
That colorful font by @kelleyvanevert
That colorful font from the browser extension, What have you made today? This is the original font face, I think: Type With Pride
D3 Charts by @d3
A guide to D3’s reusable example charts D3 Charts help you get started quickly with D3. To use these charts in your application, copy-paste or import the chart function into your code, then pass the chart function your data and any options. The chart function returns an SVG element that you can then insert into the page. The chart functions are designed to work out of the box: the options are all, well… optional, with reasonable defaults.
Rounding polygon corners by @daformat
In my previous notebook about how to find the union polygon of overlapping rectangles I've included a polygon corner rounding algorithm as a post-processing step but didn't explain how it worked.
Stencil all the things! Distributing circles around a shape by @daformat
Inspired by a tweet form Chris Gannon, I decided to explore this stencil effect by recreating it in a generative way. Instead of manually placing and colorizing each circle, I wanted to be able to dynamically generate them given any svg path. In this notebook we'll learn how use the svg APIs, sprinkled with some vector math, to randomly distribute shapes along any given path. Let's stencil all the things! Learning how to fish Now, in the end, this effect is pretty simple.
Upset Plots with Observable Plot by @spren9er
Venn diagrams can be used for comparing two or three sets. They give you an overview of intersection(s) of sets. However, when you have more than three sets to compare, Venn diagrams are not appropriate anymore. One way of visualizing intersections of multiple sets is an Upset Plot. We don't go into detail of how you read Upset Plots here, you can take a look at the official website or paper. There are libraries for R (UpSetR) and JavaScript (UpSet.js) available for creating your own Upset Plots.
Observable TimeChart by @observablehq
TimeChart is an importable component for visualizing time-series data. It can show many signals time-aligned as space-efficient horizon charts. If you hover over a chart, all charts on the page show the value at that time, aiding interpretation. To use in your notebook: Then, call TimeChart and TimeAxis to create charts as described below. Configuration TimeChart expects a consistent x-axis across plots so that you can see coincident patterns.
Interactive BCG Matrix Component by @analyzer2004
The BCG Matrix (aka Growth-share matrix) provides a strategic view for analyzing business units, products or services by splitting them into four quadrants according to the growth and relative market share: question marks, stars, dogs and cows. Each quadrant has its own set of unique characteristics that represents a certain degree of profitability. This helps companies decide where to focus their resources to generate the most value, as well as where to cut their losses.
Control Panel for Observable (Now with better responsiveness) by @analyzer2004
Control Panel is a set of components to assist in easily building a compact and neat argument UI for visualizations. This is extremely useful when the chart has a large number of arguments. It allows the user to adjust all the arguments while simultaneously seeing the changes without the need to scroll back and forth.
Composing viewofs with the view literal by @tomlarkworthy
Lets make custom UIs on Observable easy by composing views. We wrap the amazing hypertext literal with a interceptor that looks for key, view arguments. It uses the key to determine what field to map the view's value to in the container. The syntax of a 2 element array is inspired by Object.entries(...). By reusing the hypertext literal you are able to build your custom ui view using HTML, the best abstraction for layout.
CSS Variables #1: Basics by @gianordoli
CSS variables is a native way of creating ... variables in CSS! Their official name is actually “CSS custom properties” and they have been supported by all modern browsers since at least 2017. Unlike preprocessors variables, CSS custom properties have access to the DOM. A consequence of that, and the greatest advantage of them over preprocessor variables, is the possibility of declaring values that change based on media queries. More on that later.
Color Input / Observable Inputs by @observablehq
This input specifies an RGB color as a hexadecimal string #rrggbb. The initial value defaults to black (#000000) and can be specified with the value option. The color input is currently strict in regards to input: it does not accept any CSS color string. If you’d like greater flexibility, consider using D3 to parse colors and format them as hexadecimal. If you specify the datalist option as an array of hexadecimal color strings, the color picker will show this set of colors for convenient picking.
Form Input / Observable Inputs by @observablehq
The form input combines a number of inputs into a single compound input. It’s intended for a more compact display of closely-related inputs, say for a color’s red, green, and blue channels. You can pass either an array of inputs to Inputs.form, as shown above, or a simple object with enumerable properties whose values are inputs. In the latter case, the value of the form input is an object with the same structure whose values are the respective input’s value.
Observable Plot: Box by @observablehq
This notebook demonstrates how to use composite marks (arrays of marks) and transforms to create a box plot using Observable Plot. These functions (boxX and boxY) define a composite mark suitable for a box plot, applying the necessary
statistical transforms. The boxes are grouped by y or x, respectively, if present. This map function returns only outliers, returning NaN for non-outliers (based on the whisker definitions below).
Hello, citation-js! by @fheyen
github.com/larsgw/citation.js Paste one or more DOIs, or other identifiers into the input textbox and this notebook will display the citation(s) as text and bibtex.
Tree Input by @tophtucker
Observable has a lovely default tree inspector for hierarchical data: But you can’t select a child and refer to it in code. With this you can: Options: children: accessor; defaults to d => d.children name: function returning string or DOM node; defaults to `d => d.
Responsive grid by @tomlarkworthy
Place views on responsive grid panels to create mobile friendly composite views quickly. Simple Uniform Coordinates... yet responsive The controls above are for building intuition over the coordinate system and grid parameters. Play with it! (you can instantiate it against your own grids too) Formally, there are n panels which rearrange to suit the screen resolutions. Typically three panels per row for desktop and 1 per row on mobile.
Radar Chart by @saneef
Learning D3.js References Radar chart by Ben Welsh West Coast weather from Seattle to San Diego by Eric Lo Brand Personality Radar Chart by Jacob T.
Tooltip (D3 Convention) by @clhenrick
This version of a Tooltip uses the D3JS convention of `selection.call()` to register the Tooltip's behavior. This is an improvement on my original version of a Tooltip Component.
How to draw an arrow between 2 dots? by @neocartocnrs
undefined
Simple pencil + ink pen effect for SVG path using filters by @oliviafvane
"By Quentin Blake" This is a simple way to do a pencil or ink pen effect for an SVG `<path>\, using the \<feTurbulence/>\` noise filter. For more pencil effect examples on Observable, have a look at @matthewturk/pencil-effect-filters, and which also simplify and curve the path @coreygirard/pencil-mercator, @d3/sketchy-earth and @visionscarto/pencil-globe.
Tutorials
The Observable community likes to help others learn. There are tutorial notebooks dedicated to a wide variaty of topics. I write a lot about how to build applications on Observable, and a focus area for me in 2021 was scaling UI development.
Observable pour les géographes by @neocartocnrs
Depuis plus d'un an, je réalise des cartes et des visualisations de données avec Observable. Dans ce carnet, j'essaie d'expliquer ce que j'ai compris et pourquoi je considère que cet environnement est idéal pour créer des cartes. Je vais probablement améliorer ce matériel de présentation au fil du temps. N'hésitez pas à commenter et à suggérer des ajouts/changements. Commençons par une petite présentation introductive (Thanks Reveal.js). Ressources https://towardsdatascience.
Analyzing Time Series Data by @observablehq
Approaches for working with data that changes over time Many of us work with data that is about time, tracking fluctuations by hour, day, week, month, etc. We need to know what caused a spike or dip, learn why the actuals diverged from the forecast, characterize typical daily, weekly, and seasonal patterns, or see how the correlation between two metrics depends on time.
Scaling User Interface Development by @tomlarkworthy
Backend development is rapid, and yet... custom user interface development is still a huge timesink. UI development is a project bottleneck. This living document is a growing list of techniques I have learnt trying to overcome the UI development bottleneck. When I create complex applications, I need contextually sensitive user interfaces.
Union polygon and area of rectangles (line sweep algorithm) by @daformat
Given a set of unrotated and potentially overlapping rectangles, we want to compute the total area covered by their union and get their union polygon(s). One way to proceed is to first use a line sweep algorithm in order to subdivide the surface of the rectangles to a set of non-overlaping rectangles covering the same area. In other words, we want the resulting rectangles to be either contiguous or completely separated.
How to make a nice scale bar by @jgaffuri
Here are some hints to make a scale bar with nice rounded values and divisions, for a map. Usually, a scale bar has to fit within a rectangular component, with limited dimensions. It is unlikely that the scale bar length corresponds to a nice rounded value (such as 100km) which can be easily divided into other nice values (such as 25km, 50km, 75km). In such case, it is more suitable to shorten a bit the scale bar to a lower length value which makes it nicer (see here for example).
Plot for mathematicians by @mcmcclur
Observable Plot is a free, open-source library from the folks at Observable designed to make it easy to generate many common types of charts for the visualization of data. The documentation is extensive and generally excellent. It's (understandably) focused on its usage with data, though, which obscures how easily it can be used to generate nice mathematical plots. The purpose of this notebook is to illustrate how we might use it to generate simple graphs of functions.
Tools
The Observble community has built some impressive tooling to support data practitioners. The biggest news of the year was the introduction of Plot by the Observable team, which allows rapid production of informative charts.
Observable Plot by @observablehq
Observable Plot is a free, open-source JavaScript library to help you quickly visualize tabular data. It has a concise and (hopefully) memorable API to foster fluency — and plenty of examples to learn from and copy-paste. In the spirit of show don’t tell, below is a scatterplot of the height and weight of Olympic athletes (sourced from Matt Riggott), constructed using a dot mark. We assign columns of data (such as weight) to visual properties (such as the dot’s x), and Plot infers the rest.
Data Wrangler by @observablehq
Data wrangling is often a complex and time consuming part of quantitative work.
This (experimental) Wrangler function provides an interface to guide code
composition and also display the results. It uses the
Arquero package, a
robust data wrangling library based on the grammar of data manipulation. To get started, import the Wrangler function from this notebook: Then, pass your data into the Wrangler function, and access the results: As an example, here is an exploration of U.S. protest data
(source).
Introducing Observable Plot by @observablehq
We are thrilled to announce Observable Plot, a new open-source JavaScript library for exploratory data visualization. Observable’s mission is to help everyone make sense of the world with data. To succeed, we need to make visualization easier and faster, both to learn and to practice. Less chore, more joy. We believe people will be more successful finding and communicating insights if they can “use vision to think” instead of wrestling with the intricacies of programming.
Summary Table by @observablehq
Want a quick visual overview of a dataset? To get started, import the new (experimental) SummaryTable function from this notebook: Then, pass your data into the SummaryTable function. As an example, here is a summary table of the Penguins dataset (described in detail here).
Future of Data Work: Collaboration and No Limits by @observablehq
Imagine all the ways that data flows through an organization. People explore and analyze data. People ask critical questions of data. All of these people bring diverse skills when engaging with data - data scientists, data analysts, data engineers, developers, product managers and decision makers. All of these people seek insights from data for decisions toward better business outcomes, but they all use a different set of techniques and tools to do their jobs.
Introducing Dataflow, a self-hosted Observable Notebook Editor by @asg017
Dataflow is a new tool that lets you run, edit, and compile Observable notebooks locally on your own computer, with any text editor you want! If you have ever wanted to save + run Observable notebooks as files on your computer (for easier integration with git), then Dataflow will be very helpful! Quickstart Check out the documentation for more! In Dataflow, Observable notebooks are files on your computer, with a `.
Plot Tooltip by @mkfreeman
Two approaches for easily adding tooltips to your plots Tooltips on all plots Want to add tooltips to all of your plots? Import plot from this notebook, then simply set a title attribute for any mark in your plot call (note, this apporach only works with Plot.plot() calls, not `Plot.MARK().
Future of Data Work: Q&A with Mike Bostock by @observablehq
Mike Bostock has been busy. Our CTO and co-founder is the author of D3.js, an open-source library for data visualization which celebrated its 10th anniversary this year, and Observable Plot, a new library for exploratory visualization that builds on D3. Not to mention designing and developing features for the Observable platform. For this week’s Future of Data Work series, I sat down with Mike for a Q&A about his motivations and how he hopes people work with data in the future.
What’s new in Observable Plot (0.2.7)? by @observablehq
For more on the latest releases, please see our Changelog. Plot now allows you to inspect scales! Rendered plots (either SVG or figure elements) now expose a plot.scale(name) method that returns an object describing the scale in-use, including any materialized defaults. For example, say you made a scatterplot showing the rise of global surface temperature anomaly using a quantile color scale. To retrieve the color scale for this plot, call plot.scale passing in the name “color”.
Building a Better Beeswarm by @yurivish
Beeswarm plots are a fun, visually pleasing alternative to histograms that can be used when data is sufficiently small and you want to plot every point. This notebook contains an algorithm for accurate beeswarm plots with circles that vary in radius, using a simple implementation of this algorithm by James Trimble. In addition to being faster to compute than a force-directed layout, it has the advantage of improved accuracy since it preserves the precise x position of each data point.
G2Plot 2.3.23 Released 🎉 by @me-momo
G2Plot is an interactive and responsive charting library based on the grammar of graphics, which enables users to generate high-quality statistical charts through a few lines of code easily. G2 in "G2Plot" means the grammar of graphics and pays homage to ggplot2. What's New in G2Plot 2.3.23 We've added two new plot types: Facet and Violin, support localization, enhance several plots, like Sunburst, Stock, Heatmap and Box and so on.
Observable + GitHub 💞 by @observablehq
Visualizing data is more important than ever There are ~56M+ developers on GitHub and growing. As more developers collaborate, complexity increases. It’s easy for technical matters to consume all our attention, but are we asking the right questions? Is this the right data to be looking at? What are we trying to understand? How to we stay focused on insight? On thinking? How do we - all of us - shift our behavior in order to find answers together? Visualizing data is ONE of the ways we find answers together.
Top comments (0)