Reusable slopegraph inspired/adapted from Ben Van Dyke's example into a reusable chart.
This slopegraph example shows the number of personal computers installed in a country per household. This includes desktop PCs and laptops, but excludes smartphones and terminals connected to mainframe computers. All figures are calculated using total number of Personal Computers and the Total Number of Households.
xxxxxxxxxx
<html lang="en">
<head>
<meta charset="utf-8">
<title>d3 | reusable slopegraph</title>
<meta name="author" content="Sundar Singh | eesur.com">
<link rel="stylesheet" href="main.css">
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
<header>
<h1>Reusable slopegraph</h1>
<p>Slopegraph example showing number of personal computers installed in a country per household.</p>
</header>
<section id="slopegraph"></section>
<footer>
<button id="reset">reset</button>
<nav id='nav-alt'></nav>
</footer>
<!-- namespace -->
<script> d3.eesur = {}; </script>
<!-- reusable slopegraph -->
<script src="d3_code_slopegraph.js"></script>
<script>
// render slopegraph chart
(function() {
// create chart
var slopegraph = d3.eesur.slopegraph()
// .margin({top: 20, bottom: 20, left: 100, right:100})
.strokeColour('#130C0E')
.keyName('country')
.keyValueStart('2000')
.keyValueEnd('2012')
.h(500)
// .format(d3.format('04d'))
.on('_hover', function (d, i) {
highlightLine(d, i);
});
d3.json('data.json', function(error, data) {
if (error) throw error;
// render chart
d3.select('#slopegraph')
.datum(data)
.call(slopegraph);
// alternative navigation
navAlt(data);
});
// reset button listener
d3.select('#reset')
.on('click', function () {
d3.selectAll('.elm').transition().style('opacity', 1);
d3.selectAll('.s-line').style('stroke', '#130C0E');
});
// navigation
function navAlt(data) {
d3.select('#nav-alt').append('ul')
.selectAll('li')
.data(data)
.enter().append('li')
.on('click', function (d, i) {
highlightLine(d, i);
})
.text(function (d) { return d['country']; });
}
// highlight line and fade other lines
function highlightLine(d, i) {
d3.selectAll('.elm').transition().style('opacity', 0.2);
d3.selectAll('.sel-' + i).transition().style('opacity', 1);
d3.selectAll('.s-line').style('stroke', '#FDBB30');
d3.selectAll('.s-line.sel-' + i).style('stroke', '#130C0E');
}
// just for blocks viewer size
d3.select(self.frameElement).style('height', '800px');
}());
</script>
</body>
</html>
Modified http://d3js.org/d3.v3.min.js to a secure url
https://d3js.org/d3.v3.min.js