D3 Examples - Table

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    text{font-family:Avenir;font-size:10px}
    rect{fill:#cdcdcd;stroke:#fff;stroke-width:0.5px}
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>
​
<body>
  <script>
​
    var w=580;
    var h=1500;
​
    var svg = d3.select("body").append("svg")
      .attr("width", w)
      .attr("height", h);
​
    var margin = {left:10,top:20}
    var rowHeight=30;
    var colPos=[15,70,190]
​
    d3.csv("streamers.csv", function(data){
      
      var rows = d3.select("svg")
        .selectAll("g")
        .data(data)
        .enter()
        .append("g")
        .attr("id",function(d){
          return d.Brand
        })
        .attr("transform",function(d,i){
       return "translate("+margin.left+","+(margin.top+(i*rowHeight))+")"   
        })
      
//row shading
 rows.append("rect")
    .attr("width",w)
    .attr("y",-(rowHeight/1.5))
    .attr("height",rowHeight)
 
 //1st column - region
 rows.append("text")
    .attr("x",colPos[0])
        .attr("y",0)
        .text(function(d){
        return d.Region;
        })
 
 //2nd column - brand
 rows.append("text")
    .attr("x",colPos[1])
        .attr("y",0)
        .text(function(d){
        return d.Brand;
        })
 
 //3nd column - brand
 rows.append("text")
    .attr("x",colPos[2])
        .attr("y",0)
        .text(function(d){
        return d.Owners;
        })
      
      
    });
​
  </script>
</body>
​
    