D3 Examples - ranking

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>
​
<body>
  <script>
  
    var data = [{nome:"Brasil", valor:1},
                 {nome:"Chile", valor:2},
                 {nome:"Argentina", valor:3.5},
                  {nome:"Paraguai", valor:4.2}];
    
    // Feel free to change or delete any of the code you see in this editor!
    var svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 500)
    
    var line = svg.append("line")
              .attr("x1", 200)
              .attr("x2", 200)
              .attr("y1", 50)
              .attr("y2", 200)
              .attr("stroke-width", 2)
              .attr("stroke", "black")
   
    svg.selectAll("text")
            .data(data)
            .enter()
                .append("text")
            .text(function(d) {return d.nome + " = " + d.valor})
                .style("font-size", 32)
            .attr("y", function(d) {return 200 - d.valor * 30})
                .attr("x", 200)
            .attr("dx", 12)
            .attr("dy", ".35em")    
    
    svg.selectAll('circle')
        .data(data)
      .enter()
        .append('circle')
      .attr('r', 5.0)
      .attr('cx', 200)
      .attr('cy', function(d) {return 200 - d.valor * 30})
      .style('cursor', 'pointer')
      .style('fill', 'steelblue');
​
  </script>
</body>
​
    