<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
This Pen doesn't use any external CSS resources.