About this Project:

While taking statistics and discrete math in school, I was always skeptical about the homework problems frequently stating the caveat of us assuming a distribution that was approximately normal. Leaving nothing to chance, I built this cool realtime graph to show the effects of rolling 6 six-sided die and recording the sum of the rolls using the wonderfull javascript library d3.js.

d3.js

Insights:

Using the d3.js library was a great challenge and thanks to the amazing visuals of the many example projects found here at https://github.com/d3/d3/wiki/Tutorials it was super rewarding to get those first steel-blue bars to appear on the page!

One thing that took me a while to wrap my head around was the seemingly backwards nature of the d3 workflow. When using the d3 library it makes use of a powerfull selection tool, much like jquery, that can chose multiple DOM elements using specifiers like class, id, and name.

The confusing part came when it was time to add the data to the bars of my graph. Starting from just an empty <svg class="chart"></svg> the first step is to use the d3 selection tool to select the bars (which don't exist yet).