Bar Chart

Frequency of reddit post domains for one page of reddit.com/r/all

<!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)

https://d3js.org/d3.v4.min.js