
Sparklines, according to Edward Tufte, who invented them, are “small, high-resolution graphics embedded in a context of words, numbers, images.” Among designers, there’s general agreement that sparklines are fantastic for conveying time-series data, particularly financial and economic information, in primarily text-based media like stock tables.
Several weeks ago, my colleague Brian Aguilar came into work with an idea: what if we embedded a sparkline in a tweet? He had found a blog post by Alex Kerin that explained how to generate a bar chart with Unicode characters like so: ▁▃▆▃▁▅▆▆▃▆▅▃▂▁▁
So we gave it a shot, using Kerin’s Excel workbook to generate the appropriate Unicode for a dataset of new claims for unemployment benefits. Reaction was generally positive, but there were deficits to the approach, most notably that some of the blocks didn’t align along the x-axis on Macs. I also placed the blocks after six words of introductory text, which meant they split over two lines in some contexts like mobile Twitter clients. And it turns out that Unicode characters don’t display on TweetDeck by default. Still, we were thrilled with version one.
On Friday, we tried again, this time relying on a web-based tool by The Data Collective, which was inspired by Kerin and discovered by Albert Sun. It was the morning of the monthly jobs report, so we visualized the unemployment rate over the past 12 months. That’s the tweet above, which has been retweeted 249 times amid an enthusiastic reception.
Some people observed the sparktweet — if it’s OK to call it that — may suggest unemployment in April 2011 (9%) was a third of the rate in August through November 2010 (9.6% – 9.8%), when that’s hardly the case. Certainly the y-axis does not begin at zero. Charts built with Unicode block elements will always be rough, but I’d be interested in ways to improve their resolution. (There’s a lot to work with.)
In the meantime, here are some observations and best practices:
- Place the chart at the beginning of a sparktweet to minimize how often it breaks over two lines. You might even try a line break after the chart, which will render in some Twitter clients.
- Six unique values can be visualized in a sparktweet. because the current iteration makes use of these characters: ▁▂▃▅▆▇ Any more than six and the differences begin to blur.
- It’s possible to view Unicode in TweetDeck: Go to Settings > Colors/Font and choose International Font / Twitter Key. Almost no TweetDeck users enable this option, however, so it’s worth writing sparktweets to be legible without the visual.
- People really seem to like sparktweets, but it’s unclear how much of the reaction is due to novelty. Like Facebook profile hacks, Twitter art succeeds by expanding the creative boundaries of a medium while adhering to its strict rules.
And if you create one yourself, why not hashtag it #sparktweet.
P.S.
P.P.S.
Most of the reaction to this post was positive, but some folks fairly focused on the accuracy issues I also flagged. The best discussion is in the thread below a post by Than Tibbetts, who called sparktweets “junk.” He’s right to be concerned, but my favorite comment there is:
140 characters isn’t high resolution *period*, as far as information conveyance is concerned. Sparktweets are an amusing hack, are I would argue higher density than a raw Tweet in many cases (one I made has two time series that could not fit in 140 characters summarized).
Dr. Drang, who wrote a Python script to generate sparktweets, has a similar take: “Lighten up, Francis,” is how he puts it.
This is Twitter we’re talking about, not an article for an ASA journal. Sparktweets are just a fun way to show data—data which may well be properly analyzed and presented in a linked article.
The question, in their minds and mine, is how much resolution one should really expect from a tweeted chart. And in that respect, Drake Martinet points to a good standard: “Sparktweets give me nothing that a good sentence can’t.” If that’s true, then, yes: “Easy on the sparktweets.” But I think there are signs of something more than novelty, of sparktweets that pack more punch than a sentence.
On May 26, we tried another sparktweet, and it was our most successful yet: the y-axis at zero, text providing context, and a link to a more-detailed chart.


Love it. Keep experimenting.
And for the record, in the Tweetdeck Chrome app, they have been coming through just fine (with no settings adjustment).
[...] Read the full article here by Zach Seward. [...]
Zack, thanks for posting about this. It’s a clever way of getting a lot of information in a little space. Thanks especially for including the best practices on there — saves us all some pain :)
I’m guessing it will have a bit more lasting effect than Facebook profile hacks, because this does help with clarity — most people can’t visualize numbers without deliberately concentrating, so even very rough graphs can be useful.
The question for me is if the usefulness goes beyond tech-savvy types. It would be cool if you could share with us any info you find on that.
Zach, great job and thanks for the pointer to my site. I think they work best if you give a range as well: ▁▂▃▅▆▇ (8 mon, 22k to 56k).
It would be really nice one day if you could embed a Google chart as a sparkline in a tweet (http://www.datadrivenconsulting.com/2010/07/using-google-chart-api-to-create-dashboards-and-sparklines/)
Keep it up!
Sparking Innovation…
In a remarkably fast evolution from what-if rumination on a blog to cutting-edge news dissemination, Alex Kerin’s idea last year of how to use Twitter……
[AMATH-1493] Integrate Sparklines to visualize progress (Metabug)…
Text-only sparklines can be created via Unicode: http://zachseward.com/sparktweets/...
Interestingly, your former head information graphics guru, Dona Wong, worked closely with Tufte when she was a graduate student at Yale in the early 1990s (that’s where I know her from). She’s responsible for some interesting graphs in at least one of his book’s at the time.
Before reading your article, I wrote a script for automating the generation of sparktweets and tried it out. They looked fine in some Twitter clients, but not on Twitter’s website (I’m using a Mac). The misalignment problem you mentioned seems to be related to how the tweet’s font is specified in CSS. I give some examples here:
http://www.leancrew.com/all-this/2011/05/textexpander-sparkline-snippet/
I’m not sure how to solve the problem, but I don’t think leaving out the middle block is a good idea because the column heights won’t vary smoothly across the range.
[...] Zach Seward, outreach editor of the Wall Street Journal, explains how they work and offers a few best practices: [...]
[...] Sparktweets is the brainchild of Zach Seward, Outreach Editor for The Wall Street Journal. Sparktweets builds on Edward Tufte’s invention, the sparkline, which is a small, high-resolution graph embedded in a context of words, numbers, or images. You see these mostly used on financial websites to describe the rise and fall of stocks, but Sparktweets takes this idea and builds on it by embedding Unicode histographs within Twitter’s 140-character limit. The effect is pretty neat. Take a look at these. [...]
[...] Analysis By: Zach Seward [...]
[...] ZACH SEWARD: Spark Tweets [...]
[...] More at http://zachseward.com/sparktweets/ [...]
Love it.
[...] Zach Seward’s blog explains how the Wall Street Journal’s unemployment sparktweet came about. He says that the team first tried using Unicode to display graphics in tweets, but found there were problems when viewing on Macs. [Read more...] Share this:EmailPrintFacebookShareStumbleUponRedditDigg [...]