#How to remove spaces between bar in d3.js grouped bar chart. #3826

shijocj · 2024-02-22T08:47:03Z

shijocj
Feb 22, 2024

I have following d3.js code which helps to create grouped bar chart. My data consist of different states and its population by age categories. In this data few age categories(14 to 17 Years, 18 to 24 Years, 25 to 44 Years) are missing in 'TX' and 'NY' states. So when we create grouped bar chart using this data, its creating empty space in between the bars for missing data. How can we get rid off this empty space for missing data in between the bars in d3.js.
I found a same question in github, but nobody given solution for that.

@mbostock @jasondavies @gordonwoodhull @esjewett @vogievetsky @jheer @connorgr @Fil @petulla @tmcw
@shikhaagrawal23 @gkumar100

<!DOCTYPE html>
<style>

.axis .domain {
 display: none;
}

</style>
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

var svg = d3.select("svg"),
   margin = {top: 20, right: 20, bottom: 30, left: 40},
   width = +svg.attr("width") - margin.left - margin.right,
   height = +svg.attr("height") - margin.top - margin.bottom,
   g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var x0 = d3.scaleBand()
   .rangeRound([0, width])
   .paddingInner(0.1);

var x1 = d3.scaleBand()
   .padding(0.05);

var y = d3.scaleLinear()
   .rangeRound([height, 0]);

var z = d3.scaleOrdinal()
   .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
   
   
var data = [
 {
   "State": "CA",
   "Under 5 Years": 2704659,
   "5 to 13 Years": 4499890,
   "14 to 17 Years": 2159981,
   "18 to 24 Years": 3853788,
   "25 to 44 Years": 10604510,
   "45 to 64 Years": 8819342,
   "65 Years and Over": 4114496
 },
 {
   "State": "TX",
   "Under 5 Years": 2027307,
   "5 to 13 Years": 3277946,   
   "45 to 64 Years": 5656528,
   "65 Years and Over": 2472223
 },
 {
   "State": "NY",
   "Under 5 Years": 1208495,
   "5 to 13 Years": 2141490,    
   "25 to 44 Years": 5355235,
   "45 to 64 Years": 5120254,
   "65 Years and Over": 2607672
 },
 {
   "State": "FL",
   "Under 5 Years": 1140516,
   "5 to 13 Years": 1938695,
   "14 to 17 Years": 925060,
   "18 to 24 Years": 1607297,
   "25 to 44 Years": 4782119,
   "45 to 64 Years": 4746856,
   "65 Years and Over": 3187797
 },
 {
   "State": "IL",
   "Under 5 Years": 894368,
   "5 to 13 Years": 1558919,
   "14 to 17 Years": 725973,
   "18 to 24 Years": 1311479,
   "25 to 44 Years": 3596343,
   "45 to 64 Years": 3239173,
   "65 Years and Over": 1575308
 },
 {
   "State": "PA",
   "Under 5 Years": 737462,
   "5 to 13 Years": 1345341,
   "14 to 17 Years": 679201,
   "18 to 24 Years": 1203944,
   "25 to 44 Years": 3157759,
   "45 to 64 Years": 3414001,
   "65 Years and Over": 1910571
 }
];

 var keys  = Object.keys(data[0]);
  keys = keys.slice(1);

 x0.domain(data.map(function(d) { return d.State; }));
 x1.domain(keys).rangeRound([0, x0.bandwidth()]);
 y.domain([0, d3.max(data, function(d) { return d3.max(keys, function(key) { return d[key]; }); })]).nice();

 g.append("g")
   .selectAll("g")
   .data(data)
   .enter().append("g")
     .attr("transform", function(d) { return "translate(" + x0(d.State) + ",0)"; })
   .selectAll("rect")
   .data(function(d) { return keys.map(function(key) { return {key: key, value: d[key]}; }); })
   .enter().append("rect")
     .attr("x", function(d) { return x1(d.key); })
     .attr("y", function(d) { return y(d.value); })
     .attr("width", x1.bandwidth())
     .attr("height", function(d) { return height - y(d.value); })
     .attr("fill", function(d) { return z(d.key); });

 g.append("g")
     .attr("class", "axis")
     .attr("transform", "translate(0," + height + ")")
     .call(d3.axisBottom(x0));

 g.append("g")
     .attr("class", "axis")
     .call(d3.axisLeft(y).ticks(null, "s"))
   .append("text")
     .attr("x", 2)
     .attr("y", y(y.ticks().pop()) + 0.5)
     .attr("dy", "0.32em")
     .attr("fill", "#000")
     .attr("font-weight", "bold")
     .attr("text-anchor", "start")
     .text("Population");

 var legend = g.append("g")
     .attr("font-family", "sans-serif")
     .attr("font-size", 10)
     .attr("text-anchor", "end")
   .selectAll("g")
   .data(keys.slice().reverse())
   .enter().append("g")
     .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

 legend.append("rect")
     .attr("x", width - 19)
     .attr("width", 19)
     .attr("height", 19)
     .attr("fill", z);

 legend.append("text")
     .attr("x", width - 24)
     .attr("y", 9.5)
     .attr("dy", "0.32em")
     .text(function(d) { return d; });
</script>
</html>

Fil · 2024-02-22T08:56:00Z

Fil
Feb 22, 2024
Collaborator

Please do not spam individual contributors.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

#How to remove spaces between bar in d3.js grouped bar chart. #3826

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment

{{title}}

Select a reply

#How to remove spaces between bar in d3.js grouped bar chart. #3826

shijocj Feb 22, 2024

Replies: 1 comment

Fil Feb 22, 2024 Collaborator

shijocj
Feb 22, 2024

Fil
Feb 22, 2024
Collaborator