Babel ES6 Example

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
  
  <script src='https://cdnjs.cloudflare.com/ajax/libs/faker/3.1.0/faker.min.js'></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width:100%; height: 100% }
  </style>
</head>

<body>
  <script type='text/babel'>
    const MAX_NODES = 100;

const color = d3.scale.category20c();

// Feel free to change or delete any of the code you see!
    var svg = d3.select("body").append("svg")
    var data = generateFakeData(30);
    svg.selectAll('circle')
    .data(data)
    .enter().append("circle")
      .attr('cx', d => d.x)
      .attr('cy', d => d.y)
      .attr('r', 5)
      .style({ fill: "#a72d1a"})

console.log(data);
  </script>
</body>

Updated missing url https://cdnjs.cloudflare.com/ajax/libs/Faker/3.1.0/faker.min.js to https://cdnjs.cloudflare.com/ajax/libs/faker/3.1.0/faker.min.js

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js

https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.min.js

https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.min.js

https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js

https://cdnjs.cloudflare.com/ajax/libs/Faker/3.1.0/faker.min.js