Old school D3 from simpler times

All examples By author By category About

molecule

Full window Github gist

Simple Voronoi

forked from KingOfCramers's block: Simple Voronoi

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset = "UTF-8">
    <title>D3 Practice</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.12.0/d3.min.js"></script>
   
    </head>
<body>
     
    <script type="text/javascript">
        var width = 960;
        var height = 500;
        
        var vertices = d3.range(100).map(function(d){ return [Math.random()*width,Math.random()*height];})       
        var voronoi = d3.voronoi().size([width,height]);
        
        // Add SVG and the GROUP elements.
        
        var mySvg = d3.select("body").append("svg")
            .attr("width", "100%").attr("height", "100%");

var polygons = mySvg.append("g").attr("class","polygons")
            .selectAll("path")
            .data(voronoi.polygons(vertices))
            .enter().append("path")
        		.attr('d', (d, i) => p[i] ? "M" + (p[i]).map(d => d.map(x)).join("L") + "Z" : null)
            //.attr("d",function(d){return "M"+d.join("L")+"Z"; console.log(d);})
        		.attr('stroke-width', 0.3)
            .attr('fill', d => d3.rgb(Math.random() * 256, 
                                      Math.random()* 256, 
                                      Math.random() * 256))
            .attr('stroke', d => d3.rgb(Math.random() * 256, 
                                      Math.random()* 256, 
                                      Math.random() * 256))
            .attr('opacity', d => 0.5 + 0.5 * d[3]);; 
        
        var fuel = mySvg.append("g")
            .attr("class","fuel")
            .selectAll("circle") //appending circles to the group
                .data(vertices).enter().append("circle")
                    .attr("cx",function(d){return d[0];}) // this code looks through the array (of arrays) fed into the data method (vertices), which is an array of 
                    .attr("cy",function(d){return d[1];})
                    .attr("r","3");
    </script>
</body>
</html>

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