Show HN: Tufte's discrete sparklines using D3.js

http://dataviztalk.blogspot.com/2016/01/how-to-make-tuftes-discrete-sparklines.html

by rooviz • 11 years ago

70 8 11 years ago

dataviztalk.blogspot.com

jonahx2• 11 years ago

Curious what the advantage is (in general) of sparklines over, say, a line of circles with filled in = win and empty = loss? you could use a red fill color for streaks of 4 or more. It seems to me a solution like that would have less clutter and better communicate the data...

goldenchrome• 11 years ago

A single line of circles allows for less information density. If you force it to have the same information density then you lose a lot of legibility. Secondly, it's possibly harder to see where outliers are. I find this especially true when the vast majority of the dataset is 0, and you're looking for the outlying 1s.

See this example I mocked up, where each line has the same number of data points: http://i.imgur.com/xRoY41c.png

jonahx2• 11 years ago

Thanks for taking the time to do that.

rooviz• 11 years ago

Thanks, that example illustrates the information density point very well!

kpil• 11 years ago

What does the partial horizontal line indicate in Tufte's example?

indyz• 11 years ago

Looking at the Bosox 2009 schedule, it looks like the horizontal line indicates home games.

macintux• 11 years ago

Indeed. 2nd paragraph on the linked page:

"This example is from Tufte's site, and was made in collaboration with Adam Schwartz. The presence of a horizontal line represents a home game."

danielhellier• 11 years ago

Would have been better had you used SVG.

Show HN: Tufte's discrete sparklines using D3.js

Related Stories