d3byex · November 25, 2015 22:40
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
    <meta name="description" content="D3byEX 12.13" />
    <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 = 1024, height = 728;
        var svg = d3.select('body')
            .append('svg')
            .attr({
                width: width,
                height: height
            });
        var url = 'https://gist.githubusercontent.com/d3byex/65a128a9a499f7f0b37d/raw/176771c2f08dbd3431009ae27bef9b2f2fb56e36/world-110m.json';
        d3.json(url, function (error, world) {
            var projection = d3.geo.orthographic()
                .scale(300)
                .clipAngle(90)
                .translate([width / 2, height / 2])
                .rotate([90, -40]);
            var path = d3.geo.path().projection(projection);

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

            var graticule = d3.geo.graticule();
            svg.append('path')
                .datum(graticule)
                .attr('d', path)
                .style({
                    fill: 'none',
                    stroke: '#777',
                    'stroke-width': '.5px',
                    'stroke-opacity': 0.5
                });

            var color = d3.scale.category20();
            svg.selectAll('.country')
                .data(countries)
                .enter()
                .append('path')
                .attr('d', path)
                .style('fill', function (d, i) {
                    return color(d.color = d3.max(neighbors[i],
                        function (n) { return countries[n].color; }) + 1 | 0);
                });
        });
    </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="D3byEX 12.13" />
	<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 = 1024, height = 728;
	var svg = d3.select('body')
	.append('svg')
	.attr({
	width: width,
	height: height
	});
	var url = 'https://gist.githubusercontent.com/d3byex/65a128a9a499f7f0b37d/raw/176771c2f08dbd3431009ae27bef9b2f2fb56e36/world-110m.json';
	d3.json(url, function (error, world) {
	var projection = d3.geo.orthographic()
	.scale(300)
	.clipAngle(90)
	.translate([width / 2, height / 2])
	.rotate([90, -40]);
	var path = d3.geo.path().projection(projection);

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

	var graticule = d3.geo.graticule();
	svg.append('path')
	.datum(graticule)
	.attr('d', path)
	.style({
	fill: 'none',
	stroke: '#777',
	'stroke-width': '.5px',
	'stroke-opacity': 0.5
	});

	var color = d3.scale.category20();
	svg.selectAll('.country')
	.data(countries)
	.enter()
	.append('path')
	.attr('d', path)
	.style('fill', function (d, i) {
	return color(d.color = d3.max(neighbors[i],
	function (n) { return countries[n].color; }) + 1 \| 0);
	});
	});
	</script>
	</body>
	</html>