D3 Examples - limited_voronoi

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>
​
<body>
  <script>
    // Initializaing width and height of svg
    var width = 960, height = 500
    
    // setting up the svg
    var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height)
​
    var x = d3.scaleLinear()
                        .domain([0, 1])
                        .range([0, width]);
    
    var y = d3.scaleLinear()
                        .domain([0, 1])
                        .range([0, height])
    
    var n_points = 50
    
    var data = d3.range(n_points).map(function(){
      return [Math.random(), Math.random()];
    });
    
    svg.selectAll('circle')
            .data(data)
            .enter()
            .append('circle')
            .attr('r', 2)
            .attr('cx', d => x(d[0]))
            .attr('cy', d => y(d[1]));
    
    console.log(data)
;
  </script>
</body>
​
    