Thursday, November 9th, 2017
Monday, September 25th, 2017
Friday, April 22nd, 2016
This could be a handy replacement for some Google Charts images of graphs. It uses SVG and is responsive by default.
I bet it wouldn’t be too tricky to use this to make some sparklines.
Sunday, August 23rd, 2015
What a lovely bit of progressive enhancement—styling data tables to display as charts.
Sunday, February 15th, 2015
A nice little pattern for generating a swish timeline in SVG from a plain ol’ definition list in HTML.
Saturday, October 4th, 2014
Beautiful visualisations of science and nature.
Made with love by a designer with a molecular biology degree.
Sunday, January 6th, 2013
Remember when I made that canvas sparkline script? Remember when Stuart grant my wish for an SVG version? Well, now Tom has gone one further and created a hosted version on sparksvg.me
Not a fan of sparklines? Bars and circles are also available.
Sunday, December 30th, 2012
I like sparklines a lot. Tufte describes a sparkline as:
…a small intense, simple, word-sized graphic with typographic resolution.
The death warrant for Google image charts sets the execution date for 2015. Time to start looking for an alternative.
I couldn’t find a direct equivalent to the functionality that Google provides i.e. generating the images dynamically on the server. There are, however, plenty of client-side alternatives, many of them using
Most of the implementations I found were a little heavy-handed for my taste: they either required jQuery or Processing or both. I just wanted a quick little script for generating sparklines from a dataset of numbers. So I wrote my own.
I’ve put my code up on Github as Canvas Sparkline.
canvas element with the dimensions you want for the sparkline, then pass the ID of that element (along with your dataset) into the
sparkline ('canvasID', [12, 18, 13, 12, 11, 15, 17, 20, 15, 12, 8, 7, 9, 11], true);
(that final Boolean value at the end just indicates whether you want a red dot at the end of the sparkline).
The script takes care of normalising the values, so it doesn’t matter how many numbers are in the dataset or whether the range of the numbers is in the tens, hundreds, thousands, or hundreds of thousands.
There’s plenty of room for improvement:
- The colour of the sparkline is hardcoded (50% transparent black) but it could be passed in as a value.
- All the values should probably be passed in as an array of options rather than individual parameters.
Feel free to fork, adapt, and improve.
The sparklines are working quite nicely, but I can’t help but feel that this isn’t the right tool for the job. Ideally, I’d like to keep using a server-side solution like Google’s image charts. But if I am going to use a client-side solution, I’m not sure that
canvas is the right element. This should really be SVG:
canvas is great for dynamic images and animations that need to update quite quickly, but sparklines are generally pretty static. If anyone fancies making a lightweight SVG solution for sparklines, that would be lovely.
Update: Ask and thou shalt receive. Check out this fantastic lightweight SVG solution from Stuart—bloody brilliant!
Monday, January 2nd, 2012
Mashing up Angry Birds and spreadsheets to better visualise project time-tracking.
Monday, September 26th, 2011
This is may just be the best thing on the internet about data visualisation and statistics. And sex.
Thursday, February 18th, 2010
A thoroughly well-researched and data-heavy blog post ...complete with interactive charts!
Monday, December 1st, 2008
End of the year charts based on real data: "Based entirely on your scrobbling, this is a real look at what you've been listening to (not just buying). The charts are ranked by total number of listeners."
Friday, July 11th, 2008
The Google Chart API can produce QR codes. Neato!
Thursday, December 6th, 2007
All the code you need to add charts and graphs to your site.
Wednesday, October 17th, 2007
Compare and contrast Last.fm's chart with the "official" UK chart. It's as if Radiohead doesn't even exist in meatspace.