Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="//fb.me/react-with-addons-0.12.2.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="mount-point"> </div>
  
<script src="https://rawgit.com/FormidableLabs/radium/54af2e49d458c1c2dbfe00b3b9a56ec1d472d701/dist/radium.js"></script>
</body>
</html> 
 
var color = d3.scale.category20c();
var Cell = React.createClass({
  getInitialState: function () {
    return {}
  },
  render: function () {
    return (
        <g transform={"translate(" + this.props.x + "," + this.props.y + ")"}>
              <rect 
                  width={this.props.dx} 
                    height={this.props.dy}
                  style={{
                      "fill": this.props.hasChildren ? color(this.props.name) : "none",
                        "stroke": "white",
                        "strokeWidth": "1.5px" 
                    }}/>
        <text 
          x={3}
                  y={12}
            style={{
                          "fontFamily": "Helvetica", 
                            "fontSize": "10px",
                            "border": "1px solid white",
                        }}
            textAnchor={this.props.hasChildren ? "end" : "start"}> 
            {this.props.name}
        </text>
        </g>
    )
  }
});
var Treemap = React.createClass({ 
    mixins: [Radium.StyleResolverMixin, Radium.BrowserStateMixin],
    getInitialState: function() {
      
      var svgWidth = 2000;
            var svgHeight = 2000; 
            var treemap = d3.layout.treemap().size([svgWidth, svgHeight]).sticky(true).value(function(d) { return d.size; });
      
      var cells = treemap.nodes(this.props.flare);
      return {
        svgWidth: svgWidth, 
        svgHeight: svgHeight, 
        cells: cells
      }
    },
    drawCells: function () {
      var cells = this.state.cells.map(function (cell, index) {
        return (<Cell 
            key={index}
            hasChildren={cell.children ? true : false}
            name={cell.name}
          x={cell.x}
            y={cell.y}
                    dx={cell.dx}
                    dy={cell.dy}/>
        ) })
      return cells;
    },
    render: function() {
        return (
          <div>
           
            <svg 
              style={{"border": "2px solid black", "margin": "20px"}}
              width={this.state.svgWidth}
              height={this.state.svgHeight}>
            {this.drawCells()}
            </svg>
          </div>
        )
    }
});
d3.json("https://gist.githubusercontent.com/mbostock/1093025/raw/a05a94858375bd0ae023f6950a2b13fac5127637/flare.json", function(error, flare) {
    React.render(<Treemap flare={flare}/>, document.getElementById("mount-point"));   
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x