D3 Examples - Auto Updating Bar Graph

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.7.1/d3-tip.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>
​
<body>
  <script>
    (function updateGraph() {
    d3.select("body").select(".d3-tip").remove();
    d3.select("body").select("svg").remove();
​
    var svg = d3.select("body")
            .append("svg")
            .attr("width", 1000)
            .attr("height", 700),
        margin = {top: (parseInt(svg.attr("width"), 10)/35), right: (parseInt(svg.attr("width"), 12)/20), bottom: (parseInt(svg.attr("width"), 10)/5), left: (parseInt(svg.attr("width"), 10)/20)},
        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().range([height, 0]);
    var color = d3.scaleOrdinal().range(["#a0ff03", "#e90b3a"]);
​
    //  Tool Tip
    var tip = d3.tip()
      .attr('class', 'd3-tip')
      .offset([-10, 0])
      .html(function(d) {
        return d.key.charAt(0).toUpperCase() + d.key.slice(1) + " : " + d.value;
    });
    svg.call(tip);
​
    d3.transition().duration(1750).each(updateBars('smaller_data.json'));
​
    function updateBars(path) {
​
      d3.json(path, function (error, data) {
              if (error) throw error;
              var xAxixOptions = d3.keys(data[0]).filter(function(key) { return key !== "name"; });
​
              x0.domain(data.map(function(d) { return d.name; }));
              x1.domain(xAxixOptions).rangeRound([0, x0.bandwidth()]);
              y.domain([0, d3.max(data, function(d) { return d3.max(xAxixOptions, function(option) { return d[option]; }); })]).nice();
​
              var group = g.selectAll("g").data(data, function(d){return d;});
​
​
              var rect = group
                .enter().append("g")
                  .attr("transform", function(d) { return "translate(" + x0(d.name) + ",0)"; })
                .merge(group)
                .selectAll("rect")
                .data(function(d) { return xAxixOptions.map(function(key) { return {key: key, value: d[key]}; }); });
​
                rect.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 color(d.key);})
                .merge(rect)
                  .on('mouseover', tip.show)
                  .on('mouseout', tip.hide);
​
              rect.exit().remove();
​
              g.append("g")
                .attr("class", "x axis")
                .attr("transform", "translate(0," + height + ")")
                .call(d3.axisBottom(x0))
                .selectAll("text")
                  .style("text-anchor", "end")
                  .attr("dx", "-.8em")
                  .attr("dy", ".15em")
                  .attr("transform", "rotate(-65)");
​
              g.append("g")
                .attr("class", "y axis")
                .call(d3.axisLeft(y).ticks(null, "s"))
              .append("text")
                .attr("x", 2)
                .attr("y", 0)
                .attr("dy", ".21em")
                .attr("fill", "#000000")
                .attr("font-weight", "bold")
                .attr("text-anchor", "start")
                .text("Attempt Result");
​
              var legend = g.append("g")
                .attr("font-family", "sans-serif")
                .attr("font-size", 12)
                .attr("text-anchor", "end")
                .selectAll("g")
                .data(xAxixOptions.slice().reverse())
                .enter().append("g")
                .attr("transform", function(d, i) { return "translate(60," + i * 20 + ")"; });
​
              legend.append("rect")
                .merge(legend)
                .attr("x", width - 19)
                .attr("width", 19)
                .attr("height", 19)
                .attr("fill", color);
​
              legend.append("text")
                .merge(legend)
                .attr("x", width - 24)
                .attr("y", 9.5)
                .attr("dy", "0.32em")
                .text(function(d) { return d.charAt(0).toUpperCase() + d.substr(1); });
        
                group.exit().remove();
        
                var temp = 1;
                setTimeout(function(temp){
              if(temp % 2 === 0){
                console.log("here in smaller json");
                updateBars('smaller_data.json');
              }else{
                console.log("Here in bigger json");
                updateBars('data.json');
              }
            }, 2000);
                temp++;
          });
      }
    
})();
​
  </script>
</body>
​
    