Datentaeter - Consumer Price Index

Interative Globe

by Marie-Louise Timcke

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js"></script>
<script src="https://www.workshape.io/js/geo/d3.geo.zoom.js"></script>
<div id="header" style='font-size: 20pt; color: salmon;'>Consumer Price Index</div>
<div ng-app="myglobe">
<div ng-controller="values" style='font-size: 15pt; color: grey;'>
        <globe data="data"></globe>
    </div>   
<p style='font-size: 8pt; color: salmon;'>Marie-Louise Timcke. Data source: <a style='font-size: 8pt; color: salmon;' href="http://www.numbeo.com/cost-of-living/rankings_by_country.jsp">numbeo.com</a></p>

CSS

svg {
    width: 100%
}
path {
    fill: none;
    stroke: grey
}

.oceanandborder {
  fill: #b1e6e6;
  stroke-width: 2.0px;
  stroke: grey;
  cursor:grab;
}

.graticule {
    stroke: #BDBDBD;
    stroke-width: .4px;
}

.countries {
    cursor: pointer;
}

.countries .value {
    fill: #ef3b2c;
    fill-opacity: 0;
}

.countries .overlay {
    fill: white;
}
* {
    font-family: "Arial Black";
}

JavaScript

var globusapp = angular.module("myglobe", []);
    globusapp.directive("globe", function() {
        return {
            restrict   : 'E', // for element

            template: 
            '<div class="globe-wrapper">' +
                '<div class="globe"></div>' +
                '<div class="info"></div>' +
            '</div>',
            link: url
        };
        
        function url(scope, element) {
            var width = 450, height = width, 
                features,
                mapdata = 'https://gist.githubusercontent.com/jasondavies/4183701/raw/b85ba7c13a8efa07779c6aef49f2fa0cc6656cf6/readme-world-110m.json',
               zoom;
            
            projection = d3.geo.orthographic()
                .translate([width / 2, height / 2]) //anpassen
                .scale(220) // zoom
                .clipAngle(90) // Größe des Globus 
                .rotate([10, -25]); //startpunkt
            
            path = d3.geo.path()
                .projection(projection); 
            
            svg = d3.select(element[0]).select('.globe')
                 .append('svg')
                 .attr('width', width)
                 .attr('height', height)
                 .attr('viewBox', '0, 0, ' + width + ', ' + height);
           
            features = svg.append('g');
            
            features.append('path')
                .datum({type: 'Sphere'})
                .attr('class', 'oceanandborder')
                .attr('d', path);
            
            graticule = d3.geo.graticule();

            features.append('path')
              .datum(graticule)
              .attr('class', 'graticule')
              .attr('d', path);
              
// drehen beim grap und mittiges einpendeln beim klick            
            zoom = d3.geo.zoom()
              .projection(projection)
               .on('zoom.redraw', function(){
                svg.selectAll('path').attr('d',path);  
              });
            
           ...