tmcw/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <title></title>
  <meta charset='utf-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0, user-scalable=no'>
  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.26.0/mapbox-gl.css' rel='stylesheet' />
  <style>
  body { margin: 0; padding: 0; }
  .map {
    position:absolute;
    top:0;bottom:0;left:0;
    width:100%;
    height:100%;
    }
  .radio-group {
    font:bold 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
    position:absolute;
    top:10px;
    left:10px;
    z-index:1;
    border-radius:3px;
    color:#fff;
    }
  .radio-group input[type=radio]:first-child + label {
    border-radius:3px 3px 0 0;
    }
  .radio-group label:last-child {
    border-radius:0 0 3px 3px;
    border:none;
    }
  .radio-group input[type=radio] {
    display:none;
    }
  .radio-group input[type=radio] + label {
    background-color:#3386c0;
    display:block;
    cursor:pointer;
    padding:10px;
    border-bottom:1px solid rgba(0, 0, 0, 0.25);
    }
  .radio-group input[type=radio] + label {
    background-color:#3386c0;
    text-transform:capitalize;
    }
  .radio-group input[type=radio] + label:hover,
  .radio-group input[type=radio]:checked + label {
    background-color:#4ea0da;
    }
  </style>
</head>

<body>
<div id='map' class='map'></div>

<nav id='radio-group' class='radio-group'>
  <input type='radio' name='color-space' id='rgb' checked>
  <label for='rgb'>RGB</label>
  <input type='radio' name='color-space' id='hcl'>
  <label for='hcl'>HCL</label>
  <input type='radio' name='color-space' id='lab'>
  <label for='lab'>LAB</label>
</nav>

<script src="https://d3js.org/d3-array.v1.min.js"></script>
<script src="https://d3js.org/d3-collection.v1.min.js"></script>
<script src="https://d3js.org/d3-color.v1.min.js"></script>
<script src="https://d3js.org/d3-format.v1.min.js"></script>
<script src="https://d3js.org/d3-interpolate.v1.min.js"></script>
<script src="https://d3js.org/d3-time.v1.min.js"></script>
<script src="https://d3js.org/d3-time-format.v2.min.js"></script>
<script src="https://d3js.org/d3-scale.v1.min.js"></script>

<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.26.0/mapbox-gl.js'></script>
<script src='https://unpkg.com/simple-statistics@2.2.0/dist/simple-statistics.min.js'></script>

<script>
mapboxgl.accessToken = 'pk.eyJ1IjoidHJpc3RlbiIsImEiOiJiUzBYOEJzIn0.VyXs9qNWgTfABLzSI3YcrQ';

var map = window.map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/light-v9',
  center: [9, 30],
  zoom: 1.5
});

var popup = new mapboxgl.Popup({
  closeButton: false
});

map.on('load', function() {
  mapboxgl.util.getJSON('https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_110m_admin_0_countries.geojson', init);
});

function init(err, geojson) {
  if (err) console.error(err);

  var color = d3.scaleLinear()
    .domain([0, 8])
    .range(["white", "steelblue"])
    .interpolate(d3.interpolateHcl);

  var stops = ss.ckmeans(geojson.features.map(function(feature) {
    return feature.properties['pop_est'];
  }), 8).map(function (stop, i) {
    return [stop[0], color(i)];
  });

  map.addSource('geojson', {
    "type": "geojson",
    "data": geojson
  });

  map.addLayer({
    "id": "countries",
    "type": "fill",
    "source": "geojson",
    "paint": {
      "fill-color": {
        "property": "pop_est",
        "type": "interval",
        "stops": stops
      }
    }
  }, "country-label-lg");

  document.getElementById('radio-group').addEventListener('change', function(e) {
    map.setPaintProperty('countries', 'fill-color', {
      "property": "pop_est",
      "colorSpace": e.target.id,
      "stops": stops
    });
  });

  map.on('mousemove', function(e) {
    var features = map.queryRenderedFeatures(e.point, {
      layers: ['countries']
    });

    // Change the cursor style as a UI indicator.
    map.getCanvas().style.cursor = (features.length) ? 'pointer' : '';

    if (!features.length) {
      popup.remove();
      return;
    }

    var feature = features[0];
    var props = feature.properties;

    // Populate the popup and set its coordinates
    // based on the feature found.
    popup.setLngLat(e.lngLat)
      .setText(props.name + ' pop: ' + feature.properties.pop_est.toLocaleString())
      .addTo(map);
  });
}
</script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title></title>
	<meta charset='utf-8'>
	<meta name='viewport' content='width=device-width, initial-scale=1.0, user-scalable=no'>
	<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.26.0/mapbox-gl.css' rel='stylesheet' />
	<style>
	body { margin: 0; padding: 0; }
	.map {
	position:absolute;
	top:0;bottom:0;left:0;
	width:100%;
	height:100%;
	}
	.radio-group {
	font:bold 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
	position:absolute;
	top:10px;
	left:10px;
	z-index:1;
	border-radius:3px;
	color:#fff;
	}
	.radio-group input[type=radio]:first-child + label {
	border-radius:3px 3px 0 0;
	}
	.radio-group label:last-child {
	border-radius:0 0 3px 3px;
	border:none;
	}
	.radio-group input[type=radio] {
	display:none;
	}
	.radio-group input[type=radio] + label {
	background-color:#3386c0;
	display:block;
	cursor:pointer;
	padding:10px;
	border-bottom:1px solid rgba(0, 0, 0, 0.25);
	}
	.radio-group input[type=radio] + label {
	background-color:#3386c0;
	text-transform:capitalize;
	}
	.radio-group input[type=radio] + label:hover,
	.radio-group input[type=radio]:checked + label {
	background-color:#4ea0da;
	}
	</style>
	</head>

	<body>
	<div id='map' class='map'></div>

	<nav id='radio-group' class='radio-group'>
	<input type='radio' name='color-space' id='rgb' checked>
	<label for='rgb'>RGB</label>
	<input type='radio' name='color-space' id='hcl'>
	<label for='hcl'>HCL</label>
	<input type='radio' name='color-space' id='lab'>
	<label for='lab'>LAB</label>
	</nav>

	<script src="https://d3js.org/d3-array.v1.min.js"></script>
	<script src="https://d3js.org/d3-collection.v1.min.js"></script>
	<script src="https://d3js.org/d3-color.v1.min.js"></script>
	<script src="https://d3js.org/d3-format.v1.min.js"></script>
	<script src="https://d3js.org/d3-interpolate.v1.min.js"></script>
	<script src="https://d3js.org/d3-time.v1.min.js"></script>
	<script src="https://d3js.org/d3-time-format.v2.min.js"></script>
	<script src="https://d3js.org/d3-scale.v1.min.js"></script>

	<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.26.0/mapbox-gl.js'></script>
	<script src='https://unpkg.com/simple-statistics@2.2.0/dist/simple-statistics.min.js'></script>

	<script>
	mapboxgl.accessToken = 'pk.eyJ1IjoidHJpc3RlbiIsImEiOiJiUzBYOEJzIn0.VyXs9qNWgTfABLzSI3YcrQ';

	var map = window.map = new mapboxgl.Map({
	container: 'map',
	style: 'mapbox://styles/mapbox/light-v9',
	center: [9, 30],
	zoom: 1.5
	});

	var popup = new mapboxgl.Popup({
	closeButton: false
	});

	map.on('load', function() {
	mapboxgl.util.getJSON('https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_110m_admin_0_countries.geojson', init);
	});

	function init(err, geojson) {
	if (err) console.error(err);

	var color = d3.scaleLinear()
	.domain([0, 8])
	.range(["white", "steelblue"])
	.interpolate(d3.interpolateHcl);

	var stops = ss.ckmeans(geojson.features.map(function(feature) {
	return feature.properties['pop_est'];
	}), 8).map(function (stop, i) {
	return [stop[0], color(i)];
	});

	map.addSource('geojson', {
	"type": "geojson",
	"data": geojson
	});

	map.addLayer({
	"id": "countries",
	"type": "fill",
	"source": "geojson",
	"paint": {
	"fill-color": {
	"property": "pop_est",
	"type": "interval",
	"stops": stops
	}
	}
	}, "country-label-lg");

	document.getElementById('radio-group').addEventListener('change', function(e) {
	map.setPaintProperty('countries', 'fill-color', {
	"property": "pop_est",
	"colorSpace": e.target.id,
	"stops": stops
	});
	});

	map.on('mousemove', function(e) {
	var features = map.queryRenderedFeatures(e.point, {
	layers: ['countries']
	});

	// Change the cursor style as a UI indicator.
	map.getCanvas().style.cursor = (features.length) ? 'pointer' : '';

	if (!features.length) {
	popup.remove();
	return;
	}

	var feature = features[0];
	var props = feature.properties;

	// Populate the popup and set its coordinates
	// based on the feature found.
	popup.setLngLat(e.lngLat)
	.setText(props.name + ' pop: ' + feature.properties.pop_est.toLocaleString())
	.addTo(map);
	});
	}
	</script>

	</body>
	</html>