D3 Examples - Cajamar

xxxxxxxxxx
 
<!DOCTYPE html>
​
<meta charset="utf-8">
<link rel="stylesheet" href="https://yui.yahooapis.com/pure/0.5.0/pure-min.css">
<link rel="stylesheet" href="https://rawgit.com/tpreusse/radar-chart-d3/master/src/radar-chart.css">
<link rel="stylesheet" type="text/css" href="main.css">
​
<style>
  
body {
  padding: 20px;
}
</style>
​
​
  
<style>
  
​
.radar-chart .area {
​
  fill-opacity: 1;
}
.radar-chart.focus .area {
​
  fill-opacity: 1.20911616;
}
.radar-chart.focus .area.focused {
  fill-opacity: 1;
}
  
 
</style>
​
<script src="https://d3js.org/d3.v3.js"></script>
<script src="radar.js"></script>
​
<script type=text/javascript>
​
var cP = 'cp';
  
  var textaco =  ".circle {fill: #00a8e0;stroke: none;fill-opacity: 0.34086912;}"
  
  var textaco2 = ".area0.cp46026, .cp46026 .circle {fill:#93edff;stroke: none;fill-opacity: 0.0136347647999999;}"
  
  
document.write("<style type='text/css'>")
for (i = 0; i < 27; i++) { 
  var string = cP.concat(46000+i)
  
    document.write(".area.".concat(string).concat(", .").concat(string).concat(textaco))
}
document.write("</style>")
​
document.write("<style type='text/css'>")
for (i = 0; i < 27; i++) { 
  var string = cP.concat(46000+i)
  
    document.write("area0.".concat(string).concat(", .").concat(string).concat(textaco2))
}
document.write("</style>")
​
​
​
​
</script>
​
<script>
  
  
  
  
RadarChart.defaultConfig.color = function() {};
RadarChart.defaultConfig.radius = 4;
RadarChart.defaultConfig.w = 400;
RadarChart.defaultConfig.h = 400;
</script>
​
​
  <h3>Distribución de dinero por sector</h3>
        <div class="form-group">
          <label>Código Postal:</label>
          <input type="number" class="form-control-inline" step="1" max = '46025' placeholder = '46001' min = '46001' id="selector" ng-model="radar.config.w" />
<script>
  
  
  //Datos
  
  d3.csv('COMERCIO_SECTOR.csv', function(error, data) {
  
    if (error) throw error; 
    var databyCP = d3.nest()
  .key(function(d) { return d.CP_COMERCIO; })
  .entries(data);
    
  
  
function datos() {
  return databyCP.map(function(d) {
    return {
      className: "cp".concat(d.key),
      axes: d.values.map(function(axis) {
        return {axis: axis.SECTOR, value: axis.DINERO/1};
      })
    };
  });
}
  
    
    console.log(datos())
​
    
​
  d3.select("#selector").on("input", function() {
    count = +this.value -46001
  return plot_radar(count);
});
  
  
  
  // Inicializacion 
      var chart = RadarChart.chart();
            var cfg = chart.config(); // retrieve default config
      var svg = d3.select('body').append('svg')
        .attr('width', cfg.w + cfg.w + 400)
        .attr('height', cfg.h + cfg.h / 4 +400);
    var prueba = svg.append('g').classed('single',1).
    data([[datos()[0]]]).call(chart)
  //    
    
    
  function plot_radar(count){
    
     d3.selectAll("svg").remove();
            
    var svg = d3.select('body').append('svg')
        .attr('width', cfg.w + cfg.w  )
        .attr('height', cfg.h + cfg.h / 4 );
    var prueba = svg.append('g').classed('single',1).
    data([[datos()[count]]]).call(chart)
    
   
    prueba.exit
    
  }
    
    
   
    
    
 })
    
​
  
  
// incoroporar los cambios con esto https://bl.ocks.org/mbostock/3808218
// https://bl.ocks.org/chrisrzhou/2421ac6541b68c1680f8
//https://github.com/alangrafu/radar-chart-d3
//  https://rawgit.com/tpreusse/radar-chart-//   d3/master/src/radar-chart.js
</script>
    