<commit_before>import React from 'react';
import * as d3 from "d3";
import DataCircles from './DataCircles.jsx';
import XYAxis from './XYAxis.jsx';


// const marshalProps = (props) => {
//   const scales = { xScale: xScale(props), yScale: yScale(props) };   // To Marshall Data:  To massage it into a useable form.
//   return Object.assign({}, props, scales);                           //   Origin:  Ancient Greek Data Scientist, SoSmartOcles 
// };
// ----------------------------------------------------------------------------

const Histogram = d3.histogram().domain([0,1]).thresholds(19);
  // const d3Props = marshalProps(props);
  return ( 
    <svg width={d3Props.width} height={d3Props.height}>
    </svg>
  );
}

export default Histogram;

var histGenerator = d3.histogram()
  .domain([0,1])    // Set the domain to cover the entire intervall [0;]
  .thresholds(19);  // number of thresholds; this will create 19+1 bins

const bins = histGenerator(this.props.gaussData);
console.log(bins);<commit_msg>(feat) Build out Histogram component<commit_after>import React from 'react';
import * as d3 from "d3";
import XAxis from './XAxis.jsx';
import YAxis from './YAxis.jsx';
import Bar from './Bar.jsx';

class Histogram extends React.Component {

  render() {
    let { top, right, bottom, left, gaussData, width, height, padding } = this.props;

    console.log('Im Gaussian!: ', gaussData);

    let xScale = 
      d3.scaleLinear()
        .domain([0, 100])         // d3.max(gaussData) instead of 100
        .rangeRound([0, width]);

    let histogramGenerator = (data) => 
      d3.histogram()
        .domain(xScale.domain())
        .thresholds(xScale.ticks(20))
        (data);

    let histogramData = histogramGenerator(gaussData);
    console.log('From Histogram, this is histogramData: ', histogramData);

    let yScale = 
      d3.scaleLinear()
        .domain([0, d3.max(histogramData, (d) => d.length )])
        .range([height, 0]);

    return (
      <div className="react-d3-histogram">
        <svg width={width + left + right} height={height + top + bottom}>
          <g transform={"translate(" + left + "," + top + ")"}>
            <XAxis className="axis" height={height} scale={xScale} />
            {histogramData.map((bin, index) => 
              <Bar binData={bin} 
                   xScale={xScale} 
                   yScale={yScale} 
                   height={height} 
                   key={index}
              />
            )}
          </g>
        </svg>
      </div>
    );
  }
}

Histogram.propTypes = {
  top: React.PropTypes.number,
  right: React.PropTypes.number,
  bottom: React.PropTypes.number,
  left: React.PropTypes.number,
  width: React.PropTypes.number.isRequired,
  height: React.PropTypes.number.isRequired,
  gaussData: React.PropTypes.arrayOf(React.PropTypes.number).isRequired
};

Histogram.defaultProps = {
  top: 20,
  right: 10,
  bottom: 30,
  left: 30
};

export default Histogram;
{'fraction_non_alphanumeric': 0.16801893171061527, 'fraction_numerical': 0.015889114266396213, 'mean_word_length': 2.3740022805017102, 'pattern_counts': {'":': 0, '<': 13, '<?xml version=': 0, '>': 17, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5135943', 'n_tokens_mistral': 958, 'n_tokens_neox': 900, 'n_words': 220}