Histograms 2

by Paco86

HTML

<script src="https://d3js.org/d3.v4.js"></script>
<svg 
    version="1.1"
    baseProfile="full"
    xmlns="http://www.w3.org/2000/svg" >
  </svg>
  <p class="bin-count"></p>
  <input type="range" step="1" min="1" max="50">

CSS

svg, input {
  margin: 0 auto;
  display: block;
}

.bin-count {
  text-align: center;
}

JavaScript

'use strict';

(function(){

var regionData = [
  {
    "region": "Afghanistan",
    "subscribersPer100": 60,
    "adultLiteracyRate": null,
    "growthRate": -2.4,
    "urbanPopulationRate": 24,
    "extremePovertyRate": null,
    "medianAge": 16.2
  },
  {
    "region": "Albania",
    "subscribersPer100": 111,
    "adultLiteracyRate": 96.8,
    "growthRate": -0.3,
    "urbanPopulationRate": 55,
    "extremePovertyRate": 0.62,
    "medianAge": 32.56
  },
  {
    "region": "Algeria",
    "subscribersPer100": 98,
    "adultLiteracyRate": 72.6,
    "growthRate": -1.9,
    "urbanPopulationRate": 74,
    "extremePovertyRate": 6.79,
    "medianAge": 26.62
  },
  {
    "region": "Andorra",
    "subscribersPer100": 81,
    "adultLiteracyRate": null,
    "growthRate": 0,
    "urbanPopulationRate": 87,
    "extremePovertyRate": null,
    "medianAge": null
  },
  {
    "region": "Angola",
    "subscribersPer100": 47,
    "adultLiteracyRate": 70.4,
    "growthRate": -3.1,
    "urbanPopulationRate": 60,
    "extremePovertyRate": 43.37,
    "medianAge": 16.18
  },
  {
    "region": "Antigua and Barbuda",
    "subscribersPer100": 143,
    "adultLiteracyRate": 99,
    "growthRate": -1.1,
    "urbanPopulationRate": 30,
    "extremePovertyRate": null,
    "medianAge": 30.26
  },
  {
    "region": "Argentina",
    "subscribersPer100": 152,
    "adultLiteracyRate": 97.9,
    "growthRate": -0.9,
    "urbanPopulationRate": 93,
    "extremePovertyRate": 0.92,
    "medianAge": 30.83
  },
  {
    "region": "Armenia",
    "subscribersPer100": 112,
    "adultLiteracyRate": 99.6,
    "growthRate": -0.2,
    "urbanPopulationRate": 64,
    "extremePovertyRate": 2.47,
    "medianAge": 32.3
  },
  {
    "region": "Australia",
    "subscribersPer100": 106,
    "adultLiteracyRate": null,
    "growthRate": -1.3,
    "urbanPopulationRate": 89,
    "extremePovertyRate": null,
    "medianAge": 37.08
  },
  {
    "region": "Austria",
    "subscribersPer100": 161,
    "adultLiteracyRate": null,
   ...