Old school D3 from simpler times

All examples By author By category About

rgdonohue

Full window Github gist

proportional hello kitty symbol map

This map demonstrates the technique of using a SVG icon to encode the relative magnitude of hydroelectric power generation plants in the US. Hello Kitty cares deeply about renewable energy.

WARNING: the use of this icon as a proportional symbol has not been scientifically tested.

Data source: Form EIA-860 http://www.eia.gov/electricity/data/eia860/index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset=utf-8 />
    <title>Proportional Hello Kitty Symbol Map</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.min.js"></script>

<link rel="stylesheet" href="https://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />

<style>
        body {
            margin: 0;
            padding: 0;
        }
        #map {
            position:absolute; 
            top:0; 
            bottom:0; 
            width:100%; 
        }    
    </style>
</head>

<body>
    <div id='map'></div>
    
    <script src="hydro-plants.js"></script>
    <script>

var map = L.map('map', {
            center: [41, -94],
            zoom: 4,
            minZoom: 4
        });
       
        var tiles = L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png', 
                                         {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="https://cartodb.com/attributions">CartoDB</a>',
            subdomains: 'abcd',
            minZoom: 0,
            maxZoom: 18
        });
        map.addLayer(tiles);
          
        L.geoJson(plants, {
            pointToLayer: function(feature,latlng) {
                 var size = getRadius(feature.properties.capacity);
                 return L.marker(latlng, {
                     icon: L.icon({
                        iconUrl: 'hello_kitty.svg',
                        iconSize: [size, size],
                        iconAnchor: [size/2, size/2]
                    })
                 })
            },

filter: function(feature) {
                if(feature.properties.source["Hydro"]) {
                    return feature;
                }
            }
        }).addTo(map);
           
        function getRadius(val) {
            var radius = Math.sqrt(val/Math.PI);
            return radius * 3;   
        }        
        
    </script>
    
</body>

</html>

Modified http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js to a secure url

https://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js