Thursday, November 9th, 2017
Monday, September 25th, 2017
Thursday, August 3rd, 2017
Wednesday, December 28th, 2016
If you’re prepping your defences against the snooper’s charter (and you/I should be), Andy recommend using NordVPN.
Tuesday, May 10th, 2016
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.
Wednesday, June 3rd, 2015
This sounds like it could be a very useful tool to introduce early in projects to get a shared understanding of progressive enhancement.
Friday, April 24th, 2015
And that’s why you always use progressive enhancement!
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.
Friday, August 30th, 2013
Data visualisations that make no sense.
Monday, March 4th, 2013
A very handy technique from Cennydd for answering the “it depends” question of when you might need a separate device-specific site (‘though I think that a separate can be a good option in addition to a responsive site, rather than instead of).
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.
Thursday, October 27th, 2011
A damning indictment on the lack of any upgrade path for most Android phones. It’s disgusting that most customers have contracts that are longer than the life cycle of their phone’s operating system (and crucially for me; their browser).
Monday, September 26th, 2011
This is may just be the best thing on the internet about data visualisation and statistics. And sex.
Tuesday, September 7th, 2010
A beautiful SVG visualisation (with source code) of the Rattle team's experience of dConstruct 2010.
Tuesday, August 24th, 2010
Cute illustration of different content types in HTML (though, personally, I would put sectioning content — section, article, nav, aside — into their own group).