Skip to content

Instantly share code, notes, and snippets.

@biovisualize

biovisualize/index.html

Created December 20, 2012 19:48
Show Gist options
  • Save biovisualize/4348024 to your computer and use it in GitHub Desktop.
Save biovisualize/4348024 to your computer and use it in GitHub Desktop.
Download ZIP
Basic Reusable Slopegraph
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<script type='text/javascript' src="http://d3js.org/d3.v2.js"></script>
<script type='text/javascript' src="slopegraph.js"></script>
<style type='text/css'>
line.slope-line{
stroke:green
}
text.slope-label{
fill:red;
font: 20px Arial;
}
</style>
</head>
<body>
<script type='text/javascript'>
var data = {
"data":[[1, 2, 3, 4, 5], [3, 2, 5, 1, 4]],
"label":[['apple', 'banana', 'carrot', 'bacon', 'egg']]
};
var slopeGraph = d3.custom.slopegraph();
d3.select('body')
.datum(data)
.call(slopeGraph);
slopeGraph.width(500);
d3.select('body')
.call(slopeGraph);
</script>
</body>
</html>
Raw
slopegraph.js
d3.custom = {};
d3.custom.slopegraph = function() {
var opts = {
width: 400,
height: 200,
margin: {top: 20, right: 50, bottom: 50, left: 50},
labelLength: 50
};
function exports(selection) {
selection.each(function (dataset) {
var chartHeight = opts.height - opts.margin.top - opts.margin.bottom;
var chartWidth = opts.width - opts.margin.right - opts.margin.left;
var parent = d3.select(this);
var svg = parent.selectAll("svg.chart-root").data([0]);
svg.enter().append("svg").attr("class", "chart-root")
.append('g').attr('class', 'chart-group');
svg.attr({width: opts.width, height: opts.height});
svg.exit().remove();
var chartSvg = svg.select('.chart-group');
var data = d3.transpose(dataset.data);
var scale = d3.scale.linear().domain(d3.extent(d3.merge(data))).range([0, chartHeight]);
var lines = chartSvg.selectAll('line.slope-line')
.data(data);
lines.enter().append("line")
lines.attr({
class: 'slope-line',
x1: opts.margin.left + opts.labelLength,
x2: opts.width - opts.margin.right - opts.labelLength,
y1: function(d) { return opts.margin.top + scale(d[0]); },
y2: function(d) { return opts.margin.top + scale(d[1]); }});
lines.exit().remove();
var leftLabels = chartSvg.selectAll('text.left_labels')
.data(data);
leftLabels.enter().append('text');
leftLabels.attr({
class: 'left_labels slope-label',
x: opts.margin.left + opts.labelLength,
y: function(d,i) { return opts.margin.top + scale(d[0]); },
dy: '.35em',
'text-anchor': 'end'})
.text(function(d,i) { return dataset.label[0][i] });
leftLabels.exit().remove();
var rightLabels = chartSvg.selectAll('text.right_labels')
.data(data);
rightLabels.enter().append('text');
rightLabels.attr({
class: 'right_labels slope-label',
x: opts.width - opts.margin.right - opts.labelLength,
y: function(d,i) { return opts.margin.top + scale(d[1]); },
dy: '.35em'})
.text(function(d,i) { return dataset.label[0][i] });
rightLabels.exit().remove();
});
}
exports.opts = opts;
createAccessors(exports);
return exports;
}
createAccessors = function(visExport) {
for (var n in visExport.opts) {
if (!visExport.opts.hasOwnProperty(n)) continue;
visExport[n] = (function(n) {
return function(v) {
return arguments.length ? (visExport.opts[n] = v, this) : visExport.opts[n];
}
})(n);
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment