D3 Examples - Bar Chart

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    .bar {
      fill: cornflowerblue;
    }
    .bar:hover {
      fill: orangered;
    }
    .tick text {
      font-size: .8rem
    }
    .x-axis .tick:nth-child(2n) text {
      transform: translate3d(0px, 18px, 0px)
    }
  </style>
</head>
​
<body>
  <script>
    var width = 960,
        height = 500,
        margin = 50;
    
    var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height)
  
    var xScale = d3.scaleBand()
        .range([0, width - margin * 2])
        .round(true);
    
    var yScale = d3.scaleLinear()
        .range([0, height - margin * 2])
    
        d3.json('data.json', function(d) {
      d = JSON.parse(JSON.stringify(d))
      data = d.data.children;
      
      var occur = getOccurences(data)
      var domains = Object.keys(occur);
      var times = [];
      for(var i = 0; i < domains.length; i++) {
        times.push(occur[domains[i]])
      }
      
      
      var barScale = d3.scaleLinear()
        .domain([d3.max(times), 0])
      .range([height - margin * 2, 0])
        
      xScale.domain(domains)
      yScale.domain([d3.max(times), 0])
      var xAxis = d3.axisBottom()
        .scale(xScale)
      
      var yAxis = d3.axisLeft()
        .scale(yScale)
      
      var g = svg.append('g')
        .attr('class', 'container')
        .style('margin', margin)
        .attr('transform', 'translate('+ margin +',' + margin + ')')
​
      
      g.append('g')
        .attr('transform', 'translate(0,' + (height - margin * 2) + ')')
            .attr('class', 'x-axis')
        .call(xAxis);
     
      g.append('g')
        .call(yAxis)
​
        
      
      var mheight = (height - margin * 2);
      g.append('g')
      .selectAll('.bar')
        .data(times)
        .enter()
        .append('rect')
        .attr('class', 'bar')
        .attr('x', function(d, i) {
            return xScale.bandwidth()  * i + (xScale.bandwidth() / 4.5)
        })
        .attr('y', function(d) {
            return mheight - barScale(d)
        })
        .attr('width', xScale.bandwidth() - 20)
        .attr('height', function(d) {
            return mheight + (barScale(d) - mheight)
        })
      
    })
    function getOccurences(arr) {
      arr = arr.reduce(function(acc, curr) {
//         acc = acc || {}
        if(!(curr.data.domain in acc)) {
          acc[curr.data.domain] = 1;
        } else {
          acc[curr.data.domain] += 1;
        }
        return acc
      }, {})
      return arr
    }
  </script>
</body>
​
    