D3 Examples - lx meetup

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://d3js.org/d3.v5.min.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Khand|Monoton|Raleway+Dots" rel="stylesheet">
  </head>
  
  <style>
    rect{fill:  #f206d3}
  .big{fill: #d2f206}
  .small{fill: #f206d3}
  body {background-color: #000000 }
    text {
  font-size: 80px;
  font-family: 'Raleway Dots', cursive;
    font-family: 'Monoton', cursive;  
  padding: 2px;
  color: #f206d3;
  word-spacing: 40px;
  }
  </style>
  
  <body>
    <script>
      
      var svg= d3.select("body").append("svg")
           .attr("width",  1000)
           .attr("height", 1000);
​
      var rect = svg.append("rect")
           .attr("x", 80)
           .attr("y", 50)
           .attr("width", 350)
           .attr("height", 350);
      
      var circle = svg.append("circle")
             .attr("class", "big")
           .attr("cx", 250)
           .attr("cy", 280)
           .attr("r", 140);
      
     var line = svg.append("line")
            .attr("x1", 20)
            .attr("x2", 620)
            .attr("y1", 250)
            .attr("y2", 350)
            .attr("stroke", "#d2f206")
                    .attr("stroke-width", 60)
      
     var circle = svg.append("circle")
             .attr("class", "small")
           .attr("cx", 250)
           .attr("cy", 280)
           .attr("r", 30);  
     
      var text = svg.append("text")
            .attr("x", 10)
            .attr("y", 100)
                .text("Liebe ist alles")
            .attr("fill", "#d2f206")
                
       
    </script>
  </body>
</html>
​
    