Old school D3 from simpler times

All examples By author By category About

iansinnott

Full window Github gist

Babel ES6 Example

Built with blockbuilder.org

<!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();

const generateFakeData = (
      count = faker.random.number({ min: 0, max: MAX_NODES }),
      maxX = window.innerWidth,
      maxY = window.innerHeight
    ) => {
      const result = [];
      for (let i = 0; i < count; i ++) {
        result.push({
          id: faker.random.uuid(),
          x: faker.random.number(maxX),
          y: faker.random.number(maxY),
        });
      }
      return result;
    };

// 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>

xxxxxxxxxx
 
<!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();
​
    const generateFakeData = (
      count = faker.random.number({ min: 0, max: MAX_NODES }),
      maxX = window.innerWidth,
      maxY = window.innerHeight
    ) => {
      const result = [];
      for (let i = 0; i < count; i ++) {
        result.push({
          id: faker.random.uuid(),
          x: faker.random.number(maxX),
          y: faker.random.number(maxY),
        });
      }
      return result;
    };
​
    // 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