Skip to content

Instantly share code, notes, and snippets.

@SpaceActuary

SpaceActuary/.block

Last active September 30, 2017 11:46
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save SpaceActuary/23290d85318a6b9f3ed281a727ef0d1f to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save SpaceActuary/23290d85318a6b9f3ed281a727ef0d1f to your computer and use it in GitHub Desktop.
Download ZIP
Inline Sparkline v4
Raw
.block
license: mit
Raw
README.md
Raw
data.csv
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
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.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.scalePoint(),
yScale = d3.scaleLinear(),
line = d3.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; }))
.range([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 svgEnter = svg.enter().append("svg")
svg = svg.merge(svgEnter);
var gEnter = svgEnter.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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment