D3 Examples - Map of US cities and state poverty levels

Map of US cities and state poverty levels

This maps demonstrates some features of the svgmap library. Here, a perspective map of the United States is shown along with some cities sized by population (taken from geonames.org) and the poverty level per state (taken from Guardian Data Blog).

The map is created using:

svgmap regions USA --proj satellite --lat0 29 --lon0 -80 --dist 1.5

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
<title>hello svgmap</title>
<script src="https://svgmap.github.com/lib/jquery.min.js"></script>
<script src="https://svgmap.github.com/lib/raphael-min.js"></script>
<script src="https://svgmap.github.com/svgmap.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script>
​
    $(function() {
        
        window.mymap = new svgmap.SVGMap('#map');
        mymap.loadMap('USA-sat.svg', function() {
​
            mymap.addLayer('USA','bg');
            mymap.addLayer('USA','fg');
            
            // load poverty data
            $.ajax({
                url: 'us-poverty.json',
                success: function(poverty) {
                    var data = []
                    for (var i in poverty) {
                        var state = poverty[i];
                        state.hasc = 'US.'+state.code;
                        data.push(state)
                    }
                    mymap.choropleth('fg', data, 'hasc', 'poverty');
                }
            });
            
            // load us cities
            $.ajax({
                url: 'cities.json',
                success: function(cities) {
                    var m = svgmap.marker
                    for (var c in cities) {
                        var city = cities[c];
                        var rad = Math.sqrt(city[3]/8175133)*15+1;
                        var ll = new svgmap.LonLat(city[1], city[2]);
                        var marker = new m.DotMarker(ll,city[0],rad);
                        mymap.addMarker(marker);
                    }
                }
            });
        });
            
    });
</script>
</head>
<body>
    <div id="map">
        
    </div>
</body>
</html>
​
    