CODEWITHSUNDEEP
javascriptd3.js
aishwarya srivastava
aishwarya srivastava

Reputation: 3

Filter out certain values from stacked bar chart in d3js

I have created a stacked bar chart which works fine but I wanted to filter out the bars which are of very small length so that the chart looks good. Here is my code:-

<!DOCTYPE html>
<style>

.axis .domain {

}

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





var svg = d3.select("svg"),
    margin = {top: 20, right: 20, bottom: 200, left: 60},
    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 x = d3.scaleBand()
    .rangeRound([0, 700])
    .paddingInner(0.55)
    .align(0.5);

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

var z = d3.scaleOrdinal()
          .range(["pink","purple"]);
    //.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

d3.csv("pivot2.csv", function(d, i, columns) {
  for (i = 1, t = 0; i < columns.length; ++i)
  t += d[columns[i]] = +d[columns[i]];

  d.total = t;

  return d;
}, function(error, data) {
  if (error) throw error;

  var keys = data.columns.slice(1);

  data.sort(function(a, b) { return b.total - a.total; });
  x.domain(data.map(function(d) { if(d.total>2000){return d.Name;} }));
  y.domain([0, d3.max(data, function(d) { return d.total; })]).nice();
  z.domain(keys);

  g.append("g")
    .selectAll("g")
    .data(d3.stack().keys(keys)(data))
    .enter().append("g")
      .attr("fill", function(d) {return z(d.key); })
    .selectAll("rect")
   .data(function(d) { return d;})
    .enter().append("rect")

      .attr("x", function(d) { return x(d.data.Name); })
      .attr("y", function(d) { return y(d[1]) ; })
     .attr("height",0)
      .transition()
      .duration(50)
       .delay(function (d, i) { return i*100; }) 
      .attr("height", function(d) { return y(d[0]) - y(d[1]); })
      .attr("width",20)
      //.attr("width", x.bandwidth())


  g.append("g")
      .attr("class", "axis")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x).ticks(1))
      .selectAll("text")    
        .style("text-anchor", "end")
        .attr("dx", "-.8em")
        .attr("dy", ".15em")
        .attr("transform", "rotate(-65)");
      //.call(d3.axisBottom(x));

  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.2)
      .attr("dy", "0.32em")
      .attr("fill", "#000")
      .attr("font-weight", "bold")
      .attr("text-anchor", "start")
      //.text("Duration");

  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",1500)
      //.attr("x", width - 20)
      .attr("width", 19)
      .attr("height",0)
      .transition()
      .duration(200)
       .delay(function (d, i) { return i*50; }) 
      .attr("height", 19)
      .attr("fill", z);

  legend.append("text")
  .attr("x",1490)
  .attr("font-size","20px")
      //.attr("x", width - 30)
      .attr("y", 9.5)
      .attr("dy", "0.32em")
      .text(function(d) { return d; });



});
svg.append("text")  
      .attr("transform",
            "translate(" + (width/2) + " ," + 
                           (height + margin.top + 200) + ")")
      .style("text-anchor", "middle")
      .style("font-size","28px")
      .style("fill","green")
      .text("Customer Name");


      svg.append("text")
      .attr("transform", "rotate(-90)")
      .attr("y",-5)
      .attr("x",-200)
      //.attr("y", 0 - margin.left)
      //.attr("x",0 - (height / 2))
      .attr("dy", "1em")
      .style("text-anchor", "middle")
      .style("fill","green")
      .style("font-size","28px")
      .text("Machine Duration By Mode"); 


</script>

As you can see I have applied an "IF" condition

data.sort(function(a, b) { return b.total - a.total; });
  x.domain(data.map(function(d) { if(d.total>2000){return d.Name;} }));
  y.domain([0, d3.max(data, function(d) { return d.total; })]).nice();
  z.domain(keys);

But the problem is that all the remaining rectangles are being appended in the bottom left corner above the "Locust Valley Central School District" as you can see in the screenshot I have provided. Please help me to remove these extra rectangles.Screenshot for extra rectangles in the stacked bar chart

Upvotes: 0

Views: 158

Answers (1)

idmitme
idmitme

Reputation: 929

Map function here:

  data.map(function(d) { if(d.total>2000){return d.Name;} })

Doesn't actually change data array, it returns a new array instead, which is used to initialize x.domain only.

Then you use unchanged data to create rectangles:

  g.append("g")
    .selectAll("g")
    .data(d3.stack().keys(keys)(data))
    .enter().append("g")
      .attr("fill", function(d) {return z(d.key); })
    .selectAll("rect")
   .data(function(d) { return d;})
    .enter().append("rect")

And it creates redundant rectangles with empty x coordinate. To fix this, you need to filter your data first: 

  data = data.filter(function(d) {
    if (d.total > 2000) {
       return true
    }
  })

And then use it to set x.domain (without any conditions here):

  x.domain(data.map(function(d) { return d.Name }))

The rest of the code remains the same.

Upvotes: 1

Related Questions