D3 Examples - afinidad

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>
​
<body>
  <script>
   
    var candidatos = [0.1,0.5,0.6,0.2,1,0.7];
    
    var nombresCandidatos = ['uno','dos','tres','cuatro','cinco','seis'];
    
    var mainLabels = ['Poco afín','Muy afín'];
    
    var width = 960;
    
    var height = 500;
    
    var escala = d3.scale.linear()
       .domain([0, 100])
       .range([0, width]);
    
    var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height);
    
    //linea principal
    
    /*svg.append('g')
       .append('line')
       .attr("x1", 0)
       .attr("y1", height)
       .attr("x2", width)
       .attr("y2", 40)
       .attr("stroke-width",2)
       .attr("stroke", "gray");*/
    
    //etiquetas principales 
    
    svg.append('g')
       .selectAll('.labels')
       .data(mainLabels)
       .enter()
       .append('text')
       .attr("x", function (d,i) { 
        if (i == 0){position = 20}else{
          position = width - 80
        }return position})
       .attr("y", 30)
       .text(function (d) { return d})
       .attr('fill','gray')
    
    //circulos candidatos
    
    svg.append('g')
       .selectAll('.circles')
       .data(candidatos)
       .enter()
       .append('circle')
       .attr('r',16)
       .attr('cx',function (d) { return escala (d * 100) - 20})
       .attr('cy',function (d,i) { return (i + 1)* 80})
       .attr('stroke', 'gray')
       .attr('stroke-width','2')
       .style('fill','rgba(0,255,0,0.3)');
    
    //lineas candidatos
    
     svg.append('g')
       .selectAll('.lines')
       .data(candidatos)
       .enter()
       .append('line')
       .attr("x1", 0)
       .attr("y1", function (d,i) { return (i + 1)* 80})
       .attr("x2", width)
       .attr("y2", function (d,i) { return (i + 1)* 80})
       .attr("stroke-width",1)
       .attr("stroke-dasharray",3)
       .attr("stroke", "gray");
       
      
  </script>
</body>
​
    