Tufte's discrete sparklines using D3.js
I've been working on a dashboard and found a data set that would look great represented as a discrete sparkline. This type of visualization ...
Tufte's discrete sparklines using D3.js launched on January 6, 2016 with 70 votes, #1,015 of 4,522 launches that month and more than 90% of that year's launches. The site was still online in September 2026, 10 years on.
In plain words
Tufte's discrete sparklines using D3.js is a data visualization tool that creates compact, word-sized graphics to display small datasets using D3.js. It is designed for developers building dashboards who want to represent data trends in minimal space. The tool implements discrete sparkline techniques, allowing customization such as highlighting winning streaks with color coding through CSS modifications.
written from the facts on this page · September 2026
From the sources
Hi, thank you for the great code. I was wondering if there is a way to visualize the winning streaks with red color in your example as well? Thanks I made custom hack for this. The data has d[2] value including the current winning streak. If the streak is long enough, css file gives dash red color. This is a neat technique, but I wonder how useful this is for anything but the smallest of datasets, or perhaps datasets that are 90%+ in one direction or the other and you just want to point out the disproportions. For example, just looking at 162 redsox games (without the assist of the red lines) shows me ... they won a lot somewhere near the beginning of the season, and the rest of the chart…from dataviztalk.blogspot.com
Does a similar job
all alternatives →- TSTufte's line graph sparklines with D3.js2016 · dataviztalk.blogspot.com · ▲30
In this blog post, I will cover how to make a sparkline using d3.js . Our final product will look like this: For those who are unfamili...
Spark, An advanced 3D Gaussian Splatting renderer for Three.js2025 · sparkjs.dev · ▲377I'm the co-creator and maintainer of https://aframe.io/ and long time Web 3D graphics dev. Super excited about new techniques to author / render / represent 3D. Spark is a an open source library to easily integrate Gaussian splats in your THREE.js scene I worked with some friends and I hope you find useful. Looking forward to hearing what features / rendering techniques you would love to see next.
Funnel Visualization in HTML/CSS/D3.js2013 · bl.ocks.org · ▲60GitHub Gist: instantly share code, notes, and snippets.
A gallery of graphs built with React and D3.js2023 · react-graph-gallery.com · ▲297Many JS libraries exist to build graphs on the web (Vega, chartJS, Plotly...). They allow to make charts quickly. But you lose flexibility: you're limited by the options they offer. I just created a gallery with hundreds of graphs made with d3.js and React. - Examples are split by graph types - They all come with explanation and code sandboxes - Gradual complexity to ease the learning curve It took me ages to create this project! Feedback welcome!
- TLTrianglify – low poly style background generator with D3.js2014 · qrohlf.com · ▲170
- IAInstrumenting and visualizing JavaScript with d3.js2012 · latentflip.github.com · ▲105
More work this month
the category →
Endless lofi beats composed live in your browser, over pixel-art nights in Paris, Tokyo, New York, Hong Kong, Sydney, San Francisco and more. Free, no sign-up.
Work · 25d ago · loficities.com
Smooth Recorder▲257Mac screen recordings that look edited when you hit stop
Work · 19d ago · smoothrecorder.com
Work · 13d ago · readrare.com
Source: Show HN post ↗
Launched alongside, January 2016
the whole month →
Website Grader▲768Grade your website's strengths and weaknesses in seconds.
Growth · 2016 · website.grader.com
Clearbit Connect▲723Rapportive on steroids. See data about contacts in Gmail.
Growth · 2016 · clearbit.com
Create a viral waiting list in 60 seconds
Growth · 2016 · app.referralhero.com