An example for d3's plugin for sparklines toucantoco.com/sparklines
A Pen by David Nowinsky on CodePen.
-
-
Save chabb/6911cdff96bc1a3ec512411907f0e71d to your computer and use it in GitHub Desktop.
d3 sparklines
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="//cdn.rawgit.com/ToucanToco/sparklines/master/dist/tc-sparklines.css" rel="stylesheet" /> | |
| <link href="style.css" rel="stylesheet" /> | |
| <button onClick="createOrUpdateSparklines()">Update</button> | |
| <div id="example"></div> | |
| <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js"></script> | |
| <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script> | |
| <script src="//cdn.rawgit.com/ToucanToco/sparklines/master/dist/tc-sparklines.js"></script> | |
| <script src="script.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function generateRandomData(seriesCount, datesCount) { | |
| return d3.range(seriesCount).map(function (d) { | |
| return { | |
| name: '#' + d, | |
| values: d3.range(datesCount).map(function (d) { | |
| return { | |
| label: d, | |
| value: Math.random(d) | |
| }; | |
| }) | |
| }; | |
| }); | |
| } | |
| var sparklinesConfig = { | |
| height: 20, | |
| width: 180 | |
| }; | |
| // Sparklines configuration | |
| var sparklines = d3.toucan.sparklines() | |
| .height(sparklinesConfig.height) | |
| .width(sparklinesConfig.width) | |
| .dateSelector('label') | |
| .forceLexicalOrder(false) | |
| .valueSelector('value') | |
| .valueFormat('.2p') | |
| .unit(''); | |
| function createOrUpdateSparklines() { | |
| var exampleElement = d3.selectAll('#example') | |
| // Adding some sample parents elements | |
| var categoriesSelection = exampleElement.selectAll('.category') | |
| .data(generateRandomData(10, 30), function(cat) { | |
| return cat.name; | |
| }); | |
| var newCategories = categoriesSelection | |
| .enter() | |
| .append('div') | |
| .classed('category', true); | |
| newCategories | |
| .append('span') | |
| .classed('category__label', true) | |
| categoriesSelection.select('.category__label') | |
| .text(function (d) { | |
| return d.name; | |
| }); | |
| // Creating blocks that will contain sparklines | |
| var newSparklinesSelection = newCategories | |
| .append('svg') | |
| .classed('sparkline', true) | |
| .attr('height', sparklinesConfig.height) | |
| .attr('width', sparklinesConfig.width) | |
| // Binding data to them | |
| var sparklinesSelection = categoriesSelection.select('.sparkline') | |
| .datum(function (d) { | |
| return d.values; | |
| }); | |
| newCategories | |
| .append('span') | |
| .classed('category__value', true) | |
| var valueFormatter = d3.format('.2p'); | |
| categoriesSelection.select('.category__value') | |
| .text(function (d) { | |
| return valueFormatter(d.values[d.values.length - 1].value); | |
| }); | |
| // Do the magic! | |
| sparklinesSelection | |
| .call(sparklines); | |
| } | |
| createOrUpdateSparklines(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import url(https://fonts.googleapis.com/css?family=Montserrat|Roboto+Slab); | |
| * { | |
| font-family: 'Montserrat', sans-serif; | |
| text-transform: uppercase; | |
| } | |
| .category__label { | |
| font-family: 'Roboto Slab'; | |
| text-transform: none; | |
| } | |
| .category { | |
| display: block; | |
| padding: 5px; | |
| } | |
| .category__label, | |
| .category__value { | |
| font-style: normal; | |
| text-transform: none; | |
| display: inline-block; | |
| overflow: hidden; | |
| white-space: nowrap; | |
| text-overflow: ellipsis; | |
| width: 30px; | |
| padding: 0 5px; | |
| } | |
| .category__value { | |
| width: 50px; | |
| opacity: 0.6; | |
| } | |
| .category__label { | |
| text-align: right; | |
| } | |
| .sparkline__tooltip { | |
| font-size: 0.7em; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment