<svg width="600" height="300">
</svg>

d3.tsv('https://d17r0bacc8bd7n.cloudfront.net/moviedaily.dat.txt')
  .row(row => {
    row.DAILY_PER_THEATER = Number(row.DAILY_PER_THEATER);
    return row;
})
  .get((err, data) => {
    const histogram = d3.layout.histogram()
                               .bins(10)
                               .value(d => d.DAILY_PER_THEATER),
          histogramData = histogram(data),
          width = 600,
          height = 300;
  
    const svg = d3.select('svg'),
          xScale = d3.scale.linear()
                           .range([0, width])
                           .domain([0, d3.max(histogramData, d => d.x+d.dx)]),
          yScale = d3.scale.linear()
                           .range([0, height])
                           .domain([0, d3.max(histogramData, d => d.y)]);
  
  console.log(histogramData);
  
    svg.selectAll('rect')
       .data(histogramData)
       .enter()
       .append('rect')
       .attr('width', d => xScale(d.dx)-2)
       .attr('height', d => yScale(d.y))
       .attr('x', d => xScale(d.x)+2)
       .attr('y', d => height - yScale(d.y));
});
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js