D3 Examples - christmas tree

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>
    var colors=["#ef5350","#64b5f6","#ffca28","#7e57c2"];
    var every3=0;
    
    // https://bl.ocks.org/d3noob/b024fcce8b4b9264011a1c3e7c7d70dc
// set the dimensions and margins of the diagram
var margin = {top: 40, right: 90, bottom: 50, left: 90},
    width = 660 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;
        
    var treeData = createData();
    
    var svg = d3.select("body").append("svg")
      .attr("width", width + margin.right + margin.left)
      .attr("height", height + margin.top + margin.bottom)
    .append("g")
      .attr("transform", "translate("
            + margin.left + "," + margin.top + ")");
    
  
    
    svg.append("polyline")
        .attr("points", function(){
      var w = width/2;
      return (w-20)+" "+height+" "+w+" "+" 0 "+ (w+20)+" "+height;
    }).attr("fill","brown")
    .style("stroke", "brown") ;  
    
    svg.append("polyline")
        .attr("points", function(){
      var w = width/2;
      return (w-30)+" "+(height*7/8)+" "+w+" "+" 0 "+ (w+30)+" "+(height*7/8);
    })
    .attr("fill","green")
    .style("stroke", "green") ;  
    
   var branche = svg.selectAll(".path")
        .data(treeData)
      .enter()
    .append("path")
    .attr('d', function(d){
      if(d.x<width/2)
        return "M"+width/2+ " 0 C "+((width/2)-10)+" "+d.y*3/5+","+(d.x+(width/2-d.x)*8/9)+" "+(d.y)+" "+ d.x+" "+d.y+"";
      else
        return "M"+width/2+ " 0 C "+((width/2)+10)+" "+d.y*3/5+","+(d.x+(width/2-d.x)*8/9)+" "+(d.y)+" "+ d.x+" "+d.y+"";
    })
        .attr("stroke", "green")
    .attr("stroke-width", 2)
    .attr("fill", "none");
    
      var boucleDeNoels = svg.selectAll(".nodes")
        .data(treeData)
    .enter()
    .append("circle")
    .attr("cx",function(d){
          if(d.x > width/2){
            return d.x-15-getRandomInt(15);
          }else{
            return d.x+15+getRandomInt(15);
          }
      })
    .attr("cy",function(d){return d.y-5-getRandomInt(5);})
    .attr("fill",function(){
      every3=every3+1;
      if((every3 % 3) !=1){
        return "none";
      }
      else{
        return colors[Math.floor(Math.random() * Math.floor(4))];
      }
    })
    .attr("r",5);
   
​
    
    
    function createData(){
      var root = {"x":width/2,"y":height};
      var children=[];
      for(var i=0; i<23; i++){
        for(var j=0; j< i;j++){
                  var child1 = { "x" : (width/2 +30+Math.exp((i-j-1)/4)),"y": 50+height/30*i };
        var child2 = { "x" : (width/2 -30-Math.exp((i-j-1)/4)),"y": 50+height/30*i };
        children.push(child1);
        children.push(child2);
        }
​
      }
      return children;
    }
    
    function getRandomInt(max) {
                 return Math.floor(Math.random() * Math.floor(max));
        }
​
  </script>
</body>
​
    