An example for d3's plugin for sparklines toucantoco.com/sparklines
A Pen by David Nowinsky on CodePen.
Last active
February 10, 2019 01:26
-
-
Save davinov/7c2a8bca9ec595a62bff to your computer and use it in GitHub Desktop.
d3 sparklines
This file contains hidden or 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 hidden or 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 hidden or 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