D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
chule
Full window
Github gist
Text on horizontal bar chart - d3
<!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="https://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>
Modified
http://d3js.org/d3.v3.min.js
to a secure url
https://d3js.org/d3.v3.min.js