Skip to content

Instantly share code, notes, and snippets.

@vagmi

vagmi/index.html

Forked from AgalyaLoganathan/index.html
Last active October 11, 2015 19:58
Show Gist options
  • Save vagmi/3911751 to your computer and use it in GitHub Desktop.
Save vagmi/3911751 to your computer and use it in GitHub Desktop.
Download ZIP
d3 segment chart
Raw
index.html
<!doctype html>
<html>
<head>
<title>Segment Graph</title>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap-combined.min.css" rel="stylesheet">
<style>
#segmentChart {
float: left;
width: 400px;
height: 100px;
}
#stackedBarChart {
float: left;
width: 200px;
height: 300px;
}
</style>
<script src="https://raw.github.com/mbostock/d3/master/d3.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.min.js"></script>
<script src="http://underscorejs.org/underscore-min.js" type="text/javascript"></script>
<script src="segment_graph.js" type="text/javascript"></script>
<script src="stacked_bar_graph.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
var segment_data=[{key: 2011, values: {left: 103000, right: 1237000}},
{key: 2012, values: {left: 245000, right: 1568000}},
{key: 2012, values: {left: 245000, right: 1568000}}];
$('#segmentChart').segmentGraph({data: segment_data, colors: ["#333","#777","#aaa", "#ddd"]});
var stack_data=[{key: 2011, values: [-10, 123]},
{key: 2012, values: [ 24, 156]}];
$('#stackedBarChart').stackedBarGraph({data: stack_data,
colors: ["#333","#777","#aaa", "#ddd"]
});
});
</script>
</head>
<body>
<div class="container">
<h1>Chart Demo</h1>
<div id="segmentChart">
<svg></svg>
</div>
<div id="stackedBarChart">
<svg></svg>
</div>
</div>
</body>
</html>
Raw
segment_graph.js
;(function($){
$.fn.segmentGraph = function(options) {
var newGetPosition = function (inside) {
var el = this.$element[0]
var width, height
if ('http://www.w3.org/2000/svg' === el.namespaceURI) {
var bbox = el.getBBox()
width = bbox.width
height = bbox.height
} else {
width = el.offsetWidth
height = el.offsetHeight
}
return $.extend({}, (inside ? {top: 0, left: 0} : this.$element.offset()), {
'width': width
, 'height': height
})
}
var data = options.data;
var colors = options.colors;
if(!colors) {
colors=[]
var ctr=0;
var colorFn=d3.scale.category10();
$.each(data,function(){
colors.push(colorFn(ctr++));
colors.push(colorFn(ctr++));
});
}
var lowDomain=0, highDomain=0;
_.each(data, function(obj,index) {
if(-obj.values.left<lowDomain) { lowDomain = -obj.values.left; }
if(obj.values.right>highDomain) { highDomain=obj.values.right; }
obj.values.left = -obj.values.left;
});
var svgElem = $("svg",this).width(this.width()).height(this.height());
var margin = 10;
var textWidth = 35;
var textHeight = 10;
var chartWidth = svgElem.width();
var x = d3.scale.linear().domain([lowDomain,highDomain]).range([margin+textWidth,chartWidth-margin-textWidth]);
var availableHeight = svgElem.height()-margin*2;
var barHeight = availableHeight / (data.length + (data.length-1)/2);
var colorIndex = 0;
var humanFormat = d3.format(".2s");
var ttFormat = d3.format(",");
var bars = d3.select(svgElem[0]).selectAll(".series")
.data(data)
.enter()
.append("g").classed("series",true)
.attr("transform",function(d,i) { return "translate(0,"+(margin+i*barHeight*1.5)+")"; })
.selectAll("g.bar").data(function(d,i){ return [d.values.left, d.values.right];})
.enter()
.append("g").classed("bar",true)
bars.selectAll("rect").data(function (d) { return [d]; }).enter()
.append("rect").style("fill",function(d,i) { return colors[colorIndex++]; })
.attr("x",function(d,i) { if(d<0) { return x(d); } else { return x(0); } })
.attr("y",0)
.attr("width",function(d,i) { return Math.abs(x(d)-x(0)); })
.attr("height", barHeight)
.attr("title", function(d,i) { return ttFormat(Math.abs(d)); })
.attr("data-placement", "top")
bars.selectAll("text").data(function(d) { return [d]; }).enter()
.append("text").text(function(d) {return humanFormat(Math.abs(d)); })
.attr("x",function(d,i) { if(d<0) { return x(d)-textWidth; } else { return x(d); } })
.attr("y",(barHeight+textHeight)/2)
d3.select(svgElem[0])
.append("line")
.attr("x1",x(0))
.attr("y1",0)
.attr("x2",x(0))
.attr("y2",availableHeight+margin*2)
.attr("style","stroke:black")
$("rect", svgElem).tooltip().data("tooltip").constructor.prototype.getPosition=newGetPosition;
}
}(jQuery));
Raw
stacked_bar_graph.js
;(function($){
$.fn.stackedBarGraph = function(options) {
var newGetPosition = function (inside) {
var el = this.$element[0]
var width, height
if ('http://www.w3.org/2000/svg' === el.namespaceURI) {
var bbox = el.getBBox()
width = bbox.width
height = bbox.height
} else {
width = el.offsetWidth
height = el.offsetHeight
}
return $.extend({}, (inside ? {top: 0, left: 0} : this.$element.offset()), {
'width': width
, 'height': height
})
}
var data = options.data;
var colors = options.colors;
if(!colors) {
colors=[]
var ctr=0;
var colorFn=d3.scale.category10();
$.each(data,function(){
colors.push(colorFn(ctr++));
colors.push(colorFn(ctr++));
});
}
var lowDomain=0, highDomain=0;
chartDomain = [0]
_.each(data, function(obj,index) {
chartDomain.push(obj.values[0],obj.values[1],obj.values[0]+obj.values[1]);
});
lowDomain=_.min(chartDomain);
highDomain=_.max(chartDomain);
var svgElem = $("svg",this).width(this.width()).height(this.height());
var margin = 10;
var textWidth = 35;
var textHeight = 10, textMargin=2;
var chartWidth = svgElem.width();
var availableWidth = chartWidth-margin*2;
var availableHeight = svgElem.height()-margin*2;
var y = d3.scale.linear().domain([lowDomain,highDomain]).range([availableHeight-textHeight-textMargin,textHeight+textMargin]);
var barWidth = availableWidth / (data.length + (data.length-1)/2);
var colorIndex = 0;
var humanFormat = d3.format(".2s");
var ttFormat = d3.format(",");
var labelPositions = [];
_.each(data, function(obj) {
var labels = [];
if(obj.values[0]<0){
if(obj.values[1]>=0) {
labels.push({val: obj.values[0], position: y(obj.values[0])+textHeight+textMargin});
labels.push({val: obj.values[1], position: y(obj.values[1])-textMargin});
}
else {
labels.push({val: obj.values[0], position: y(0)-textMargin});
labels.push({val: obj.values[1], position: y(obj.values[0]+obj.values[1])+textHeight+textMargin});
}
}
else{
if(obj.values[1]>=0){
labels.push({val: obj.values[0], position: y(0)+textHeight+textMargin});
labels.push({val: obj.values[1], position: y(obj.values[0]+obj.values[1])-textMargin});
}
else{
labels.push({val: obj.values[0], position: y(obj.values[0])-textMargin});
labels.push({val: obj.values[1], position: y(obj.values[1])+textHeight+textMargin});
}
}
labelPositions.push(labels);
});
var getYPosition = function(d,i) {
if(d[0]<0) {
if(d[1]>=0) {
return y(d[1]);
}
else {
return y(d[0]);
}
}
else {
if(d[1]<0){
return y(0);
}
else{
return(y(d[0]+d[1]));
}
}
};
var series = d3.select(svgElem[0]).selectAll(".series")
.data(data)
.enter()
.append("g").classed("series",true)
.attr("transform",function(d,i) { return "translate("+(margin+i*barWidth*1.5)+",0)"; })
series.selectAll("g.labels")
.data(function(d,i) { return labelPositions[i]; })
.enter()
.append("g").classed("labels",true)
.selectAll("text")
.data(function(d,i) { return [d]; })
.enter()
.append("text").text(function(d,i){ return humanFormat(d.val); })
.attr("x",(barWidth-textWidth)/2)
.attr("y",function(d){return d.position; });
var bars = series.selectAll("g.bar")
.data(function(d,i){ return [[0,d.values[0],0], [d.values[0],d.values[1],1]];})
.enter()
.append("g").classed("bar",true)
bars.selectAll("rect").data(function (d) { return [d]; }).enter()
.append("rect").style("fill",function(d,i) { return colors[colorIndex++]; })
.attr("x",0)
.attr("y", getYPosition)
.attr("height",function(d,i) { return Math.abs(y(0)-y(d[1])); })
.attr("width", barWidth)
.attr("title", function(d,i) { return ttFormat(d[1]); })
.attr("data-placement", "top")
d3.select(svgElem[0])
.append("line")
.attr("x1",0)
.attr("y1",y(0))
.attr("x2",availableWidth+margin*2)
.attr("y2",y(0))
.attr("style","stroke:black")
$("rect", svgElem).tooltip().data("tooltip").constructor.prototype.getPosition=newGetPosition;
}
}(jQuery));
@biovisualize
Copy link

Could you please fix the broken link to d3.js, using http://d3js.org/d3.v2.min.js ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment