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.
I decided to use his example as a starting point, working from the HTML file that is in Adam's github, which he kindly passed along. For my purposes, I only needed to illustrate a dichotomous variable, so I went ahead and removed the horizontal bars which represented home vs. away games, as well as the colouring which represented winning streaks. After recoding it to leverage the `d3.js` library, simplifying the styles, and reworking the code to make it reusable for future dichotomous variable projects, I was able to create my own example using d3, which you can see below Adam's:
Here's the relevant d3 code:
Let's break it down further.
Lines 7 - 10: We bind each data point to a div element
Line 11: We give each div the 'drawn-line' class which will format each div element as a line (black background colour, 1px by 8 px).
Lines 12-19: We then give it an HTML5 data attribute called data-binary-var which will be a 0 if the game was lost and a 1 if the game was won.
Line 20: Finally, we use our counter variable i to correctly place the lines along the x axis.
And here's our final product!
You can check out the full example I've written up on Github.
If you want to learn more about sparklines, check out Tufte's Beautiful Evidence. Thanks as well to Adam Schwartz for creating the original example that inspired this recreation - you can check out more of his work here and follow him on twitter here.
And here's some of the work in progress for my dashboard sparkline visualization element which prompted this whole exploration:
Hi, thank you for the great code. I was wondering if there is a way to visualize the winning streaks with red color in your example as well? Thanks
ReplyDeleteI made custom hack for this. The data has d[2] value including the current winning streak. If the streak is long enough, css file gives dash red color.
DeleteThis is a neat technique, but I wonder how useful this is for anything but the smallest of datasets, or perhaps datasets that are 90%+ in one direction or the other and you just want to point out the disproportions. For example, just looking at 162 redsox games (without the assist of the red lines) shows me ... they won a lot somewhere near the beginning of the season, and the rest of the chart is unintelligible.
ReplyDelete