An implementation of Tufte's sparklines, based off of http://www.tnoda.com/blog/2013-12-19
Added data generator, transitions, and click event
xxxxxxxxxx<html> <head> <title>D3 Sparklines</title> <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="sparklines.css"/> </head> <body> <div id="sparkline-title">Basic Sparklines</div> <div id="graph-container"> <div class="label-wrapper"> <div id="cost-label">Estimated Cost</div> <div id="count-label">Count</div> <div id="rating-label">Rating</div> </div> <div class="col-wrapper" id="a-info-wrapper"> <div class="title">Group A</div> <div class="sparkline-wrapper" id="sparkline-a-cost"></div> <div class="sparkline-wrapper" id="sparkline-a-meetings"></div> <div class="sparkline-wrapper" id="sparkline-a-avgRating"></div> </div> <div class="col-wrapper" id="b-info-wrapper"> <div class="title">Group B</div> <div class="sparkline-wrapper" id="sparkline-b-cost"></div> <div class="sparkline-wrapper" id="sparkline-b-meetings"></div> <div class="sparkline-wrapper" id="sparkline-b-avgRating"></div> </div> <div class="col-wrapper" id="c-info-wrapper"> <div class="title">Group C</div> <div class="sparkline-wrapper" id="sparkline-c-cost"></div> <div class="sparkline-wrapper" id="sparkline-c-meetings"></div> <div class="sparkline-wrapper" id="sparkline-c-avgRating"></div> </div> </div> </body> <script type="text/javascript" src="sparklines.js"></script></html> https://d3js.org/d3.v3.min.js
https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js