D3 Examples - Distritos educativos Pcia Bs As

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<style>
​
html, body, #map {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  }
  
  .d3-tip {
  line-height: 1;
  font-size: 11px;
  font-weight: bold;
  font-family: "Open Sans", sans-serif;
  padding: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 2px;
}
  
/* Creates a small triangle extender for the tooltip */
​
.d3-tip:after {
  box-sizing: border-box;
  display: inline;
  font-size: 12px;
  width: 100%;
  line-height: 1;
  color: rgba(0, 0, 0, 0.8);
  content: "\25BC";
  position: absolute;
  text-align: center;
}
​
/* Style northward tooltips differently */
​
.d3-tip.n:after {
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
}
  
</style>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?v=3&amp"></script>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="https://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
​
<script>
    
  var tip = d3.tip()
  .attr('class', 'd3-tip')
  .offset([-10, 0])
  .html(function(d) {
    return "<strong>Partido:</strong> <span style='color:#e1ef1f'>" + d.partido + "</span>";
  })
​
  var styles = [
  {
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#f5f5f5"
      }
    ]
  },
  {
    "elementType": "labels",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "elementType": "labels.icon",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#616161"
      }
    ]
  },
  {
    "elementType": "labels.text.stroke",
    "stylers": [
      {
        "color": "#f5f5f5"
      }
    ]
  },
  {
    "featureType": "administrative",
    "elementType": "geometry",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "administrative.land_parcel",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#bdbdbd"
      }
    ]
  },
  {
    "featureType": "administrative.neighborhood",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "poi",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "poi",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#eeeeee"
      }
    ]
  },
  {
    "featureType": "poi",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#757575"
      }
    ]
  },
  {
    "featureType": "poi.park",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#e5e5e5"
      }
    ]
  },
  {
    "featureType": "poi.park",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#9e9e9e"
      }
    ]
  },
  {
    "featureType": "road",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "road",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#ffffff"
      }
    ]
  },
  {
    "featureType": "road",
    "elementType": "labels.icon",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "road.arterial",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#757575"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#dadada"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#616161"
      }
    ]
  },
  {
    "featureType": "road.local",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#9e9e9e"
      }
    ]
  },
  {
    "featureType": "transit",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "transit.line",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#e5e5e5"
      }
    ]
  },
  {
    "featureType": "transit.station",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#eeeeee"
      }
    ]
  },
  {
    "featureType": "water",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#c9c9c9"
      }
    ]
  },
  {
    "featureType": "water",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#9e9e9e"
      }
    ]
  }
];
  
// Create the Google Map…
var map = new google.maps.Map(d3.select("#map").node(), {
  zoom: 6,
  center: new google.maps.LatLng(-37.3, -60),
  //mapTypeId: google.maps.MapTypeId.ROADMAP
  styles: styles
});
 
//map.call(tip);
    
//Load in GeoJSON data
  map.data.loadGeoJson('provincia.geojson');
​
  /*
  // Color each district gray. Change the color when the isColorful property
  // is set to true.
  map.data.setStyle(function(feature) {
    var color = 'gray';
    if (feature.getProperty('isColorful')) {
      color = feature.getProperty('color');
    }*/
  
    /*return /** @type {google.maps.Data.StyleOptions} */ /*({
      fillColor: color,
      strokeColor: color,
      strokeWeight: 1
    });
  });
*/
  
  var color = d3.scale.threshold()
    .domain([1, 5, 10, 50])
    .range(['#f0f9e8','#bae4bc','#7bccc4','#43a2ca','#0868ac']);
  
  d3.json('provincia.geojson', function(error, provincia) {
  if (error) throw error;
    
  var partidos = topojson.feature(provincia, provincia.objects.partido);
​
  map.append("g")
      .attr("class", "partido")
    .selectAll("path")
      .data(partidos.features)
    .enter().append("path")
      .attr("d", path)
      .style("fill", function(d) { return color(d.density = d.properties.reg_educ); })
    .append("title")
      .text(function(d) { return d.properties.partido + ": " + d.density.toFixed(0) + "/mi.²"; });
    
  /*
  // When the user clicks, set 'isColorful', changing the color of the district.
  map.data.addListener('click', function(event) {
    event.feature.setProperty('isColorful', true);
  });
​
  // When the user hovers, tempt them to click by outlining the district.
  // Call revertStyle() to remove all overrides. This will use the style rules
  // defined in the function passed to setStyle()
    map.data.addListener('mouseover', function(event) {
    map.data.revertStyle();
    map.data.overrideStyle(event.feature, {fillColor: '#e1ef1f', fillOpacity: 1});
  });
​
  map.data.addListener('mouseout', function(event) {
    map.data.revertStyle();
  });
  */
  
</script>
​
    