Data, Maps, Usability, and Performance

Histogram Generator with D3

Last updated on November 11, 2013 in Development

Histogram Generator

Histograms are really powerful means of visualizing the distribution of data. I have previously created a histogram generator with jQplot, and today I wanted to do something similar with D3.js. My motivation for this came from finding D3 histogram functions and I wanted to see how they work. I also wanted to allow the user to specify the size of the graph, the data, labels for x and y axis, and the amount of bins.

The code to create the histogram is pretty straightforward. After grabbing all the inputs, I pass them to a draw function that first removes any current chart that has been created. I add a value to the biggest number in the array and use that, as well as width of the chart, to create the x axis. The d3.layout.histogram() function transforms the numbers into bins with frequency and I use that as well as the height of the chart to draw the y axis. That same function is used to draw the bins on the chart and that is all.

Check out my D3 Histogram Creator and look at the source to see how it was build.



Tags: , , ,

Facebook Twitter Hacker News Reddit More...