It’s composed of 3 components: the input text box, the stats, and the histogram.
Below is the Main component, which contains the input box (and its initial value), handles when the user adds/updates text, and parses the text into numbers (which get passed to the Stats and Histogram components).
The Stats component is very simple. It takes in the parsed numbers from the input box, uses the Simple Statistics library to compute some descriptive stats (mean, median, etc.), and renders them as stat cards in a grid layout.
And finally, we have the Histogram component. Here’s where I mix in some D3.js. Both React and D3 are opinionated about how things should be rendered and updated. For this, I’m deferring most of that logic to D3 and hooking into React’s lifecycle methods of componentDidMount and componentDidUpdate to trigger when D3 should create the visualization and update it as the input data changes.
And that’s it. Here’s the demo of everything together. And here’s the repo with the components and example page. I used Webpack to package up the JS into one bundle for the example page. Webpack is awesome BTW, but I’ll save that for another post :) Until then, I can’t wait to learn and dig in more with React!