D3 Examples - Planetary Grid

Planetary Grid
Hexakis icosahedron planetary grid with highlighted KML places using toGeoJSON. Mouse over and click on place for more information. Alternative versions: Rotating Planetary Grid and Hexakis Icosahedron.
Hexakis icosahedron implementation based on mbostock’s block #3055104
Planetary grid inspired by Bethe Hagens
Places mostly based on Simon E. Davies design
KML data based on this map
TopoJSON country map data based on Interactive Map with d3.js article
xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
    .cool-point {
        fill: none;
        stroke: #33e;
        stroke-width: 1.5;
        stroke-opacity: 0.33;
    }
​
    .hot-point {
        fill: none;
        stroke: #f33;
        stroke-width: 1.5;
        stroke-opacity: 0.33;
    }
​
    .balance-point {
        fill: none;
        stroke: #333;
        stroke-width: 1;
        stroke-opacity: 0.33;
    }
​
    .graticule {
        fill: none;
        stroke: #333;
        stroke-width: 0.125;
        stroke-opacity: 0.66;
    }
​
    .cool-edge {
        fill: none;
        stroke: #33e;
        stroke-width: 1.5;
        stroke-opacity: .25;
    }
​
    .hot-edge {
        fill: none;
        stroke: #f33;
        stroke-width: 1.5;
        stroke-opacity: .25;
    }
​
    .balance-edge {
        fill: none;
        stroke: #333;
        stroke-width: 1;
        stroke-opacity: .25;
    }
​
    .country {
        fill: #ddd;
        stroke-width: 0.5;
        stroke-opacity: .75;
        stroke: #fff;
    }
​
    .place {
        fill: #666;
        fill-opacity: 0.87;
        stroke-width: 0.75;
        stroke-opacity: 0.87;
        stroke: #444;
    }
​
    .place-pyramid {
        fill: #ff0;
        stroke-width: 1;
        stroke: #444;
    }
​
    .place-megalith {
        fill: #88f;
        stroke-width: 1;
        stroke: #444;
    }
​
    .place-temple {
        fill: #f0f;
        stroke-width: 1;
        stroke: #444;
    }
​
    .place-mound {
        fill: #4c4;
        stroke-width: 1;
        stroke: #444;
    }
​
    .place-volcano {
        fill: #f44;
        stroke-width: 1;
        stroke: #444;
    }
​
</style>
<body>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js"></script>
<script src="togeojson.js"></script>
<script src="/darosh/raw/2fe464efd794bde5ed68/hexakis-icosahedron.js"></script>
<script>
    var width = 960, height = 500;
​
    var projection = d3.geo
            .mercator()
            .translate([width / 2, height / 2 + 30])
            .scale(153);
​
    var projectionLines = d3.geo
            .mercator()
            .rotate([33, 0, 0])
            .translate([width / 2, height / 2 + 30])
            .scale(153);
​
    var path = d3.geo.path()
            .projection(projection);
​
    var pathLines = d3.geo.path()
            .projection(projectionLines);
​
    var svg = d3.select('body').append('svg').attr('width', width).attr('height', height);
​
    svg.append('path').datum(d3.geo.graticule()).attr('class', 'graticule').attr('d', path);
    var countries = svg.append('path').attr('class', 'country');
    var h = d3.geo.hexakisIcosahedron;
    svg.append('path').datum(h.icosahedronEdges).attr('class', 'cool-edge').attr('d', pathLines);
    svg.append('path').datum(h.hexakisCenterEdges).attr('class', 'hot-edge').attr('d', pathLines);
    svg.append('path').datum(h.hexakisSideEdges).attr('class', 'balance-edge').attr('d', pathLines);
    svg.append('path').datum(h.icosahedronPoints).attr('class', 'cool-point').attr('d', pathLines);
    svg.append('path').datum(h.hexakisCenterPoints).attr('class', 'hot-point').attr('d', pathLines);
    svg.append('path').datum(h.hexakisCrossPoints).attr('class', 'balance-point').attr('d', pathLines);
​
    d3.json('countries.json', function (topo) {
        var p = topojson.feature(topo, topo.objects.countries);
        countries.attr('d', path(p));
    });
​
    d3.xml('places.kml', function (xml) {
        var g = toGeoJSON.kml(xml);
​
        svg.selectAll('a')
                .data(g.features)
                .enter()
                .append('a')
                .attr('xlink:href', function (d) {
                    return 'https://www.google.com/maps/@' +
                            d.geometry.coordinates[1] + ',' + d.geometry.coordinates[0]
                            + ',12z';
                })
                .attr('target', '_blank')
                .append('path')
                .attr('class', function (d) {
                    return 'place place-' + d.properties.description;
                })
                .attr('transform', function (d) {
                    var p = path.centroid(d);
                    return 'translate(' + p[0] + ',' + p[1] + ')';
                })
                .attr('d', function (d) {
                    var t = {
                        megalith: 'square',
                        temple: 'cross',
                        mound: 'triangle-up',
                        pyramid: 'triangle-up',
                        place: 'circle',
                        undefined: 'circle'
                    };
​
                    var s = t[d.properties.description] === 'circle' ? 24 : 40;
​
                    return d3.svg.symbol().size(s).type(t[d.properties.description])();
                })
                .append('title').text(function (d) {
            return d.properties.name;
        });
    });
</script>
​
    