Skip to content

Instantly share code, notes, and snippets.

@ChrisManess

ChrisManess/.block

Last active February 16, 2016 20:15
Show Gist options
  • Save ChrisManess/1ed2f829a0c73a8ac165 to your computer and use it in GitHub Desktop.
Save ChrisManess/1ed2f829a0c73a8ac165 to your computer and use it in GitHub Desktop.
Download ZIP
Stacked Bars Widget Inc. Example
Raw
.block
license: gpl-3.0
Raw
data.json
{
"Jan 01 2016":{
"widgetA":197,
"widgetB":4,
"widgetC":37,
"widgetD":2,
"widgetE":50
},
"Feb 01 2016":{
"widgetA":181,
"widgetB":5,
"widgetC":38,
"widgetD":2,
"widgetE":48
},
"Mar 01 2016":{
"widgetA":171,
"widgetB":7,
"widgetC":39,
"widgetD":4,
"widgetE":46
},
"Apr 01 2016":{
"widgetA":168,
"widgetB":9,
"widgetC":40,
"widgetD":6,
"widgetE":45
},
"May 01 2016":{
"widgetA":178,
"widgetB":10,
"widgetC":39,
"widgetD":5,
"widgetE":44
},
"Jun 01 2016":{
"widgetA":189,
"widgetB":12,
"widgetC":38,
"widgetD":7,
"widgetE":43
},
"Jul 01 2016":{
"widgetA":201,
"widgetB":15,
"widgetC":36,
"widgetD":8,
"widgetE":42
},
"Aug 01 2016":{
"widgetA":202,
"widgetB":16,
"widgetC":35,
"widgetD":9,
"widgetE":43
},
"Sep 01 2016":{
"widgetA":180,
"widgetB":19,
"widgetC":36,
"widgetD":12,
"widgetE":42
},
"Oct 01 2016":{
"widgetA":176,
"widgetB":19,
"widgetC":37,
"widgetD":13,
"widgetE":41
},
"Nov 01 2016":{
"widgetA":166,
"widgetB":23,
"widgetC":38,
"widgetD":14,
"widgetE":40
},
"Dec 01 2016":{
"widgetA":185,
"widgetB":26,
"widgetC":38,
"widgetD":15,
"widgetE":39
}
}
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.bar {
fill: steelblue;
}
.x.axis path {
/*display: none;*/
}
</style>
<body>
<div id="widgets" class="chart">
<div class="title">
<h2>Widgets Inc. Revenue 2016</h2>
</div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/regression/1.3.0/regression.min.js" charset="utf-8"></script>
<script src="stackedbar.js"></script>
<script>
$(document).ready(
function() {
viewPortWidth = 600;
viewPortHeight = 400;
chartHeight = viewPortHeight - 50;
var parsedData = [];
var regressionData = [];
var keys;
var marginTEnter = {
top: 10,
right: 20,
bottom: 20,
left: 40
};
var color = d3.scale.ordinal()
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
d3.json("data.json", function(error, data) {
if (error) throw error;
keys = Object.keys(data);
for (var i = 0; i < keys.length; i++) {
var d = data[keys[i]];
d.date = new Date(keys[i]);
parsedData.push(d);
}
var titleMapA = {"widgetA": "Widget A",
"widgetB": "Widget B",
"widgetC": "Widget C",
"widgetD": "Widget D",
"widgetE": "Widget E"
};
renderStackedBar("#widgets", viewPortWidth, chartHeight, marginTEnter, 120, color, parsedData, keys, function(key) {
return key == "widgetA" ||
key == "widgetB" ||
key == "widgetC" ||
key == "widgetD" ||
key == "widgetE";
}, titleMapA, "vertical", "Revenue");
});
}
);
</script>
Raw
stackedbar.js
function renderStackedBar(chartDiv,
baseWidth, baseHeight, margin, adjustmentForLegend, color,
parsedData, keys, fliterCallback, legendMap, legendOrientation, scaleText) {
var width = baseWidth - margin.left - margin.right,
height = baseHeight - margin.top - margin.bottom;
var regressionData = [];
var graphWidth = width-adjustmentForLegend;
var x = d3.scale.ordinal()
.rangeRoundBands([0, graphWidth], .1);
var y = d3.scale.linear()
.rangeRound([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.tickFormat(d3.format(".2s"));
var svg = d3.select(chartDiv).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 + ")");
color.domain(d3.keys(parsedData[0]).filter(fliterCallback));
parsedData.sort(function(a, b) {
return a.date - b.date;
});
parsedData.forEach(function(d, i) {
var y0 = 0;
d.added = color.domain().map(function(name) {
return {
name: name,
y0: y0,
y1: y0 += +d[name]
};
});
d.total = d.added[d.added.length - 1].y1;
if(d.total > 0){
regressionData.push([i,d.total]);
} else {
regressionData.push([i,null]);
}
});
var x2 = d3.time.scale()
.domain([parsedData[0].date, parsedData[parsedData.length - 1].date])
.range([0, graphWidth]);
var x2Axis = d3.svg.axis()
.scale(x2)
.orient("bottom")
.tickFormat(d3.time.format('%b'));
x.domain(parsedData.map(function(d) {
return d.date;
}));
y.domain([0, d3.max(parsedData, function(d) {
return d.total;
})]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(" + (20+(x.rangeBand()/2)) + "," + height + ")")
.call(x2Axis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text(scaleText);
var definedGroup = svg.selectAll(".definedGroup")
.data(parsedData)
.enter().append("g")
.attr("class", "g")
.attr("transform", function(d) {
return "translate(" + (x2(d.date)+20) + ",0)";
});
definedGroup.selectAll("rect")
.data(function(d) {
return d.added;
})
.enter().append("rect")
.attr("width", x.rangeBand())
.attr("y", function(d) {
return y(d.y1);
})
.attr("height", function(d) {
return y(d.y0) - y(d.y1);
})
.style("fill", function(d) {
return color(d.name);
});
var legend = svg.selectAll(".legend")
.data(color.domain().slice().reverse())
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) {
var transString = "translate(";
if(legendOrientation == "horizontal"){
transString += "" + (i * 120 - width + adjustmentForLegend) + "," + (margin.top * -1 / 2 - 10);
} else if(typeof legendOrientation === "undefined" || legendOrientation == "vertical"){
transString += "0," + (i * 20);
} else {
throw "Legend orientation must either be left undefined or one of the following values: horizontal, vertical";
}
transString += ")";
return transString;
});
legend.append("rect")
.attr("x", width - 12)
.attr("width", 18)
.attr("height", 18)
.style("fill", color);
legend.append("text")
.attr("x", width - 18)
.attr("y", 9)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(function(d) {
return legendMap[d];
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment