D3 Examples - world population

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
svg{
  /*border: 1px solid silver;*/
}
</style>
<body>
  
<div class="map-container"></div>
​
<div class="legend-component">
    <svg xmlns="https://www.w3.org/2000/svg" version="1.1" xmlns:xlink="https://www.w3.org/1999/xlink" height="50" width="600">
        <g class="panel" transform="translate(50, 0)">
            <defs><linearGradient id="legend-gradient"></linearGradient></defs>
            <rect height="30" width="500" class="color-band" fill="url(#legend-gradient)" />
            <g class="axis"></g>
            <text class="unit"></text>
        </g>
    </svg>
</div>
    
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/queue.v1.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script>
​
var margin = {top: 20, right: 20, bottom: 30, left: 30},
            width = 1300 - margin.left - margin.right,
            height = 1000 - margin.top - margin.bottom;
​
var colors = ['#eaf8ff', '#beedfe', '#4bd0ff', '#05a5de', '#2882be']; // colors to tweak
var estoniaColor = '#004568';
var colorScale = d3.scale.linear()
     .range(colors);
​
var path = d3.geo.path();
​
var svg = d3.select(".map-container")
    .append("svg")
    .attr("width", width)
    .attr("height", height)
    .append('g')
    .attr('class', 'map');
​
var projection = d3.geo.mercator()
  .scale(200)
  .translate( [width / 2, height / 1.6]);
​
var path = d3.geo.path().projection(projection);
​
queue()
    .defer(d3.json, "world_countries.json")
    .defer(d3.csv, "world_population.csv")
    .await(ready);
​
function ready(error, world, _population) {
  var populationByCode = {};
  var population = _population.sort(function(a, b){ return b.population - a.population; });
  
  console.log(population.map(function(d, i){ return d.name + ',' + d.population; }).slice(1, 11).join('\n'));
​
  population.forEach(function(d) {
    d.population = +d.population;
    populationByCode[d.code] = d.population;
  });
  
  var populationValues = population.map(function(d, i){ return d.population; });
  populationValues.sort(function(a, b){ return a - b; });
  var populationMin = populationValues[0];
  var populationMaxMinusBiggest = populationValues[populationValues.length - 2];
  var populationMiddle = populationMin + (populationMaxMinusBiggest - populationMin) / 2;
  
  console.log(populationMin, populationMiddle, populationMaxMinusBiggest);
  
  // get as many data stops as you have color stops
  colorScale.domain([populationMin, populationMin + 100, populationMin + 4000, populationMiddle, populationMaxMinusBiggest]);
  var allColors = [];
 
  svg.append("g")
      .attr("class", "continents")
    .selectAll("path")
      .data([topojson.feature(world, world.objects.land).geometry])
      .enter().append("path")
      .attr('d', path)
      // .style({stroke: 'none', fill: '#dff7ff'}); // continents color
      .style({stroke: '#dde', 'stroke-width': 2, fill: 'none'}); // continents color
      
  svg.append("g")
      .attr("class", "countries")
    .selectAll("path")
      .data(topojson.feature(world, world.objects.countries).features)
      .enter().append("path")
      .filter(function(d){ return populationByCode[d.id]; })
      .attr('d', path)
      .style("fill", function(d) {
        var color = d.id === 233 ? estoniaColor : colorScale(populationByCode[d.id]);
        allColors.push(color);
        return color;
      })
      .style({stroke: 'none', 'stroke-width': 1.5})
      .append('title')
      .text(function(d){ return populationByCode[d.id]; });
      
  var stops = d3.select('#legend-gradient')
      .selectAll('stop')
      .data(colors)
      .enter().append('stop')
      .attr({
            offset: function(d, i){ return i*(100/(colors.length-1)) + '%'; },
            'stop-color': function(d){ return d; }
        });
    
  var labelValues = colorScale.domain();
  var labels = d3.select('.axis')
        .selectAll('line.tick-line')
        .data(labelValues)
        .enter().append('line').classed('tick-line', true)
        .attr({
            x1: function(d, i){ return i*(500/(labelValues.length-1)); },
            y1: 30,
            x2: function(d, i){ return i*(500/(labelValues.length-1)); },
            y2: 35,
            stroke: 'black'
        });
        
  var labels = d3.select('.axis')
        .selectAll('text.tick-label')
        .data(labelValues)
        .enter().append('text').classed('tick-label', true)
        .attr({
            x: function(d, i){ return i*(500/(labelValues.length-1)); },
            y: 50
        })
        .text(function(d){ return d; })
        .attr({
            dx: function(d, i){ return -(this.getBBox().width / 2); }
        });
        
        var uniqueColors = allColors.reduce(function(prev, cur) {
            return (prev.indexOf(cur) < 0) ? prev.concat([cur]) : prev;
           }, []);
        console.log(uniqueColors);
​
}
​
</script>
</body>
</html>
    