idyll-langidyll
DocsExamplesEditor

Example Gallery

Browse by category

  • Explorable Explanations
  • Articles and Blog Posts
  • Tutorials

...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

Source Available
How to Tune a Guitar
An interactive audio guide with guitars and a little music theory.
Source Available
Kernel Density Estimation
An interactive explanation of the statistical technique
Source Available
The Beginner's Guide to Dimensionality Reduction
Explore the methods that data scientists use to visualize high-dimensional data.
Source Available
The Barnes-Hut Approximation
Efficient computation of N-body forces
Source Available
Beat Basics
Explore 3/4 and 6/8 time using John Varney's rhythm wheel.
How does the eye work?
Source Available
The Math of Card Shuffling
Riffling from factory order to complete randomness.
Source Available
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

Source Available
Statistical Power Analysis
Source Available
Blueberry Pancakes
Source Available
The D-I-Y Data of Fugazi
Source Available
A Comic Introduction to Idyll
See how Idyll can be used with CSS grid to create a comic-style layout.
Source Available
Autumn Colormaps
A look at trees, colormaps, and chroma.js
Source Available
Who Shapes the Open Web?
An interactive tool to explore membership in W3C working groups.
Source Available
From Nothing to Something in WebGL Using regl
Source Available
Seattle PD’s Dashcam Problem
Visualizing 27 million frames of video lost over four years
Source Available
The United Complaints of America
Analyzing over 700,000 complaints sent to the Consumer Financial Protection Bureau
Source Available
Lorenz Attractor
Source Available
Nonlinear Sliders

Tutorials

Source Available
Animating with Idyll
How to use CSS animations and custom tweening to animate elements.
Source Available
Stacking Scroller Components
Introduction to leveraging multiple Scrollers in Idyll
Source Available
Using Mapbox with Idyll
Add interactive maps to your Idyll posts.
Source Available
Announcing idyll.pub
Publish interactive blog posts and explorable explanations with Idyll's free hosting service.
Source Available
Scaffolding Interactives
Rapidly create scroll- and step-based interactives with Idyll
Source Available
Take a Walk on the Idyll Side
Exploring new ways to create interactive documents
Source Available
D3
Source Available
regl
Source Available
Vega Lite
Source Available
Firebase
Source Available
Apparatus