Old school D3 from simpler times

All examples By author By category About

razvantomegea

Full window Github gist

Gauss distribution scattering

Built with blockbuilder.org

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/filesaver.js/1.3.3/filesaver.min.js"></script>
 
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    
    .box { 
      border: 1px solid black;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>

<body>
  <button id="btnAdd">Add circle</button>
  <script src="graph.js"></script>
  <script src="algorithm.js"></script>
  <script>
    // Call render function from graph.js
    renderCircles();
    
    // Generate algorithm and plot circle on button click
    d3.select('#btnAdd').on('click', generateCoords);
    
    // Generate algorithm and plot circles at each 500ms
    let timer = d3.timer(() => {
      generateCoords();
      circleNr--;
      if (circleNr === 0) {
        console.log('Done!');
        let blob = new Blob(
          [JSON.stringify(resCoords, null, 4)],
          {type: "text/plain;charset=utf-8"}
        );
    		saveAs(blob, "results.txt");
        timer.stop();
      }
    }, 500);
    
    
  </script>
</body>

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/filesaver.js/1.3.3/filesaver.min.js"></script>
 
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    
    .box { 
      border: 1px solid black;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
​
<body>
  <button id="btnAdd">Add circle</button>
  <script src="graph.js"></script>
  <script src="algorithm.js"></script>
  <script>
    // Call render function from graph.js
    renderCircles();
    
    // Generate algorithm and plot circle on button click
    d3.select('#btnAdd').on('click', generateCoords);
    
    // Generate algorithm and plot circles at each 500ms
    let timer = d3.timer(() => {
      generateCoords();
      circleNr--;
      if (circleNr === 0) {
        console.log('Done!');
        let blob = new Blob(
          [JSON.stringify(resCoords, null, 4)],
          {type: "text/plain;charset=utf-8"}
        );
            saveAs(blob, "results.txt");
        timer.stop();
      }
    }, 500);
    
    
  </script>
</body>
​
    

Updated missing url https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js to https://cdnjs.cloudflare.com/ajax/libs/filesaver.js/1.3.3/filesaver.min.js

https://d3js.org/d3.v4.min.js

https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js