D3 Examples - 20170512 Recap

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    text {font-family:Avenir-Light; color:teal};
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>
​
<body>
  <script>
​
//Set global variables
        var h=500;
    var w=400;
    var rowHeight=50;
    var gap=10;
    var colWidth=300;
    var margin={
    left:50,
    top:70
    }
    var colors=["red","orange","olive","teal","skyblue"]
//     var opacity=0.7;
    
​
//create new svg element
    var svg = d3.select("body").append("svg")
        .attr("width",w)  
        .attr("height",h)
    
        svg.append("rects")
        .attr("height",h)
        .attr("width",w)
        .attr("fill","#dcdcdc")  
    
    
//     svg.append("text")
//       .text("Edit the code below to change me!")
//       .attr("y", 50)
//       .attr("x", 10)
//       .style("font-size", 36)
//       .style("font-family", "Avenir-Light")
    
​
    
    
    
    
  </script>
</body>
​
    