Skip to content

Instantly share code, notes, and snippets.

@chule

chule/index.html

Last active January 1, 2016 05:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save chule/8097388 to your computer and use it in GitHub Desktop.
Save chule/8097388 to your computer and use it in GitHub Desktop.
Download ZIP
Text on horizontal bar chart - d3
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Text on horizontal bar chart - d3</title>
<style>
.shared, .bar, .label {
font-size: 8pt;
font-weight: bold;
font-family: Arial, sans-serif;
}
.malebar {
fill: steelblue;
}
#vis {
margin-left: 350px;
}
</style>
</head>
<body>
<input id="generate" value="Randomise data" type="button"></input>
<div id="vis">
</div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var data = [
{"sharedLabel": "Category 1", "barData1": 43041, "barData2": 40852},
{"sharedLabel": "Category 2", "barData1": 38867, "barData2": 36296},
{"sharedLabel": "Category 3", "barData1": 41748, "barData2": 40757},
{"sharedLabel": "Category 4", "barData1": 24831, "barData2": 23624},
{"sharedLabel": "Category 5", "barData1": 15764, "barData2": 15299},
{"sharedLabel": "Category 6", "barData1": 17006, "barData2": 16071},
{"sharedLabel": "Category 7", "barData1": 24309, "barData2": 23235},
{"sharedLabel": "Category 8", "barData1": 46756, "barData2": 46065},
{"sharedLabel": "Category 9", "barData1": 41923, "barData2": 41704},
{"sharedLabel": "Category 10", "barData1": 42565, "barData2": 42159},
{"sharedLabel": "Category 11", "barData1": 44316, "barData2": 45468},
{"sharedLabel": "Category 12", "barData1": 42975, "barData2": 44223},
{"sharedLabel": "Category 13", "barData1": 36755, "barData2": 39452},
{"sharedLabel": "Category 14", "barData1": 31578, "barData2": 34063},
{"sharedLabel": "Category 15", "barData1": 10328, "barData2": 11799},
{"sharedLabel": "Category 16", "barData1": 13917, "barData2": 14949},
{"sharedLabel": "Category 17", "barData1": 7920, "barData2": 8589},
{"sharedLabel": "Category 18", "barData1": 9003, "barData2": 10397},
{"sharedLabel": "Category 19", "barData1": 14322, "barData2": 16832},
{"sharedLabel": "Category 20", "barData1": 12369, "barData2": 15836},
{"sharedLabel": "Category 21", "barData1": 8710, "barData2": 12377},
{"sharedLabel": "Category 22", "barData1": 5853, "barData2": 12213}
];
/* edit these settings freely */
var w = 600,
h = 400,
topMargin = 15,
labelSpace = 40,
innerMargin = w/2+labelSpace,
outerMargin = 15,
gap = 2,
dataRange = d3.max(data.map(function(d) { return Math.max(d.barData1, d.barData2) }));
leftLabel = "Left label",
rightLabel = "Right label";
/* edit with care */
var chartWidth = w - innerMargin - outerMargin,
barWidth = h / data.length,
yScale = d3.scale.linear().domain([0, data.length]).range([0, h-topMargin]),
total = d3.scale.linear().domain([0, dataRange]).range([0, chartWidth - labelSpace]),
commas = d3.format(",.0f");
//console.log(data.length);
/* main panel */
var vis = d3.select("#vis").append("svg")
.attr("width", w)
.attr("height", h);
var bar = vis.selectAll("g.bar")
.data(data)
.enter().append("g")
.attr("class", "bar")
.attr("transform", function(d, i) {
return "translate(0," + (yScale(i) + topMargin) + ")";
});
bar.append("text")
.attr("class", "below")
.attr("x", 12)
.attr("dy", "1.2em")
.attr("text-anchor", "left")
.text(function(d) { return d.sharedLabel; })
.style("fill", "#000000");
bar.append("rect")
.attr("class", "malebar")
.attr("height", barWidth-gap)
.attr("x", 10);
bar.append("svg")
.attr({
height: barWidth-gap
})
.append("text")
.attr("class", "up")
.attr("x", 12)
.attr("dy", "1.2em")
.attr("text-anchor", "left")
.text(function(d) { return d.sharedLabel; })
.style("fill", "#ffffff");
d3.select("#generate").on("click", function() {
for (var i=0; i<data.length; i++) {
data[i].barData1 = Math.random() * dataRange;
data[i].barData2 = Math.random() * dataRange;
}
refresh(data);
});
refresh(data);
function refresh(data) {
var bars = d3.selectAll("g.bar")
.data(data);
bars.selectAll("rect.malebar")
.transition()
.attr("width", function(d) { return total(d.barData1); });
bars.selectAll("svg")
.attr("width", function(d) { return total(d.barData1) + 10; });
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment