A Pen by Evaristo

undefined

based on http://nicolashery.com/integrating-d3js-visualizations-in-a-react-app/

Thumbnail
This awesome code was written by ecccs, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright ecccs ©

Technologies

  • HTML
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Evaristo</title>
  
  
  
  
  
</head>

<body>

  
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/ecccs/a-pen-by-evaristo-XdmWgR */
//recommendations
//(1) "One Source Of Truth"
//(2) "Stateless All The Things"
//(3) "Don't Make Too Many Assumptions"
//also (from book)
//(1) think ALL what you can in advance
//(2) top-down better than bottom up to build the hierarchy
//(3) single user interface === single component
//(4) several components within a higher node in the hierarchy

///////////////////////////////////////

//d3Chart function/component
//must be stateless

var d3Chart = {};

d3Chart.create = function (el, props, state) {
  var svg = d3.select(el).append('svg').attr('class', 'd3').attr('width', props.width).attr('height', props.height);

  svg.append('g').attr('class', 'd3-points');

  this.update(el, state);
};

d3Chart.update = function (el, state) {
  // Re-compute the scales, and render the data points
  var scales = this._scales(el, state.domain);
  this._drawPoints(el, scales, state.data);
};

d3Chart.destroy = function (el) {
  // Any clean-up would go here
  // in this example there is nothing to do
};

//points functionality
d3Chart._drawPoints = function (el, scales, data) {
  var g = d3.select(el).selectAll('.d3-points');

  var point = g.selectAll('.d3-point').data(data, function (d) {
    return d.id;
  });

  // ENTER
  point.enter().append('circle').attr('class', 'd3-point');

  // ENTER & UPDATE
  point.attr('cx', function (d) {
    return scales.x(d.x);
  }).attr('cy', function (d) {
    return scales.y(d.y);
  }).attr('r', function (d) {
    return scales.z(d.z);
  });

  // EXIT
  point.exit().remove();
};

//Chart.js
//Notice how we hook into React's lifecycle methods componentDidMount, componentDidUpdate, componentWillUnmount, which fit well with our D3 chart's create, update, destroy functions.

var Chart = React.createClass({
  displayName: 'Chart',

  propTypes: {
    data: React.PropTypes.array,
    domain: React.PropTypes.object
  },

  componentDidMount: function componentDidMount() {
    var el = this.getDOMNode();
    d3Chart.create(el, {
      width: '100%',
      height: '300px'
    }, this.getChartState());
  },

  componentDidUpdate: function componentDidUpdate() {
    var el = this.getDOMNode();
    d3Chart.update(el, this.getChartState());
  },

  getChartState: function getChartState() {
    return {
      data: this.props.data,
      domain: this.props.domain
    };
  },

  componentWillUnmount: function componentWillUnmount() {
    var el = this.getDOMNode();
    d3Chart.destroy(el);
  },

  render: function render() {
    return React.createElement('div', { className: 'Chart' });
  }
});

//App
var sampleData = [{ id: '5fbmzmtc', x: 7, y: 41, z: 6 }, { id: 's4f8phwm', x: 11, y: 45, z: 9 }];

var App = React.createClass({
  displayName: 'App',

  getInitialState: function getInitialState() {
    return {
      data: sampleData,
      domain: { x: [0, 30], y: [0, 100] }
    };
  },

  render: function render() {
    return React.createElement(
      'div',
      { className: 'App' },
      React.createElement(Chart, {
        data: this.state.data,
        domain: this.state.domain })
    );
  }
});

React.renderComponent(App(), document.body);

Comments