Simple Graph

by sunilbg

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.3.13/d3.min.js"></script>
<h3>Simple Graph</h3>
<div id="graph-canvas"></div>

CSS

body {
  background-color: #2c3e50;
  color: white;
}

pre {
  display: none;
}

svg .foreground path {
  fill: none;
  stroke: #F15A29;
  stroke-opacity: .7;
}

.axis path,
.axis line {
  fill: none;
  stroke: white;
  shape-rendering: crispEdges;
}

.brush .extent {
  fill-opacity: .1;
  stroke: #fff;
  shape-rendering: crispEdges;
}

text {
  fill: white;
  font-family: 'Sans serif';
  font-size: 10px;
}

.link {
  stroke: white;
}

JavaScript

/**
 * Created by eamonnmaguire on 05/01/2014.
 */

var graph = (function() {

    var json = {
      "nodes": [{
        "id": 0,
        "name": "Elon Musk",
        "showLabel": true
      }, {
        "id": 1,
        "name": "Tesla",
        "showLabel": true,
        "color": "#3498db"
      }, {
        "id": 2,
        "name": "Paypal",
        "showLabel": true,
        "color": "#3498db"
      },
      {
        "id": 3,
        "name": "Solar City",
        "showLabel": true,
        "nodetype": "down",
        "color": "#3498db"
      },
      {
        "id": 4,
        "name": "Zip2",
        "showLabel": true,
        "color": "#3498db"
      },{
        "id": 5,
        "name": "OpenAI",
        "showLabel": true,
        "color": "#3498db"
      },
      {
        "id": 6,
        "name": "South Africa",
        "showLabel": true,
        "color": "#9b59b6"
      },
      {
        "id": 7,
        "name": "USA",
        "showLabel": true,
        "color": "#9b59b6"
      },
      {
        "id": 8,
        "name": "SpaceX",
        "showLabel": true,
        "color": "#3498db"
      },
      {
        "id": 9,
        "name": "Lyndon Rive",
        "showLabel": true
      },
      {
        "id": 10,
        "name": "Peter Rive",
        "showLabel": true
      },
      {
        "id": 11,
        "name": "Martin Eberhard",
        "showLabel": true
      },
      {
        "id": 12,
        "name": "Marc Tarpenning",
        "showLabel": true
      }
      ],
      
      "links": [{
        "source": 0,
        "target": 1,
        "value": 10
      },{
        "source": 0,
        "target": 2,
        "value": 15
      },
      {
        "source": 0,
        "target": 3,
        "value": 15
      },
      
      {
        "source": 0,
        "target": 4,
        "value": 15
      },
      
      {
        "source": 0,
        "target": 5,
        "value": 15
      },
       {
        "source": 0,
        "target": 8,
        "value": 15
     ...