Stacked chart with data array in d3 js

Question

I have try to customize my existing code of Stacked Bar graph with the help of this link https://bl.ocks.org/mbostock/1134768.

I have done this graph with the help of given link but i have some confusion about the data points on y axis as shown below in picture

Here is my full code of Stacked bar Graph

var data = [
    {month: 'Jan',total:100 ,A: 35, B: 5, C: 10},
    {month: 'Feb',total:200 ,A: 30, B: 10, C: 20},
    {month: 'Mar',total:300 ,A: 0, B: 10, C: 20}
];

var xData = ["A", "B", "C"];

var margin = {top: 20, right: 50, bottom: 30, left: 50},
        width = 400 - margin.left - margin.right,
        height = 300 - margin.top - margin.bottom;

var x = d3.scale.ordinal()
        .rangeRoundBands([0, width], .35);

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

var color = d3.scale.category20();

var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom");

var yAxis = d3.svg.axis()
        .scale(y)
      .orient("left");

var svg = d3.select("#chart").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

data.forEach(function(d) {
      xData.forEach(function(c) {
        d[c] = +d[c];}); })

var dataIntermediate = xData.map(function (c) {
    return data.map(function (d) {
        return {x: d.month, y: d[c]};});});

var dataStackLayout = d3.layout.stack()(dataIntermediate);

x.domain(dataStackLayout[0].map(function (d) {
    return d.x; }));

y.domain([0,d3.max(dataStackLayout[dataStackLayout.length - 1],
            function (d) { return d.y0 + d.y;}) ]).nice();

var layer = svg.selectAll(".stack")
        .data(dataStackLayout)
        .enter().append("g")
        .attr("class", "stack")
        .style("fill", function (d, i) {
            console.info(i, color(i));
            return color(i);});

layer.selectAll("rect")
        .data(function (d) {
            return d;})
        .enter().append("rect")
        .attr("x", function (d) {
            console.info("dx", d.x,x(d.x), x.rangeBand());
            return x(d.x);})
        .attr("y", function (d) {
            return y(d.y + d.y0);})
        .attr("height", function (d) {               
            return y(d.y0) - y(d.y + d.y0); })
        .attr("width", x.rangeBand() -1);

svg.append("g")
        .attr("class", "axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);  

  svg.append("g")
      .attr("class", "axis axis--y")
      .call(yAxis)
       .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end");

As i have taken help from the given url, i have change my code which take array data as input instead of CSV file. But i think my data points(label) on y axis is not according to given data(key:total).

Any help should be appreciated.

What is you are actually trying to achieve ? Your questions is a bit unclear. Can please explain more ? — Omar Bahir
– Omar Bahir, Commented Nov 14, 2017 at 7:02

kunal · Accepted Answer · 2017-11-15 10:47:05Z

Here is solution about my confusion on how can i show the total count on y axis because in my array data there is key 'total' which is total count of all states such as 'A','B' & 'C' shown in array data

    var data = [
    {month: "4/1854",total:"100" ,A: "45", B:"45", C:"10"},
    {month: "5/1854",total:"200" ,A:"80", B:"70", C:"50"},
    {month: "6/1854",total:"300" ,A:"0", B:"100", C:"200"}
];

So as there is a total key in array data and i have to show as label on y axis.Here is my full code

 var data = [
    {month: "4/1854",total:"100" ,A: "45", B:"45", C:"10"},
    {month: "5/1854",total:"200" ,A:"80", B:"70", C:"50"},
    {month: "6/1854",total:"300" ,A:"0", B:"100", C:"200"}
];

var xData = ["A", "B", "C"];

  var parseDate = d3.time.format("%m/%Y").parse;

var margin = {top: 20, right: 50, bottom: 30, left: 50},
        width = 500 - margin.left - margin.right,
        height = 350 - margin.top - margin.bottom;

var x = d3.scale.ordinal()
        .rangeRoundBands([0, width], .35);

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

var color = d3.scale.category20();
//console.info(color(0));

var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom")
        .tickFormat(d3.time.format("%b"));

var yAxis = d3.svg.axis()
        .scale(y)
      .orient("left");

var svg = d3.select("#pie").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

data.forEach(function(d) {
      d.month = parseDate(d.month);
      xData.forEach(function(c) {
        d[c] = +d[c];
      });

    })

var dataIntermediate = xData.map(function (c) {
    return data.map(function (d) {
        return {x: d.month, y: d[c]};
    });
});

var dataStackLayout = d3.layout.stack()(dataIntermediate);

x.domain(dataStackLayout[0].map(function (d) {
    return d.x;
}));

y.domain([0,
   d3.max(data, function(d) { return d.total; })
    ])
  .nice();

var layer = svg.selectAll(".stack")
        .data(dataStackLayout)
        .enter().append("g")
        .attr("class", "stack")
        .style("fill", function (d, i) {
            console.info(i, color(i));
            return color(i);
        });

layer.selectAll("rect")
        .data(function (d) {
            return d;
        })
        .enter().append("rect")
        .attr("x", function (d) {
            console.info("dx", d.x,x(d.x), x.rangeBand());
            return x(d.x);
        })
        .attr("y", function (d) {
            return y(d.y + d.y0);
        })
        .attr("height", function (d) {
            // console.info(d.y0, d.y, y(d.y0), y(d.y))
            return y(d.y0) - y(d.y + d.y0);
        })
        .attr("width", x.rangeBand() -1);


svg.append("g")
        .attr("class", "axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);

  svg.append("g")
      .attr("class", "axis axis--y")
      .call(yAxis)
       .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end");
}

Omar Bahir · Accepted Answer · 2017-11-14 07:05:02Z

0

In case you are trying to add a new dataset with key "total", try to add key "total" in your xData array like following and it should be Visible on chart.

var xData = ["total", "A", "B", "C"];

answered Nov 14, 2017 at 7:05

Omar Bahir

1,2775 gold badges21 silver badges50 bronze badges

4 Comments

kunal Over a year ago

as i have mention in my question that i have done my graph by using this link link , so they have also access the key 'total' without mentioning in 'xData=[]'

Omar Bahir Over a year ago

No they don't, I believe they are only showing wounds, disease and other.

kunal Over a year ago

then what they are trying to do with key:'total' ?

Omar Bahir Over a year ago

they just added it to the data set so that if anyone want to see the total number then he can get it from the data. they are not showing it on bars chart.

Collectives™ on Stack Overflow

Stacked chart with data array in d3 js

2 Answers 2

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related