react-d3.js Treemap

react-d3.js Treemap example

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://fb.me/react-with-addons-15.0.1.js"></script>
<script src="https://fb.me/react-dom-15.0.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.js"></script>
<script src="https://npmcdn.com/[email protected]/build/public/js/react-d3.js"></script>
<body>
<script src="https://reactjs.org/js/jsfiddle-integration-babel.js"/>
<div id="container">
  <!-- This element's contents will be replaced with your component. -->
</div>
</body>

JavaScript 1.7

var Treemap = rd3.Treemap
// 2014 Most Populous Countries
// http://www.prb.org/pdf14/2014-world-population-data-sheet_eng.pdf
var treemapData = [{label: 'China', value: 1364}, {label: 'India', value: 1296}, {label: 'United States', value: 318}, {label: 'Indonesia', value: 251}, {label: 'Brazil', value: 203}];

var Chart = React.createClass({
  render: function() {
    return  (
    	<Treemap
        width={450}
        height={250}
        title="Treemap"
        data={treemapData}
        textColor="#484848"
        fontColor="12px"
        hoverAnimation={false}
      />
  )}
});

ReactDOM.render(
  <Chart />,
  document.getElementById('container')
);