Permalink
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
158 lines (130 sloc) 4.24 KB
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Toucan Toco Sparklines</title>
<meta name="author" content="David Nowinsky <david@toucantoco.com>">
<meta name="description" content="Trendy graphs">
<meta name="keywords" content="sparkline,sparklines,toucan toco,toucan,toco,open-source,d3,plugin,chart,trends">
<link href="dist/tc-sparklines.css" rel="stylesheet">
<style>
@import url(https://fonts.googleapis.com/css?family=Montserrat|Roboto+Slab);
* {
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
}
.category__label-name {
font-family: 'Roboto Slab';
text-transform: none;
}
</style>
<style>
.category {
display: block;
padding: 10px;
}
.category__label,
.category__value {
font-style: normal;
text-transform: none;
display: inline-block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 120px;
padding: 0 10px;
}
.category__value {
opacity: 0.6;
}
.category__label {
text-align: right;
}
.sparkline__tooltip {
font-size: 0.7em;
}
</style>
</head>
<body>
<h1>Sparklines example</h1>
<a href="README.md">Documentation</a>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>
<script src="dist/tc-sparklines.js"></script>
<section class="example">
<button onClick="createOrUpdateSparklines()">Update</button>
<div id="example"></div>
<script>
function generateRandomData(seriesCount, datesCount) {
return d3.range(seriesCount).map(function (d) {
return {
name: 'Sparkline #' + d,
values: d3.range(datesCount).map(function (d) {
return {
label: d,
value: Math.random(d)
};
})
};
});
}
var sparklinesConfig = {
height: 30,
width: 200
};
// 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();
</script>
</section>
</body>
</html>