chart.jsx

class Chart extends React.Component {
    static propTypes = {
        width: React.PropTypes.number,
        height: React.PropTypes.number,
        data: React.PropTypes.shape({
            x: React.PropTypes.number.isRequired,
            y: React.PropTypes.number.isRequired
        }).isRequired
    };

    static defaultProps = {
        width: 400,
        height: 200
    };

    static childContextTypes = {
        xScale: React.PropTypes.func,
        yScale: React.PropTypes.func
    };

    getChildContext() {
        return {
            xScale: this.getXScale(),
            yScale: this.getYScale()
        }
    }
    
    getXScale() {
        return d3.scale.linear()
                 .domain(d3.extent(this.props.data, d => d.x))
                 .range([0, this.props.width])
        ;
    }
    
    getYScale() {
        return d3.scale.linear()
                 .domain(d3.extent(this.props.data, d => d.y))
                 .range([this.props.height, 0])
        ;
    }
    
    render() {
        return (
            <svg style={{ width: this.props.width, height: this.props.height }}>
                <Line data={this.props.data} color="cornflowerblue" width="3" />
            </svg>
        );
    }
}