Built with blockbuilder.org
forked from SpaceActuary's block: Mini Chart
forked from SpaceActuary's block: Mini Charts
Built with blockbuilder.org
forked from SpaceActuary's block: Mini Chart
forked from SpaceActuary's block: Mini Charts
group | year | amount1 | amount2 | amount3 | |
---|---|---|---|---|---|
ABC | 2010 | 11124 | 50.236 | 0.558825264 | |
ABC | 2011 | 11433 | 51.577 | 0.589679841 | |
ABC | 2012 | 11914 | 49.006 | 0.583857484 | |
ABC | 2013 | 11734 | 48.706 | 0.571516204 | |
ABC | 2014 | 12222 | 50.496 | 0.617162112 | |
ABC | 2015 | 11943 | 52.802 | 0.630614286 |
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> | |
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'> | |
<style> | |
body { | |
margin: 0;position:fixed;top:0;right:0;bottom:0;left:0; | |
font-family: 'Montserrat', sans-serif; | |
font-size: 14px; | |
} | |
div { | |
display: inline; | |
margin: 20px 0px 0px 20px; | |
} | |
.spark { | |
fill: none; | |
stroke: steelblue; | |
stroke-width: 1.5px; | |
} | |
.point { | |
fill: steelblue; | |
stroke: #fff; | |
} | |
.label, | |
.change, | |
.axis, | |
.main { | |
text-anchor: middle; | |
alignment-baseline: middle; | |
fill: #aaa; | |
} | |
.change, | |
.main { | |
text-anchor: middle; | |
alignment-baseline: middle; | |
fill: #333; | |
} | |
line.axis { | |
stroke: #aaa; | |
stroke-width: 1.5px; | |
} | |
</style> | |
</head> | |
<body> | |
<p> | |
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore <span id="spark1"></span> et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate <span id="spark2"></span> velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in <span id="spark3"></span>culpa qui officia deserunt mollit anim id est laborum. | |
</p> | |
<script> | |
console.clear(); | |
var changeFormat = d3.format(".1f"), | |
numberFormat = d3.format(",.0f"); | |
d3.csv("data.csv", function(raw){ | |
var data = wide2long(raw); | |
//console.log(data); | |
nested = d3.nest() | |
.key(function(d){ return d.measure; }) | |
.entries(data); | |
//console.log("nested", nested) | |
console.table(nested[0].values) | |
d3.select("#spark1") | |
.datum(nested[0].values) | |
.call(sparkline().numberFormat(d3.format(",.0f"))); | |
d3.select("#spark2") | |
.datum(nested[1].values) | |
.call(sparkline().numberFormat(d3.format(".2f"))); | |
d3.select("#spark3") | |
.datum(nested[2].values) | |
.call(sparkline().numberFormat(d3.format(".1%"))); | |
console.log("hello3"); | |
//.values.forEach(function(d){ | |
//makeChart(d.values); | |
//}) | |
//makeChart(data); | |
}); | |
function wide2long(wide){ | |
var long = []; | |
var columns = d3.keys(wide[0]), | |
keys = ["group", "year"], | |
vals = columns.filter(function(k){ return !k.match(/(group|year)/); }) | |
wide.forEach(function(d, i){ | |
vals.forEach(function(v){ | |
row = {}; | |
row.raw_row = i; | |
keys.forEach(function(k){ | |
row[k] = d[k]; | |
}); | |
row.measure = v; | |
row.amount = +d[v]; | |
long.push(row); | |
}); | |
}) | |
return long; | |
} | |
function dataPrep(raw) { | |
// fix data | |
raw.unshift({year: NaN, amount: NaN}); | |
raw.forEach(function(d, i){ | |
d.year = +d.year; | |
d.amount = +d.amount; | |
}) | |
var dataPairs = d3.pairs(raw); | |
var data = dataPairs.map(function(d){ | |
var d0 = d[0], | |
d1 = d[1]; | |
d1.change = (d1.amount / d0.amount) - 1; | |
return d1; | |
}) | |
return data; | |
} | |
function sparkline() { | |
var margin = {top: 0, bottom: 0, left: 0, right: 0}, | |
height = 10 - margin.top - margin.bottom, // default height | |
width = 30 - margin.left - margin.right, // default width | |
changeFormat = d3.format(".1f"), | |
numberFormat = d3.format(",.0f"), | |
xScale = d3.scale.ordinal(), | |
yScale = d3.scale.linear(), | |
line = d3.svg.line() | |
.x(function(d){ return xScale(d.year); }) | |
.y(function(d){ return yScale(d.amount); }); | |
function chart(selection) { | |
selection.each(function(raw){ | |
var chartData = dataPrep(raw); | |
console.table(chartData); | |
var yExt = d3.extent(chartData, function(d){ return d.amount; }); | |
xScale | |
.domain(chartData.map(function(d){ return d.year; })) | |
.rangePoints([0, width]); | |
yScale | |
.domain(yExt).nice() | |
.range([height, 0]); | |
// Select the svg element, if it exists. | |
var svg = d3.select(this).selectAll("svg").data([chartData]); | |
// Otherwise, create the skeletal chart. | |
var gEnter = svg.enter().append("svg").append("g"); | |
gEnter.append("g").attr("class", "y axis"); | |
// Update the outer dimensions. | |
svg .attr("width", width + margin.left + margin.right) | |
.attr("height", height + margin.top + margin.bottom); | |
// Update the inner dimensions. | |
var g = svg.select("g") | |
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
// Update the lines | |
var spark = g.append("path").datum(chartData) | |
.attr("class", "spark") | |
.attr("d", line); | |
}); | |
} | |
chart.width = function(value) { | |
if (!arguments.length) return width; | |
width = value; | |
return chart; | |
}; | |
chart.height = function(value) { | |
if (!arguments.length) return height; | |
height = value; | |
return chart; | |
}; | |
chart.numberFormat = function(value) { | |
if (!arguments.length) return numberFormat; | |
numberFormat = value; | |
return chart; | |
}; | |
chart.changeFormat = function(value) { | |
if (!arguments.length) return changeFormat; | |
changeFormat = value; | |
return chart; | |
}; | |
return chart; | |
} | |
</script> | |
</body> |