A reusable d3 line chart inspired by Reuseable Charts article. Function line() is used to create a new chart instance. Graphs are rendered using randomly-generated data which will be updated repeatedly.
This example can be view on bl.ocks.org.
A reusable d3 line chart inspired by Reuseable Charts article. Function line() is used to create a new chart instance. Graphs are rendered using randomly-generated data which will be updated repeatedly.
This example can be view on bl.ocks.org.
/* | |
* Define line graph | |
*/ | |
function line(){ | |
// Default settings | |
var $el = d3.select("body") | |
var width = 960; | |
var height = 500; | |
var color = "steelblue"; | |
var margin = {top: 10, right: 30, bottom: 30, left: 30}; | |
var data = []; | |
var svg, y, xAxis, yAxis, line; | |
var x = d3.scale.linear().range([0, width]); | |
var object = {}; | |
// Method for render/refresh graph | |
object.render = function(){ | |
if(!svg){ // Render first time | |
y = d3.scale.linear() | |
.range([height, 0]); | |
xAxis = d3.svg.axis() | |
.scale(x) | |
.orient("bottom"); | |
yAxis = d3.svg.axis() | |
.scale(y) | |
.orient("left"); | |
line = d3.svg.line() | |
.x(function(d) { return x(d.x); }) | |
.y(function(d) { return y(d.y); }) | |
.interpolate("basis"); | |
svg = $el.append("svg") | |
.attr("width", width + margin.left + margin.right) | |
.attr("height", height + margin.top + margin.bottom) | |
.append("g") | |
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
x.domain(d3.extent(data, function(d) { return d.x; })); | |
y.domain(d3.extent(data, function(d) { return d.y; })); | |
svg.append("g") | |
.attr("class", "x axis") | |
.attr("transform", "translate(0," + height + ")") | |
.call(xAxis); | |
svg.append("g") | |
.attr("class", "y axis") | |
.call(yAxis) | |
svg.append("path") | |
.datum(data) | |
.attr("class", "line") | |
.attr("stroke", color) | |
.attr("d", line); | |
}else{ //Refresh | |
object.data(data); | |
x.domain(d3.extent(data, function(d) { return d.x; })); | |
y.domain(d3.extent(data, function(d) { return d.y; })); | |
svg.select("g.y") | |
.transition() | |
.duration(1000) | |
.call(yAxis); | |
svg.select("g.x") | |
.transition() | |
.duration(1000) | |
.call(xAxis); | |
svg.selectAll("path.line") | |
.datum(data) | |
.transition() | |
.duration(1000) | |
.attr("d", line); | |
} | |
return object; | |
}; | |
// Getter and setter methods | |
object.data = function(value){ | |
if (!arguments.length) return data; | |
data = value; | |
return object; | |
}; | |
object.$el = function(value){ | |
if (!arguments.length) return $el; | |
$el = value; | |
return object; | |
}; | |
object.width = function(value){ | |
if (!arguments.length) return width; | |
width = value; | |
return object; | |
}; | |
object.height = function(value){ | |
if (!arguments.length) return height; | |
height = value; | |
return object; | |
}; | |
object.color = function(value){ | |
if (!arguments.length) return color; | |
color = value; | |
return object; | |
}; | |
object.x = function(value){ | |
if (!arguments.length) return x; | |
x = value; | |
return object; | |
} | |
return object; | |
}; |
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
body { | |
font: 10px sans-serif; | |
} | |
.axis path, | |
.axis line { | |
fill: none; | |
stroke: #000; | |
shape-rendering: crispEdges; | |
} | |
.x.axis path { | |
display: none; | |
} | |
.line { | |
fill: none; | |
stroke-width: 1.5px; | |
} | |
.tooltip .circle{ | |
fill: none; | |
} | |
</style> | |
<body> | |
<div id="line-1"></div> | |
<div id="line-2"></div> | |
<div id="line-3"></div> | |
<div id="line-4"></div> | |
<script src="http://d3js.org/d3.v3.js"></script> | |
<script src="d3.line.js"></script> | |
<script> | |
// Method used for generate random data. | |
var getData = function(){ | |
var data = []; | |
for(var i=0; i<100; i++){ | |
data.push({ | |
x: i, | |
y: Math.round(Math.random() * 100) | |
}); | |
}; | |
return data; | |
}; | |
/* | |
* Create graphs | |
*/ | |
var line1 = line() | |
.$el(d3.select("#line-1")) | |
.height(100) // Set height | |
.data(getData()) // Set data | |
.render(); | |
var line2 = line() | |
.$el(d3.select("#line-2")) | |
.height(100) // Set height | |
.color("green") // Set color | |
.data(getData()) // Set data | |
.render(); | |
var line3 = line() | |
.$el(d3.select("#line-3")) | |
.height(100) // Set height | |
.color("red") // Set color | |
.data(getData()) // Set data | |
.render(); | |
var line4 = line() | |
.$el(d3.select("#line-4")) | |
.height(100) // Set height | |
.color("gray") // Set color | |
.data(getData()) // Set data | |
.render(); | |
/* | |
* Refresh graphs repeatedly | |
*/ | |
setInterval(function(){ | |
line1.data(getData()).render(); | |
line2.data(getData()).render(); | |
line3.data(getData()).render(); | |
line4.data(getData()).render(); | |
}, 3000); | |
</script> | |