D3 Examples - Mapa Valencia Radar

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>
​
@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Josefin+Slab|Arvo|Lato|Vollkorn|Abril+Fatface|Old+Standard+TT|Droid+Sans|Lobster|Inconsolata|Montserrat|Playfair+Display|Karla|Alegreya|Libre+Baskerville|Merriweather|Lora|Archivo+Narrow|Neuton|Signika|Questrial|Fjalla+One|Bitter|Varela+Round);
​
.background {fill: #eee; pointer-events: all;}
.map-layer {fill: #fff; stroke: #aaa;}
.effect-layer{pointer-events:none;}
​
text{
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 300;
}
​
text.big-text{
  font-size: 30px;
  font-weight: 400;
}
​
.effect-layer text, text.dummy-text{
  font-size: 12px;
}
​
</style>
<body>
​
<svg></svg>
​
<script src="https://d3js.org/d3.v3.min.js"></script>
​
​
  
//-------------------Esto es del radar--------------
  
​
<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>
​
​
​
​
​
  <h1>Distribución de dinero por sector</h1>
​
   <div id = 'text'>
El gráfico muestra por cada código postal la cantidad de dinero que ha percibido cada sector de comercio a lo largo del periodo 2015-2016.
</div>
​
        <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" />
          
//------------------------------------------------
  
  
  
  
  
  
  
//-------------------Aqui empieza el mapa---------------
<script>  
 
var width = 960,
    height = 500,
    centered;
​
// Define color scale
  
  
var color = d3.scale.linear()
  .domain([1, 20])
  .clamp(true)
  .range(['#fff', '#ffffff']);
  //.range(['#fff', '#409A99']);
​
​
//Tamaño y posicion del mapa  
  
  
  
var projection = d3.geo.mercator()
  .scale(9000)
  .center([1, 39.5])
  //.center([-0.35, 39])
  //.translate([width / 2, height / 2]);
​
var path = d3.geo.path()
  .projection(projection);
​
  
  
// Set svg width & height
 
  
  
var svg = d3.select('svg')
  .attr('width', width)
  .attr('height', height);
​
  
  
// Add background
  
  
  
svg.append('rect')
  .attr('class', 'background')
  .attr('width', width)
  .attr('height', height)
  .on('click', clicked);
​
var g = svg.append('g');
​
var effectLayer = g.append('g')
  .classed('effect-layer', true);
​
var mapLayer = g.append('g')
  .classed('map-layer', true);
​
/*
var dummyText = g.append('text')
  .classed('dummy-text', true)
  .attr('x', 10)
  .attr('y', 30)
  .style('opacity', 0);
​
var bigText = g.append('text')
  .classed('big-text', true)
  .attr('x', 20)
  .attr('y', 45);
*/
  
  
  
// Load map data
  
  
d3.json('map.json', function(error, mapData) {
  var features = mapData.features;
​
  
  
// Update color scale domain based on data
  
  
  
  
color.domain([0, d3.max(features, nameLength)]);
​
  
  
  
// Draw each province as a path
  
  
  
  mapLayer.selectAll('path')
      .data(features)
    .enter().append('path')
      .attr('d', path)
      .attr('vector-effect', 'non-scaling-stroke')
      .style('fill', fillFn)
      .on('mouseover', mouseover)
      .on('mouseout', mouseout)
      .on('click', clicked);
});
​
​
// Get province name
  
  
//function nameFn(d){return d && d.properties ? d.properties.NOMBRE_DPT : null;}
function nameFn(d){return d && d.properties ? d.properties.name : null;}  
  
​
// Get province name length
  
  
  
function nameLength(d){var n = nameFn(d);return n ? n.length : 0;}  
//function nameLength(d){var n = nameFn(d);return n ? n.length : 0;}
​
  
  
// Get province color
  
  
  
function fillFn(d){return color(nameLength(d.properties.name));}
//function fillFn(d){return color(nameLength(d));}
  
  
  
// Aqui es donde decimos como se amplian los códigos
  
 
  
function clicked(d) { var x, y, k;
                 
  if (d && centered !== d) {
    var centroid = path.centroid(d);
    x = centroid[0]+width/10;
    y = centroid[1];
    k = 4;
    centered = d;
  } else {
    x = width / 2 ;
    y = height / 2;
    k = 1;
    centered = null;
  }
​
                     
                     
// Highlight the clicked province                   
                     
                     
                     
mapLayer.selectAll('path')
        .style('fill', function(d){return centered && d===centered ? '#D5708B' : fillFn(d);});
​
                     
                     
// Zoom
                     
                     
  g.transition()
    .duration(750)
    .attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')scale(' + k + ')translate(' + -x + ',' + -y + ')');}
  
​
function mouseover(d){
  // Highlight hovered province
  d3.select(this).style('fill', 'orange');
  
  svg.append('text')
        .attr('class', 'tooltip')
            .attr('x',100)
        .attr('y', 100)
        .text(d.properties.name)
        }
  // Draw effects
  
  
  
  //textArt(nameFn(d));
​
​
function mouseout(d){
  
  
// Reset province color
  
  
  mapLayer.selectAll('path')
    .style('fill', function(d){return centered && d===centered ? '#D5708B' : fillFn(d);});
​
  
  
  
// Remove effect text
  
  
  
  effectLayer.selectAll('text').transition()
    .style('opacity', 0)
    .remove();
  
 
//Eliminar texto con el código postal
  
  
  
  
   d3.select('.tooltip')
        .remove();
  // Clear province name
//  bigText.text('');
}
/*
// Gimmick
// Just me playing around.
// You won't need this for a regular map.
​
var BASE_FONT = "'Helvetica Neue', Helvetica, Arial, sans-serif";
​
var FONTS = [
  "Open Sans",
  "Josefin Slab",
  "Arvo",
  "Lato",
  "Vollkorn",
  "Abril Fatface",
  "Old StandardTT",
  "Droid+Sans",
  "Lobster",
  "Inconsolata",
  "Montserrat",
  "Playfair Display",
  "Karla",
  "Alegreya",
  "Libre Baskerville",
  "Merriweather",
  "Lora",
  "Archivo Narrow",
  "Neuton",
  "Signika",
  "Questrial",
  "Fjalla One",
  "Bitter",
  "Varela Round"
];
​
function textArt(text){
  // Use random font
  var fontIndex = Math.round(Math.random() * FONTS.length);
  var fontFamily = FONTS[fontIndex] + ', ' + BASE_FONT;
​
  bigText
    .style('font-family', fontFamily)
    .text(text);
​
  // Use dummy text to compute actual width of the text
  // getBBox() will return bounding box
  dummyText
    .style('font-family', fontFamily)
    .text(text);
  var bbox = dummyText.node().getBBox();
​
  var textWidth = bbox.width;
  var textHeight = bbox.height;
  var xGap = 3;
  var yGap = 1;
​
  // Generate the positions of the text in the background
  var xPtr = 0;
  var yPtr = 0;
  var positions = [];
  var rowCount = 0;
  while(yPtr < height){
    while(xPtr < width){
      var point = {
        text: text,
        index: positions.length,
        x: xPtr,
        y: yPtr
      };
      var dx = point.x - width/2 + textWidth/2;
      var dy = point.y - height/2;
      point.distance = dx*dx + dy*dy;
​
      positions.push(point);
      xPtr += textWidth + xGap;
    }
    rowCount++;
    xPtr = rowCount%2===0 ? 0 : -textWidth/2;
    xPtr += Math.random() * 10;
    yPtr += textHeight + yGap;
  }
​
  var selection = effectLayer.selectAll('text')
    .data(positions, function(d){return d.text+'/'+d.index;});
​
  // Clear old ones
  selection.exit().transition()
    .style('opacity', 0)
    .remove();
​
  // Create text but set opacity to 0
  selection.enter().append('text')
    .text(function(d){return d.text;})
    .attr('x', function(d){return d.x;})
    .attr('y', function(d){return d.y;})
    .style('font-family', fontFamily)
    .style('fill', '#777')
    .style('opacity', 0);
​
  selection
    .style('font-family', fontFamily)
    .attr('x', function(d){return d.x;})
    .attr('y', function(d){return d.y;});
​
  // Create transtion to increase opacity from 0 to 0.1-0.5
  // Add delay based on distance from the center of the <svg> and a bit more randomness.
  selection.transition()
    .delay(function(d){
      return d.distance * 0.01 + Math.random()*1000;
    })
    .style('opacity', function(d){
      return 0.1 + Math.random()*0.4;
    });
}
*/
​
  
  
  
  
  //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>  
  
  
    