Gmousse/reactd3_refact.html

## reactd3_refact.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React + D3!</title>

    <!-- React -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react.min.js" type="text/javascript" ></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react-dom.min.js" type="text/javascript" ></script>
    <script src="http://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>

    <!-- D3 -->
    <script src="http://d3js.org/d3.v4.min.js"></script>

    <style>

      /* Make the chart container fill the page using CSS. */
      #chart {
        position: fixed;
        left: 0px;
        right: 0px;
        top: 0px;
        bottom: 0px;
      }
    </style>

  </head>
  <body>
    <div id="chart"></div>
    <script type="text/babel">

        var Lines = function(props) {
            return (
                <g>
                    {
                        props.data.map(function(lineData, index) {
                            return <line key={index} x1={lineData.x1} x2={lineData.x2} y1={lineData.y1} y2={lineData.y2} style={{
                                strokeWidth: 50,
                                strokeOpacity: 0.4,
                                stroke: "black"
                            }}/>
                        })
                    }
                </g>
            )
        }

        Lines.propTypes = {
            data: React.PropTypes.arrayOf(React.PropTypes.object)
        }

        Lines.defaultProps = {
            data: []
        }

        var Circles = React.createClass({

            componentDidMount: function() {
                this._translateWithAnimation();
            },

            componentDidUpdate: function() {
                this._translateWithAnimation();
            },

            _translateWithAnimation(newData) {
                d3.select(ReactDOM.findDOMNode(this.refs.container)).selectAll('circle').data(this.props.data)
                    .transition()
                    .duration(800)
                    .attr("cx", function(d) {
                        return d.x;
                    })
                    .attr("cy", function(d) {
                        return d.y;
                    });
            },

            render: function() {
                return (
                    <g ref="container">
                        {
                            this.props.data.map(function(circleData, index) {
                                return <circle key={index} r={50}/>
                            })
                        }
                    </g>
                )
            }
        })

        Circles.propTypes = {
            data: React.PropTypes.arrayOf(React.PropTypes.object),
        }

        Circles.defaultProps = {
            data: [],
        }

        var MyD3Vis = React.createClass({

            _computeDataLines: function() {
                var {width, height} = this.props;
                return [
                    {
                        x1: 0,
                        y1: 0,
                        x2: width,
                        y2: height
                    }, {
                        x1: 0,
                        y1: height,
                        x2: width,
                        y2: 0
                    }
                ];
            },

            render: function() {
                return (
                    <div>
                        <svg width={this.props.width} height={this.props.height}>
                            <Lines data={this._computeDataLines()}/>
                            <Circles data={this.props.data}/>
                        </svg>
                    </div>
                );
            }
        });

        MyD3Vis.propTypes = {
            data: React.PropTypes.arrayOf(React.PropTypes.object),
            width: React.PropTypes.number,
            height: React.PropTypes.number
        }

        MyD3Vis.defaultProps = {
            data: [],
            width: 600,
            height: 800
        }

        var width = 200,
            height = 200,
            data = [
                {
                    x: 50,
                    y: 50
                }, {
                    x: 100,
                    y: 100
                }
            ],
            show = true;

        function render() {

            var chartDiv = document.getElementById("chart");

            width = chartDiv.clientWidth;
            height = chartDiv.clientHeight;

            if (show) {
                ReactDOM.render(
                    <MyD3Vis width={width} height={height} data={data} />, chartDiv);
            } else {
                ReactDOM.render(
                    <h1>Press any key to show graphic.</h1>, chartDiv);
            }
        }

        render();

        setInterval(function() {
            data[0].x = Math.round(Date.now() / 50 % width);
            data[0].y = Math.round(Date.now() / 10 % height);
            data[1].x = Math.round(Date.now() / 60 % width);
            data[1].y = Math.round(Date.now() / 70 % height);
            render();
        }, 1000);

        window.addEventListener("resize", render);

        window.addEventListener("keyup", function() {
            show = !show;
            render();
        });

    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8" />
	<title>Hello React + D3!</title>

	<!-- React -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react.min.js" type="text/javascript" ></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.0/react-dom.min.js" type="text/javascript" ></script>
	<script src="http://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>

	<!-- D3 -->
	<script src="http://d3js.org/d3.v4.min.js"></script>

	<style>

	/* Make the chart container fill the page using CSS. */
	#chart {
	position: fixed;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	}
	</style>

	</head>
	<body>
	<div id="chart"></div>
	<script type="text/babel">

	var Lines = function(props) {
	return (
	<g>
	{
	props.data.map(function(lineData, index) {
	return <line key={index} x1={lineData.x1} x2={lineData.x2} y1={lineData.y1} y2={lineData.y2} style={{
	strokeWidth: 50,
	strokeOpacity: 0.4,
	stroke: "black"
	}}/>
	})
	}
	</g>
	)
	}

	Lines.propTypes = {
	data: React.PropTypes.arrayOf(React.PropTypes.object)
	}

	Lines.defaultProps = {
	data: []
	}

	var Circles = React.createClass({

	componentDidMount: function() {
	this._translateWithAnimation();
	},

	componentDidUpdate: function() {
	this._translateWithAnimation();
	},

	_translateWithAnimation(newData) {
	d3.select(ReactDOM.findDOMNode(this.refs.container)).selectAll('circle').data(this.props.data)
	.transition()
	.duration(800)
	.attr("cx", function(d) {
	return d.x;
	})
	.attr("cy", function(d) {
	return d.y;
	});
	},

	render: function() {
	return (
	<g ref="container">
	{
	this.props.data.map(function(circleData, index) {
	return <circle key={index} r={50}/>
	})
	}
	</g>
	)
	}
	})

	Circles.propTypes = {
	data: React.PropTypes.arrayOf(React.PropTypes.object),
	}

	Circles.defaultProps = {
	data: [],
	}

	var MyD3Vis = React.createClass({

	_computeDataLines: function() {
	var {width, height} = this.props;
	return [
	{
	x1: 0,
	y1: 0,
	x2: width,
	y2: height
	}, {
	x1: 0,
	y1: height,
	x2: width,
	y2: 0
	}
	];
	},

	render: function() {
	return (
	<div>
	<svg width={this.props.width} height={this.props.height}>
	<Lines data={this._computeDataLines()}/>
	<Circles data={this.props.data}/>
	</svg>
	</div>
	);
	}
	});

	MyD3Vis.propTypes = {
	data: React.PropTypes.arrayOf(React.PropTypes.object),
	width: React.PropTypes.number,
	height: React.PropTypes.number
	}

	MyD3Vis.defaultProps = {
	data: [],
	width: 600,
	height: 800
	}

	var width = 200,
	height = 200,
	data = [
	{
	x: 50,
	y: 50
	}, {
	x: 100,
	y: 100
	}
	],
	show = true;

	function render() {

	var chartDiv = document.getElementById("chart");

	width = chartDiv.clientWidth;
	height = chartDiv.clientHeight;

	if (show) {
	ReactDOM.render(
	<MyD3Vis width={width} height={height} data={data} />, chartDiv);
	} else {
	ReactDOM.render(
	<h1>Press any key to show graphic.</h1>, chartDiv);
	}
	}

	render();

	setInterval(function() {
	data[0].x = Math.round(Date.now() / 50 % width);
	data[0].y = Math.round(Date.now() / 10 % height);
	data[1].x = Math.round(Date.now() / 60 % width);
	data[1].y = Math.round(Date.now() / 70 % height);
	render();
	}, 1000);

	window.addEventListener("resize", render);

	window.addEventListener("keyup", function() {
	show = !show;
	render();
	});

	</script>
	</body>
	</html>