Planetary Grid Browser I

Planetary grid by William Becker and Beth Hagens
Places mostly based on Simon E. Davies design
Location data based on this map
Controls: Left/Right and Esc

Canvas version: Planetary Grid Browser II

<!DOCTYPE html>
<meta charset="utf-8">
<title>Planetary Grid I</title>
<link rel="stylesheet" href="style.css">
<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="/darosh/raw/2fe464efd794bde5ed68/hexakis-icosahedron.js"></script>
<script src="/darosh/raw/2d12a584a14910032ab8/togeojson.js"></script>
<script src="config.js"></script>
<script src="utils.js"></script>
<script src="globe.js"></script>
<script src="map.js"></script>
<script src="legend.js"></script>
<script src="list.js"></script>
<script src="info.js"></script>
<script>
    (function () {
        'use strict';

var widthList = 220;
        var margin = 12;
        var widthScrollBar = self.frameElement ? 0 : 20;
        var widthScreen = Math.max(document.body.clientWidth || 0, 960) - widthScrollBar;
        widthScreen = Math.min(1480, widthScreen);
        var heightScreen = Math.max(500, widthScreen / (960 / 480));
        margin = widthScreen > 960 ? margin * 2 : margin;
        var widthGlobe = 200;
        var heightGlobe = 200;

if (heightScreen > 660) {
            widthGlobe = 280;
            heightGlobe = 280;
        }

var widthLegend = 140;
        var widthMap = widthScreen - Math.max(widthLegend, widthGlobe / 2) - 2 * margin;
        var heightMap = heightScreen - heightGlobe / 2 - 2 * margin;
        var selected;

var cfg = new Config();

cfg.url = 'https://bl.ocks.org/darosh/14e2e4e14898f13e13c7';

var svg = d3.select('body').append('svg')
                .attr('width', widthMap + Math.max(widthLegend, widthGlobe / 2) + 2 * margin)
                .attr('height', heightMap + heightGlobe / 2 + 2 * margin);

var map = new SvgMap(svg, widthMap, heightMap, margin, cfg);

var legend = new SvgLegend(svg.append('g')
                .attr('transform', 'translate(' + [widthMap + margin + cfg.lineMid, margin] + ')'),
                cfg, clickedLegend
        );

cfg.filter = legend.lookFilter;

var globe = new SvgGlobe(svg.append('g')
                .attr('transform', 'translate(' + [widthMap - widthGlobe / 2 + margin, heightMap - heightGlobe / 2 + margin] + ')'),
                widthGlobe, heightGlobe, cfg
        );

var info = new HtmlInfo(d3.select('body').append('div')
                .style('position', 'absolute')
                .style('left', (2 * margin) + 'px')
                .style('top', (2 * margin) + 'px')
                .style('border', cfg.frameLineWidth + 'px solid ' + cfg.colors.frame)
                .style('padding', (cfg.titleSize * 0.75) + 'px')
                .style('min-width', (cfg.titleSize * 8) + 'px')
                .style('background-color', cfg.colors.bg),
                cfg
        );

var controls = svg.append('g')
                .attr('transform', 'translate(' + [margin * 1.5, heightMap + margin * .5 - 22] + ')');

Utils.svgControls(controls, setIndex, map.reset);

var list = new SvgList(svg.append('g')
                .attr('transform', 'translate(' + [margin, (heightMap + margin + cfg.lineMid)] + ')'),
                cfg, widthMap - widthGlobe / 2, widthList,
                function (h) {
                    h = heightMap + h + 3 * margin;
                    svg.attr('height', h);
                    d3.select(self.frameElement).style('height', h + 'px');
                },
                selectedPlace
        );

map.clickedPoint = function (p) {
            selectedPlace(p);
        };

map.onZoomed = globe.setZoom;
        globe.onZoomed = map.setZoom;
        globe.canZoom = function (i) {
            var p = map.projection(i);
            return !isNaN(p[0]) && !isNaN(p[1]);
        };

if (self.frameElement) {
            self.frameElement.focus();
        }

d3.select('body').on('keydown', function () {
            var i = null;

if (d3.event.keyCode === 37) {
                i = -1;
            } else if (d3.event.keyCode === 39) {
                i = +1;
            } else if (d3.event.keyCode === 27 && selected) {
                selectedPlace(selected);
            }

if (i !== null) {
                setIndex(i);
            }
        });

d3.json('mercator-countries.json', function (topo) {
            topojson.presimplify(topo);
            map.countries.datum(topojson.mesh(topo, topo.objects.countries)).attr('d', map.path);
        });

d3.json('mercator-land.json', function (topo) {
            topojson.presimplify(topo);
            map.land.datum(topojson.feature(topo, topo.objects.land)).attr('d', map.path);
        });

d3.json('land.json', function (topo) {
            globe.land.datum(topojson.feature(topo, topo.objects.land)).attr('d', globe.pathRaw);
        });

d3.xml('/darosh/raw/2d12a584a14910032ab8/places.kml', function (xml) {
            var geo = toGeoJSON.kml(xml);

Utils.parsePlaces(geo);

if (list) {
                list.update(geo);
            }

cfg.filtered = geo.features;

map.placesSelection = Utils.svgPlaces(map.g, geo, map.pathRaw, 1.25, cfg, selectedPlace);
        });

function clickedLegend(d) {
            map.root.selectAll('.' + d.key).style('display', d.off ? 'none' : null);
            globe.root.selectAll('.' + d.key).style('display', d.off ? 'none' : null);
            list.filter(legend.lookShapes);

if (!d.off) {
                globe.update();
                map.update();
            }
        }

function selectedPlace(d) {
            list.selection(selected, d);

if (d === selected) {
                d = null;
            }

globe.selection = d;

if (d === null) {
                globe.updateSelection();
            }

info.update(d);
            selected = d;
            map.zoomTo(d, info.size);
        }

function setIndex(i) {
            var f = cfg.filtered;
            var c = f.indexOf(selected);
            c = c === -1 ? 0 : (c + i);
            c = (c + f.length) % f.length;

if (list) {
                list.selection(selected, f[c]);
            }

info.update(f[c]);
            globe.selection = f[c];

setTimeout(function () {
                map.zoomTo(f[c], info.size);
            }, 50);

selected = f[c];
        }
    })();
</script>
</body>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js

https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js