D3 Examples - d3intro_exercise_hbarchart

xxxxxxxxxx
 
<!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; }
      .score {fill: white}
      .name{fill: black}
      rect {
        fill: steelblue;
      }
      rect:hover {
        cursor: pointer;
        fill: #64707D;
      }     
      svg text {
        pointer-events: none;
      }
      line {
            stroke: #c1c1c1;
            }
    </style>
  </head>
  <body>
    <h1>Intro d3js - exercise horizontal barchart</h1>
    <!--<p> previous paragraph</p>-->
    <script type="text/javascript">
      
      //Width and height
      var w = 600;
      var h = 500;
      var barPadding = 2;
      var left_width = 200;
      //Define sort order flag
      var sortOrder = false;
      
      
      
      //loading a csv file
      d3.csv("asistentes.csv", function(data) {
        var bar_height = h/data.length;
        var xScale = d3.scale.linear()
                  .domain([0, d3.max(data, function(d) {return d.edad;})])
              .range([0, w]);
        
        //Define sort function
        var sortGraph = function() {
​
          //Flip value of sortOrder
          sortOrder = !sortOrder;
​
          d3.selectAll("rect")
             .sort(function(a, b) {
                  if (sortOrder) {
                    return d3.ascending(a.edad, b.edad);
                  } else {
                    return d3.descending(a.edad, b.edad);
                  }
              })
              .transition()
              .delay(function(d, i) {
                return i * 50;
              })
              .duration(1000)
              .attr("y", function(d, i) {
                return i*(h/data.length);
                });
​
          svg.selectAll("text.score")
              .sort(function(a, b) {
                if (sortOrder) {
                  return d3.ascending(a.edad, b.edad);
                } else {
                  return d3.descending(a.edad, b.edad);
                }
              })
              .transition()
              .delay(function(d, i) {
                return i * 50;
              })
              .duration(1000)
              .attr("x", function(d) {return xScale(d.edad)+left_width;})
                   .attr("y", function(d,i){ return i*(h/data.length) + h/(2*data.length); } );
​
          svg.selectAll("text.name")
              .sort(function(a, b) {
                if (sortOrder) {
                  return d3.ascending(a.edad, b.edad);
                } else {
                  return d3.descending(a.edad, b.edad);
                }
              })
              .transition()
              .delay(function(d, i) {
                return i * 50;
              })
              .duration(1000)
              .attr("y", function(d,i){ return i*(h/data.length) + h/(2*data.length); } )
        };
​
        //Create SVG element
        var svg = d3.select("body")
                    .append("svg")
                    .attr("width", w+left_width)
                    .attr("height", h);
            
        //Bind data
        var rect = svg.selectAll("rect")
                      .data(data);
        
        //For every new created rectangle visualize
        rect.enter()
            .append("rect")
            .attr("x", left_width)
            .attr("y", function(d,i) {return i*(h/data.length);})
            .attr("width", function(d) {return xScale(d.edad)})
            .attr("height", function(d,i) {return (h/data.length) - barPadding+"px";})
                .on("click", function() {
              sortGraph();
            });
        
        //Draw the values
        svg.selectAll("text.score")
                         .data(data)
             .enter()
             .append("text")
             .attr("class","score")
                     .attr("x", function(d) {return xScale(d.edad)+left_width;})
                   .attr("y", function(d,i){ return i*(h/data.length) + h/(2*data.length); } )
                     .attr("dx", -5)
             .attr("dy", ".36em")
             .attr("text-anchor", "end")
             .text(function(d) {return d.edad;});
        
        // Draw the names
        svg.selectAll("text.name")
                     .data(data)
                     .enter().append("text")
                 .attr("x", left_width / 2)
                     .attr("y", function(d,i){ return i*(h/data.length) + h/(2*data.length); } )
                   .attr("dy", ".36em")
                     .attr("text-anchor", "middle")
                     .attr("class", "name")
                   .text(function(d){return d.persona;});
        }); //end of csv method
    </script>
  </body>
</html>
​
    