D3 JS - GeoJson (US Map) - not loading

Question

I have used the code from github (https://github.com/alignedleft/d3-book/blob/master/chapter_12/04_fill.html).

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>D3: Setting path fills</title>
        <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
        <style type="text/css">
            /* No style rules here yet */       
        </style>
    </head>
    <body>
        <script type="text/javascript">
            //Width and height
            var w = 500;
            var h = 300;
            //Define map projection
            var projection = d3.geo.albersUsa()
                                   .translate([w/2, h/2])
                                   .scale([500]);
            //Define path generator
            var path = d3.geo.path()
                             .projection(projection);
            //Create SVG element
            var svg = d3.select("body")
                        .append("svg")
                        .attr("width", w)
                        .attr("height", h);
            //Load in GeoJSON data
            d3.json("us-states.json", function(json) {

                //Bind data and create one path per GeoJSON feature
                svg.selectAll("path")
                   .data(json.features)
                   .enter()
                   .append("path")
                   .attr("d", path)
                   .style("fill", "steelblue");

            });

        </script>
    </body>
</html>

JSON file is from ( https://github.com/alignedleft/d3-book/edit/master/chapter_12/us-states.json).

Sample:

{"type":"FeatureCollection","features":[ {"type":"Feature","id":"01","properties":{"name":"Alabama"},"geometry":{"type":"Polygon","coordinates":[[[-87.359296,35.00118],[-85.606675,34.984749],[-85.431413,34.124869],[-85.184951,32.859696],[-85.069935,32.580372],[-84.960397,32.421541],[-85.004212,32.322956],[-84.889196,32.262709],[-85.058981,32.13674],[-85.053504,32.01077],[-85.141136,31.840985],[-85.042551,31.539753],[-85.113751,31.27686],[-85.004212,31.003013],[-85.497137,30.997536],[-87.600282,30.997536],[-87.633143,30.86609],[-87.408589,30.674397],[-87.446927,30.510088],[-87.37025,30.427934],[-87.518128,30.280057],[-87.655051,30.247195],[-87.90699,30.411504],[-87.934375,30.657966],[-88.011052,30.685351],[-88.10416,30.499135],[-88.137022,30.318396],[-88.394438,30.367688],[-88.471115,31.895754],[-88.241084,33.796253],[-88.098683,34.891641],[-88.202745,34.995703],[-87.359296,35.00118]]]}},...

But i'm getting an empty HTML page as output. What am i missing?

Thank you for the comment. I've added the code. – Ram Feb 20 '16 at 20:19 — Ram, Feb 20 '16 at 20:19

score 0 · Accepted Answer · answered Feb 21 '16 at 04:47

0

No i don't see any issues with the code except may be us-states.json be not available in the root folder, where your code is looking for.

You can also access the us-states.json directly from github like this:

        d3.json("https://raw.githubusercontent.com/alignedleft/d3-book/master/chapter_12/us-states.json", function(json) {

            //Bind data and create one path per GeoJSON feature
            svg.selectAll("path")
               .data(json.features)
               .enter()
               .append("path")
               .attr("d", path)
               .style("fill", "steelblue");

        });

Working code here

answered Feb 21 '16 at 04:47

Cyril Cherian

32,177
7
46
55

1

Thank you. your code worked perfect. I've placed the "us-states.json" in the same folder where the html file exists. But I'm not sure what mistake i made in the JSON file. – Ram Feb 21 '16 at 05:34
check your console what error do you see ... I think it may be CORS issue. – Cyril Cherian Feb 21 '16 at 05:53
Exactly. the error is "Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.". What has to be done in case i've to use the downloaded json file? – Ram Feb 21 '16 at 15:09
I fixed it using the below discussion "http://stackoverflow.com/questions/10752055/cross-origin-requests-are-only-supported-for-http-error-when-loading-a-local" . thank you for your help... – Ram Feb 21 '16 at 16:27

D3 JS - GeoJson (US Map) - not loading

1 Answers1