Example Gallery
Browse by category
...or scroll down to see them all. If you've made something with Idyll and would like to post it here, please open an issue on GitHub with the title "Gallery Example".
Explorable Explanations
How to Tune a Guitar
An interactive audio guide with guitars and a little music theory.
Kernel Density Estimation
An interactive explanation of the statistical technique
The Beginner's Guide to Dimensionality Reduction
Explore the methods that data scientists use to visualize high-dimensional data.
The Barnes-Hut Approximation
Efficient computation of N-body forces
Beat Basics
Explore 3/4 and 6/8 time using John Varney's rhythm wheel.
How does the eye work?
The Math of Card Shuffling
Riffling from factory order to complete randomness.
The Etymology of Trig Functions
A graphic walkthrough of mathematical history
Travelling Salesman Algorithms
From Naive to Christofide
Multi-Armed Bandits
An exploration of epsilon greedy and UCB1 algorithms
The Explanation & Comparison of Graph Searches
A walkthrough of depth first, breadth first, and A* search algorithms
Stepping Into the Filter
Understanding the edge detection algorithms in your smartphone
Sequence Alignment with Dynamic Programming
The Smith-Waterman Algorithm
Conflict Driven Clause Learning
The Boolean Satisfiability Problem
Efficient Collision Detection
The Gilbert-Johnson-Keerthi distance algorithm
Articles and Blog Posts
Statistical Power Analysis
Blueberry Pancakes
The D-I-Y Data of Fugazi
A Comic Introduction to Idyll
See how Idyll can be used with CSS grid to create a comic-style layout.
Autumn Colormaps
A look at trees, colormaps, and chroma.js
Who Shapes the Open Web?
An interactive tool to explore membership in W3C working groups.
From Nothing to Something in WebGL Using regl
Seattle PD’s Dashcam Problem
Visualizing 27 million frames of video lost over four years
The United Complaints of America
Analyzing over 700,000 complaints sent to the Consumer Financial Protection Bureau
Lorenz Attractor
Nonlinear Sliders
Tutorials
Triggering Updates
How to update components in response to user events.
Animating with Idyll
How to use CSS animations and custom tweening to animate elements.
Stacking Scroller Components
Introduction to leveraging multiple Scrollers in Idyll
Using Mapbox with Idyll
Add interactive maps to your Idyll posts.
Announcing idyll.pub
Publish interactive blog posts and explorable explanations with Idyll's free hosting service.
Scaffolding Interactives
Rapidly create scroll- and step-based interactives with Idyll
Take a Walk on the Idyll Side
Exploring new ways to create interactive documents
regl
Vega Lite
Firebase
Apparatus