Old school D3 from simpler times

All examples By author By category About

jjelosua

Full window Github gist

d3intro_ex10

Intro d3js

### Example10 - Labels

Built with blockbuilder.org

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Intro d3js examples</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <style>
      body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
      .existing {color: blue;}
      .new {color: green;}
    </style>
  </head>
  <body>
    <h1>Intro d3js - example10</h1>
    
    <script type="text/javascript">
    	//Width and height
      var w = 800;
      var h = 100;
      var barPadding = 1;
      var num_items = 20;
      
      var dataset = [];               
      for (var i = 0; i < num_items; i++) {//Loop num_items times
        var newNumber = Math.floor(Math.random() * 50);//New random integer (0-29)
        dataset.push(newNumber);//Add new number to array
      }

var l = dataset.length;
      
      //Create SVG element
      var svg = d3.select("body")
                  .append("svg")
                  .attr("width", w)
                  .attr("height", h);
      
      svg.selectAll("rect")
         .data(dataset)
         .enter()
         .append("rect")
         .attr("x", function(d,i) {return i * (w/l);})
         .attr("y", function(d) {return h-d;})
         .attr("width", function(d) {return w/l-barPadding;})
         .attr("height", function(d,i) {return d+"px";})
      	 .attr("fill","teal");
      
      // Add some labels centered on the bars
      svg.selectAll("text")
         .data(dataset)
         .enter()
         .append("text")
         .text(function(d) {return d;})
         .attr("text-anchor", "middle")
         .attr("x", function(d, i) {
             return i * (w / l) + (w / l - barPadding) / 2;
         })
         .attr("y", function(d) {
             return h - (d) + 10;
         })
         .attr("font-family", "sans-serif")
         .attr("font-size", "11px")
         .attr("fill", "white");
    </script>
  </body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js