Tags: chart

35

sparkline

Tuesday, May 15th, 2018

Sandra Rendgen

A blog dedicated to data visualisation, all part of ongoing research for a book on Charles-Joseph Minard.

Data visualisation, interactive media and computational design are one focus of my work, but I also do research in the history of maps and diagrams.

Colour Wheels, Charts, and Tables Through History – The Public Domain Review

These are beautiful!

Featured below is a chronology of various attempts through the last four centuries to visually organise and make sense of colour.

Thursday, November 9th, 2017

Frappé Charts

A JavaScript library for displaying charts’n’graphs.

Monday, September 25th, 2017

Constellation charts

Refresh to get a new randomly generated constellation.

A lovely bit of creative JS from Emily

Thursday, August 3rd, 2017

Presenting the new d3.loom chart form plugin - Visual Cinnamon

Nadieh has packaged up the code for her lovely loom diagrams as a plug-in for d3.

Wednesday, December 28th, 2016

What you need to know about using VPN in the UK – By Andy Parker

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

chartd - responsive, retina-compatible charts with just an img tag

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

Making Charts with CSS | CSS-Tricks

What a lovely bit of progressive enhancement—styling data tables to display as charts.

Wednesday, June 3rd, 2015

Interface Experience Maps, From the Notebook of Aaron Gustafson

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

Everyone has JavaScript, right?

And that’s why you always use progressive enhancement!

screen shot from the TV series Arrested Development, showing a character whose catchphrase began 'And that's why...'

Sunday, February 15th, 2015

Progressive Enhancement and Data Visualizations | CSS-Tricks

A nice little pattern for generating a swish timeline in SVG from a plain ol’ definition list in HTML.

Saturday, October 4th, 2014

Tabletop Whale

Beautiful visualisations of science and nature.

Made with love by a designer with a molecular biology degree.

Friday, August 30th, 2013

WTF Visualizations

Data visualisations that make no sense.

Monday, March 4th, 2013

The gradient chart by Cennydd Bowles

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

phuu/sparksvg · GitHub

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

Canvas sparklines

I like sparklines a lot. Tufte describes a sparkline as:

…a small intense, simple, word-sized graphic with typographic resolution.

Four years ago, I added sparklines to Huffduffer using Google’s chart API. That API comes in two flavours: a JavaScript API for client-side creation of graphs, and image charts for server-side rendering of charts as PNGs.

The image API is really useful: there’s no reliance on JavaScript, it works in every browser capable of displaying images, and it’s really flexible and customisable. Therefore it is, of course, being deprecated.

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

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.

Here’s the JavaScript. You create a canvas element with the dimensions you want for the sparkline, then pass the ID of that element (along with your dataset) into the sparkline function:

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.

In the meantime, you can see Canvas Sparkline in action on the member profiles at The Session, like here, here, here, or here.

Update: Ask and thou shalt receive. Check out this fantastic lightweight SVG solution from Stuart—bloody brilliant!

Monday, January 2nd, 2012

angry, productive birds (tecznotes)

Mashing up Angry Birds and spreadsheets to better visualise project time-tracking.

Thursday, October 27th, 2011

the understatement: Android Orphans: Visualizing a Sad History of Support

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

10 Charts About Sex « OkTrends

This is may just be the best thing on the internet about data visualisation and statistics. And sex.