An example for d3's plugin for sparklines toucantoco.com/sparklines
A Pen by David Nowinsky on CodePen.
An example for d3's plugin for sparklines toucantoco.com/sparklines
A Pen by David Nowinsky on CodePen.
<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> |
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(); |
@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; | |
} |