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>
<script src="https://rawgit.com/FormidableLabs/radium/54af2e49d458c1c2dbfe00b3b9a56ec1d472d701/dist/radium.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="mount-point"> </div>
  
  
</body>
</html> 
 
var Node = React.createClass({
  getInitialState: function () {
      
    return {}
  },
  render: function () {
        foo = this.props.name
    return (
        <g transform={"translate(" + this.props.y + "," + this.props.x + ")"}>
            <circle r={this.props.hasChildren ? 3 : 1} />
        <text 
            dx={this.props.hasChildren ? -8 : 8}
            dy={3}
            style={{"fontFamily": "Helvetica", "fontSize": "10px"}}
            textAnchor={this.props.hasChildren ? "end" : "start"}> 
            {this.props.name}
        </text>
        </g>
    )
  }
});
var Link = React.createClass({
  getInitialState: function () {
    return {}
  },
  render: function () {
    var diagonal = d3.svg.diagonal().projection(function (d) { return [d.y, d.x]; });
    return (
      <path d={diagonal(this.props.datum)} style={{ "fill": "none", "stroke": "darkgrey", "strokeWidth": ".4px"}}></path>
    );
  }
})
var Tree = React.createClass({ 
    mixins: [Radium.StyleResolverMixin, Radium.BrowserStateMixin],
    getInitialState: function() {
      
      var svgWidth = 2000;
            var svgHeight = 3000; 
            var d3Tree = d3.layout.tree().size([svgHeight, svgWidth - 300]);
            var nodes = d3Tree.nodes(this.props.flare);
            var links = d3Tree.links(nodes);
      
      return {
        svgWidth: svgWidth,
        svgHeight: svgHeight,
        nodes: nodes, 
        links: links
      }
    },
    drawLinks: function () {
      var links = this.state.links.map(function (link, index) {
              console.log(link)
        return (<Link datum={link} key={index} />)
      })
      return (<g> 
        {links}
      </g>)
    },
    drawNodes: function () {
      var nodes = this.state.nodes.map(function (node, index) {
        return (<Node 
            key={index}
                    k={index}
            hasChildren={node.children ? true : false}
            name={node.name}
          x={node.x}
            y={node.y}/>
        ) })
      return nodes;
    },
    render: function() {
        return (
          <div>
            <div style={{"marginLeft": "20px", "fontFamily": "Helvetica"}}>
              <h1> Dendogram </h1>
              
            </div>
            <svg 
              style={{"border": "2px solid black", "margin": "20px"}}
              width={this.state.svgWidth}
              height={this.state.svgHeight}>
                            <g transform={"translate(100,0)"}>
            {this.drawNodes()}
            {this.drawLinks()}
                        </g>
            </svg>
          </div>
        )
    }
});
d3.json("https://gist.githubusercontent.com/mbostock/1093025/raw/a05a94858375bd0ae023f6950a2b13fac5127637/flare.json", function(error, flare) {
    React.render(<Tree flare={flare}/>, document.getElementById("mount-point"));   
});
Output

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

Dismiss x