Mapa Población Mundial Visualizacion ds3

La población humana mundial es el número total de personas que viven en todo el mundo en un momento en específico. Está determinada por los nacimientos y los fallecimientos de los individuos, así como por su esperanza de vida.

La población mundial ha pasado de los casi 1000 millones de habitantes que había en 1800 a los más de 6000 millones en el año 2000. El 30 de octubre de 2011 se alcanzaron los 7000 millones (7 millardos). En diciembre de 2016 se superaron los 7400 millones de habitantes.

Algunas proyecciones estiman que la población mundial podría llegar a 9500 millones en el año 2050 y a 10 900 millones en 2100.

La evolución de la población y el crecimiento poblacional son consecuencia de varios factores interrelacionados. La alimentación, la generalización de la higiene, la sanidad, la difusión de medicamentos y en general el desarrollo de la tecnología han sido decisivos para el fuerte crecimiento de la población mundial, que ha pasado de los casi 1000 millones en el año 1800 a más de 6000 millones en el 2000 y a unos 7000 millones a finales de 2011.

Aunque durante la denominada transición demográfica se produjo una fuerte reducción de la tasa bruta de mortalidad y de la natalidad que se agudizará durante la segunda transición demográfica ―a partir de 1950―, la población mundial ha seguido con un alto crecimiento, incluso con una baja natalidad en numerosos países, ya que a la fuerte y constante reducción de la mortalidad se ha unido el aumento generalizado de la esperanza de vida. La denominada revolución reproductiva constata que la reducción del esfuerzo reproductivo supone una alta eficiencia reproductiva ―baja natalidad y alta supervivencia de los individuos―.

Fuente: https://es.wikipedia.org/wiki/Poblaci%C3%B3n_mundial Fuente Mapa: /micahstubbs/535e57a3a2954a129c13701fe61c681d

<!DOCTYPE html>
<meta charset="utf-8">
<style>
  .names {
    fill: none;
    stroke: #fff;
    stroke-linejoin: round;
  }
  
  /* Tooltip CSS */
  .d3-tip {
    line-height: 1.5;
    font-weight: 400;
    font-family:"avenir next", Arial, sans-serif;
    padding: 6px;
    background: rgba(0, 0, 0, 0.6);
    color: #FFA500;
    border-radius: 1px;
    pointer-events: none;
  }

/* Creates a small triangle extender for the tooltip */
  .d3-tip:after {      
    box-sizing: border-box;
    display: inline;
    font-size: 8px;
    width: 100%;
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.6);
    position: absolute;
    pointer-events: none;
    
  }

/* Northward tooltips */
  .d3-tip.n:after {
    content: "\25BC";
    margin: -1px 0 0 0;
    top: 100%;
    left: 0;
    text-align: center;
  }

/* Eastward tooltips */
  .d3-tip.e:after {
    content: "\25C0";
    margin: -4px 0 0 0;
    top: 50%;
    left: -8px;
  }

/* Southward tooltips */
  .d3-tip.s:after {
    content: "\25B2";
    margin: 0 0 1px 0;
    top: -8px;
    left: 0;
    text-align: center;
  }

/* Westward tooltips */
  .d3-tip.w:after {
    content: "\25B6";
    margin: -4px 0 0 -1px;
    top: 50%;
    left: 100%;
  }

/*    
  text{
    pointer-events:none;
  }
  */

.details{
    color: white;
  }
</style>
<body>
<h3>Población Mundial 2015</h3>
<p>Mapa de países por población. La población mundial ha pasado de los casi 1000 millones que había en 1800 a los más de 6000 millones en el año 2000, y el 30 de octubre de 2011 se alcanzaron los 7000 millones.<p>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/queue.v1.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script src="https://d3js.org/d3-geo-projection.v1.min.js"></script>
<script src="d3-tip.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.10.3/babel.min.js'></script>
<script lang='babel' type='text/babel'>
const format = d3.format(',');

// Set tooltips
const tip = d3.tip()
  .attr('class', 'd3-tip')
  .offset([-10, 0])
  .html(d => `<strong>País: </strong><span class='details'>${d.properties.name}<br></span><strong>Población: </strong><span class='details'>${format(d.population)}</span>`);

const margin = {top: 0, right: 0, bottom: 0, left: 0};
const width = 960 - margin.left - margin.right;
const height = 500 - margin.top - margin.bottom;

const color = d3.scaleThreshold()
  .domain([
    10000,
    100000,
    500000,
    1000000,
    5000000,
    10000000,
    50000000,
    100000000,
    500000000,
    1500000000
  ])
  .range([
    'rgb(247,251,255)',
    'rgb(222,235,247)', 
    'rgb(198,219,239)', 
    'rgb(158,202,225)',
    'rgb(107,174,214)',
    'rgb(66,146,198)',
    'rgb(33,113,181)',
    'rgb(8,81,156)',
    'rgb(8,48,107)',
    'rgb(3,19,43)'
  ]);

const svg = d3.select('body')
  .append('svg')
  .attr('width', width)
  .attr('height', height)
  .append('g')
  .attr('class', 'map');

const projection = d3.geoRobinson()
  .scale(148)
  .rotate([352, 0, 0])
  .translate( [width / 2, height / 2]);

const path = d3.geoPath().projection(projection);

svg.call(tip);

queue()
  .defer(d3.json, 'world_countries.json')
  .defer(d3.csv, 'prueba.csv')
  .await(ready);

function ready(error, data, population) {
  const populationById = {};

population.forEach(d => { populationById[d.id] = +d.population; });
  data.features.forEach(d => { d.population = populationById[d.id] });

svg.append('g')
    .attr('class', 'countries')
    .selectAll('path')
    .data(data.features)
    .enter().append('path')
      .attr('d', path)
      .style('fill', d => color(populationById[d.id]))
      .style('stroke', 'white')
      .style('opacity', 0.8)
      .style('stroke-width', 0.3)
      // tooltips
      .on('mouseover',function(d){
        tip.show(d);
        d3.select(this)
          .style('opacity', 1)
          .style('stroke-width', 3);
      })
      .on('mouseout', function(d){
        tip.hide(d);
        d3.select(this)
          .style('opacity', 0.8)
          .style('stroke-width',0.3);
      });

svg.append('path')
    .datum(topojson.mesh(data.features, (a, b) => a.id !== b.id))
    .attr('class', 'names')
    .attr('d', path);
}
</script>
</body>
</html>

Modified http://d3js.org/d3.v4.min.js to a secure url

Modified http://d3js.org/queue.v1.min.js to a secure url

Modified http://d3js.org/topojson.v1.min.js to a secure url

https://d3js.org/d3.v4.min.js

https://d3js.org/queue.v1.min.js

https://d3js.org/topojson.v1.min.js

https://d3js.org/d3-geo-projection.v1.min.js

https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.10.3/babel.min.js