Plot bar chart using D3 JS

Question

I am plotting a bar chart in D3.js (Version 3) . Which has two axis, one is receive_data and another one is responses . I have a JSON file where I stored the data. JSON format looks like,

[{"receive_date":"2013-11-04","responses":"2"}]

In my JSON, I have two responses values for the same date 2013-11-04 . Like,

[{"receive_date":"2013-11-04","responses":"2"},{"receive_date":"2013-11-04","responses":"8668"}

This is the JSON Source :- https://api.myjson.com/bins/gdpu7

So, when I am plotting the graph, it is not taking the sum of the values for the same receive_date instead it is showing two times. I want it to show the sum of responses . responses should be (8668+2) for the receive_date 2013-11-04

I also found it that by using reduce we can do this. I tried to use d3.json.reduce . But it is showing error d3.json.reduce is not a function.

 var margin = { top: 20, right: 30, bottom: 30, left: 40 }, width = 960 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; // scale to ordinal because x axis is not numerical var x = d3.scale.ordinal().rangeRoundBands([0, width], .1); //scale to numerical value by height var y = d3.scale.linear().range([height, 0]); var chart = d3.select("#chart") .append("svg") //append svg element inside #chart .attr("width", width + (2 * margin.left) + margin.right) //set width .attr("height", height + margin.top + margin.bottom); //set height var xAxis = d3.svg.axis() .scale(x) .orient("bottom"); //orient bottom because x-axis will appear below the bars var yAxis = d3.svg.axis() .scale(y) .orient("left"); d3.json("https://api.myjson.com/bins/gdpu7", function(error, data) { x.domain(data.map(function(d) { return d.receive_date })); y.domain([0, d3.max(data, function(d) { return d.responses })]); var bar = chart.selectAll("g") .data(data) .enter() .append("g") .attr("transform", function(d, i) { return "translate(" + x(d.receive_date) + ", 0)"; }); bar.append("rect") .attr("y", function(d) { return y(d.responses); }) .attr("x", function(d, i) { return x.rangeBand() + (margin.left / 2); }) .attr("height", function(d) { return height - y(d.responses); }) .attr("width", x.rangeBand()); //set width base on range on ordinal data bar.append("text") .attr("x", x.rangeBand() + margin.left) .attr("y", function(d) { return y(d.responses) - 10; }) .attr("dy", ".75em") .text(function(d) { return d.responses; }); chart.append("g") .attr("class", "x axis") .attr("transform", "translate(" + margin.left + "," + height + ")") .call(xAxis); chart.append("g") .attr("class", "y axis") .attr("transform", "translate(" + margin.left + ",0)") .call(yAxis) .append("text") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", ".71em") .style("text-anchor", "end") .text("responses"); }); function type(d) { d.receive_date = +d.receive_date; // coerce to number return d; } 

 #chart rect { fill: #4aaeea; } #chart text { fill: white; font: 10px sans-serif; text-anchor: end; } .axis text { font: 10px sans-serif; } .axis path, .axis line { fill: none; stroke: #fff; shape-rendering: crispEdges; } body { background: #1a1a1a; color: #eaeaea; padding: 10px; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="chart"></div> 

JSfiddle :- https://jsfiddle.net/bL9940at/

Answer 1

The relevant part:

  var array1 = data; //input
  var array2 = [];
  var last_d;
  array1.reduce(function (accumulator, currentValue, i) {
    var r = Number(currentValue.responses),
        d = currentValue.receive_date;
    if (d == last_d) r += accumulator;
    array2[i] = {
      receive_date: d,
      responses: r
    };
    last_d = d;
    return accumulator + Number(currentValue.responses);
  }, 0);
  data = array2; //output

 var margin = { top: 20, right: 30, bottom: 30, left: 40 }, width = 960 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; // scale to ordinal because x axis is not numerical var x = d3.scale.ordinal().rangeRoundBands([0, width], .1); //scale to numerical value by height var y = d3.scale.linear().range([height, 0]); var chart = d3.select("#chart") .append("svg") //append svg element inside #chart .attr("width", width + (2 * margin.left) + margin.right) //set width .attr("height", height + margin.top + margin.bottom); //set height var xAxis = d3.svg.axis() .scale(x) .orient("bottom"); //orient bottom because x-axis will appear below the bars var yAxis = d3.svg.axis() .scale(y) .orient("left"); d3.json("https://api.myjson.com/bins/gdpu7", function(error, data) { //create new arrays var array1 = data; //input var array2 = []; var last_d; array1.reduce(function (accumulator, currentValue, i) { var r = Number(currentValue.responses), d = currentValue.receive_date; if (d == last_d) r += accumulator; array2[i] = { receive_date: d, responses: r }; last_d = d; return accumulator + Number(currentValue.responses); }, 0); data = array2; //output x.domain(data.map(function(d) { return d.receive_date; })); y.domain([0, d3.max(data, function(d) { return d.responses; })*1.1]); var bar = chart.selectAll("g") .data(data) .enter() .append("g") .attr("transform", function(d, i) { return "translate(" + x(d.receive_date) + ", 0)"; }); bar.append("rect") .attr("y", function(d) { return y(d.responses); }) .attr("x", function(d, i) { return x.rangeBand() + (margin.left / 2); }) .attr("height", function(d) { return height - y(d.responses); }) .attr("width", x.rangeBand()); //set width base on range on ordinal data bar.append("text") .attr("x", x.rangeBand() + margin.left) .attr("y", function(d) { return y(d.responses) - 10; }) .attr("dy", ".75em") .text(function(d) { return d.responses; }); chart.append("g") .attr("class", "x axis") .attr("transform", "translate(" + margin.left + "," + height + ")") .call(xAxis); chart.append("g") .attr("class", "y axis") .attr("transform", "translate(" + margin.left + ",0)") .call(yAxis) .append("text") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", ".71em") .style("text-anchor", "end") .text("responses"); }); function type(d) { d.receive_date = +d.receive_date; // coerce to number return d; } 

 #chart rect { fill: #4aaeea; } #chart text { fill: white; font: 10px sans-serif; text-anchor: end; } .axis text { font: 10px sans-serif; } .axis path, .axis line { fill: none; stroke: #fff; shape-rendering: crispEdges; } body { background: #1a1a1a; color: #eaeaea; padding: 10px; } 

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script> <script src="https://code.jquery.com/jquery-git.js"></script> <div id="chart"></div> </body> </html>