Stacked Horizontal Bar
CSS
.axis {
font-size: 15px;
}
#h {
}
.text {
fill: white;
}
JavaScript
// Based on: http://jsfiddle.net/7sxmH/
var margin = {
top: 12,
left: 15,
right: 90, // test with different values
bottom: 14
};
var w = 1000 - margin.left - margin.right;
var h = 300 - margin.top - margin.bottom;
var dataset = [
[{
skill: "Windows",
x: 0,
y: 3,
level: "Begin"
}],
[{
skill: "Windows",
x: 0,
y: 4,
level: "Intermed"
}],
[{
skill: "Windows",
x: 0,
y: 1 ,
level: "Adv"
}],
// For a second row in the chart : Linux skills
[{
skill: "Linux",
x: 0,
y: 2 ,
level: "Begin"
}],
[{
skill: "Linux",
x: 0,
y: 5,
level: "Intermed"
}],
[{
skill: "Linux",
x: 0,
y: 1 ,
level: "Adv"
}]
];
//var stack = d3.layout.stack();
var stack = d3.layout.stack()
.offset("zero")
.values(function (d) {
return d.values;
})
.x(function (d) {
return d[0].x;
})
.y(function (d) {
return d[0].y;
});
var nest = d3.nest()
.key(function (d) {
return d[0].level;
});
var yScale = d3.scale.ordinal()
.rangeRoundBands([0, 60], 1, 0);
// Define the scale for the y (ordinal) domain
yScale.domain(dataset.map(function (d) {
return d[0].skill;
}));
//Data
dataset = stack(nest.entries(dataset));
//Set up scales
var xScale = d3.scale.linear()
.domain([0, d3.max(dataset, function (d) {
return d3.max(d.values, function (d) {
return d.y0 + d.y;
});
})])
.range([0, h]);
var color = d3.scale.ordinal()
.range(["#1459D9", "#148DD9", "#87ceeb", "#443266", "#8C489F", "#C3C3E5"]);
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w + margin.left + margin.right)
.attr("height", h + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// Add a group for each row of data
var groups = svg.selectAll("g")
...