d3intro_exercise_hbarchart_solution

Intro d3js

### Example07 - Scalable barChart

<!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>
    
    <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>

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