d3byex · November 25, 2015 23:34
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
    <meta name="description" content="D3byEX 12.14" />
    <meta charset="utf-8">
 </head>
 <body>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="http://d3js.org/topojson.v1.min.js"></script>
        <script>
        var width = 1000, height = 728;

        var zoom = d3.behavior.zoom()
            .scaleExtent([1, 5])
            .on('zoom', moveAndZoom);

        var svg = d3.select('body')
            .append('svg')
            .attr({
                width: width,
                height: height
            })
            .call(zoom);
        var mainGroup = svg.append('g');

        var url = 'https://gist.githubusercontent.com/d3byex/65a128a9a499f7f0b37d/raw/176771c2f08dbd3431009ae27bef9b2f2fb56e36/world-110m.json';
        d3.json(url, function (error, world) {
            var projection = d3.geo.mercator()
                .scale((width + 1) / 2 / Math.PI)
                .translate([width / 2, height / 2]);
            var path = d3.geo.path().projection(projection);

            var countries = topojson.feature(world, world.objects.countries).features;
            var neighbors = topojson.neighbors(world.objects.countries.geometries);

            var color = d3.scale.category20();
            mainGroup.selectAll('path', 'countries')
                .data(countries)
                .enter()
                .append('path')
                .attr('d', path)
                .attr('fill', function (d, i) {
                    return color(d.color = d3.max(neighbors[i],
                        function (n) { return countries[n].color; }) + 1 | 0);
                });
        });

        function moveAndZoom() {
            var t = d3.event.translate;
            var s = d3.event.scale;

            var x = Math.min(
                (width / height) * (s - 1),
                Math.max(width * (1 - s), t[0]));

            var h = height / 4;
            var y = Math.min(
                h * (s - 1) + h * s,
                Math.max(height * (1 - s) - h * s, t[1]));

            mainGroup.attr('transform', 'translate(' + x + ',' + y + ')scale(' + s + ')');
        }
    </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="D3byEX 12.14" />
	<meta charset="utf-8">
	</head>
	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://d3js.org/topojson.v1.min.js"></script>
	<script>
	var width = 1000, height = 728;

	var zoom = d3.behavior.zoom()
	.scaleExtent([1, 5])
	.on('zoom', moveAndZoom);

	var svg = d3.select('body')
	.append('svg')
	.attr({
	width: width,
	height: height
	})
	.call(zoom);
	var mainGroup = svg.append('g');

	var url = 'https://gist.githubusercontent.com/d3byex/65a128a9a499f7f0b37d/raw/176771c2f08dbd3431009ae27bef9b2f2fb56e36/world-110m.json';
	d3.json(url, function (error, world) {
	var projection = d3.geo.mercator()
	.scale((width + 1) / 2 / Math.PI)
	.translate([width / 2, height / 2]);
	var path = d3.geo.path().projection(projection);

	var countries = topojson.feature(world, world.objects.countries).features;
	var neighbors = topojson.neighbors(world.objects.countries.geometries);

	var color = d3.scale.category20();
	mainGroup.selectAll('path', 'countries')
	.data(countries)
	.enter()
	.append('path')
	.attr('d', path)
	.attr('fill', function (d, i) {
	return color(d.color = d3.max(neighbors[i],
	function (n) { return countries[n].color; }) + 1 \| 0);
	});
	});

	function moveAndZoom() {
	var t = d3.event.translate;
	var s = d3.event.scale;

	var x = Math.min(
	(width / height) * (s - 1),
	Math.max(width * (1 - s), t[0]));

	var h = height / 4;
	var y = Math.min(
	h * (s - 1) + h * s,
	Math.max(height * (1 - s) - h * s, t[1]));

	mainGroup.attr('transform', 'translate(' + x + ',' + y + ')scale(' + s + ')');
	}
	</script>
	</body>
	</html>