React Base Fiddle (JSX)
Starting point for creating JSFiddles with React. This uses React with Addons.
HTML
<script src="http://fb.me/JSXTransformer-0.12.1.js"></script>
<script src="http://fb.me/react-with-addons-0.12.1.js"></script>
<script src="http://facebook.github.io/react/js/jsfiddle-integration.js"></script>
<script src="https://cdn.rawgit.com/esbullington/react-d3/fff663d549c9492ecf7da3a4108718b04630432a/dist/public/js/react-d3.min.js"></script>
<script src="https://rawgithub.com/react-d3/react-d3-basic/master/react-d3-basic.min.js"></script>
JavaScript 1.7
console.log(ReactD3Basic);
var LineChart = ReactD3Basic;
debugger;
var lineData = [{x:0,age:20, weight:40},{x:1,age:30, weight:50},{x:2,age:40, weight:70}];
var chartSeries = [
{
field: 'age',
name: 'age',
color: '#ff7f0e',
style: {
"stroke-width": 2,
"stroke-opacity": .2,
"fill-opacity": .2
}
},{
field: 'weight',
name: 'weight',
color: '#553311',
style: {
"stroke-width": 2,
"stroke-opacity": .2,
"fill-opacity": .2
}
}
];
var x = function(d) {
return d.x;
}
var Hello = React.createClass({
render: function() {
return <LineChart x={x} chartSeries={chartSeries} data={ lineData } width={ 500 } height = { 300 } />;
}
});
React.render(<Hello name="World" />, document.body);