D3 Examples - 20170512 Rect with labels

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    text {font-family:Avenir-Light; font-size:14px};
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>
​
<body>
  
  <script>
    
//global variables
var h=300;
var w=300   ;
var rowHeight=40;
var gap=10  ;
var colors=["red","teal","olive","darkorange","darkpink"]
var margin={
  left:70,
  top:65
}
​
​
//create new svg element
​
var svg = d3.select("body").append("svg")
         .attr("width",w)
         .attr("height",h)
​
svg.append("rect")
    .attr("width",w)
    .attr("height",h)
    .attr("fill","#dcdcdc")
​
​
//declare data
var myData = [
  
  {name:"Michael",value:35},
  {name:"Ryan",value:50},
  {name:"Alan",value:75},
  {name:"David",value:90}
]
​
//create new group and append rects to it
var rects=svg.append("g").attr("id","rects")
            .selectAll("rects")
            .data(myData)
            .enter() 
            .append("rect")
​
//geomoetry and style the rects
rects.attr("height",rowHeight-gap)
      .attr("x",margin.left)
      .attr("width",0)
      .attr("y", function(d,i){
      return margin.top+(i*rowHeight)
      })
      .attr("fill",function(d,i){
      return colors[i];
      })
​
//create some labels for the bars
var labels=svg.append("g").attr("id","labels")
            .selectAll("text")
            .data(myData)
            .enter() 
            .append("text")
​
​
//position labels and write text
labels.attr("x",margin.left-5)
      .attr("y", function(d,i){
      return margin.top+(i*rowHeight)+(rowHeight/2)-(gap/5);
      })
            .text(function(d){
            return d.name
      })
            .attr("text-anchor","end")
      
rects.transition()
    .duration(1000)
    .delay(function(d,i){
  return i*500
})
    .attr("width",function(d,i){
  return d.value*2;
})
​
​
// var svg = d3.select("body").append("svg")
//          .attr("width",w)
//          .attr("height",h/2)
​
// svg.append("rect")
//  .attr("width",w)
//  .attr("height",h)
//  .attr("fill","grey")
//   .attr("y", function(d,i){
//       return margin.top+(i*rowHeight)
//       })
​
​
​
      
  </script>
</body>
​
    