d3.js TypeError null is not and object Geojson

Question

I am trying to create a map in d3.js using census block coordinates stored in a database. The d3 code is:

<script type="text/javascript" src="./d3.v3.js"></script>
<script type="text/javascript">
var path = d3.geo.path();
d3.json("./flare3.json", function(json){
var canvas = d3.select("body").append("svg")
    .attr("height", 1500)
    .attr("width", 1500)

canvas.selectAll("path")
    .data(json.features)
    .enter()
        .append("path")
        .attr("d", path);
});
    </script>

The flare3.json file is in a documents directory that is served by a local apache server. A portion of that file is as follows:

{"type":"FeatureCollection",
"features": [{"type":"Feature",
"id": "CB120730014023015",
"geometry": {
"type":"Polygon",
"coordinates": [[[-84.299332, 30.459799],[-84.299255, 30.45977],[-84.299156, 30.459772],    `[-84.299026, 30.45977],[-84.299011, 30.459734],[-84.299019, 30.459677],[-84.299019, 30.45962],[-84.299026, 30.459557],[-84.299034, 30.459496],[-84.299072, 30.459459],[-84.29921, 30.459454],[-84.299332, 30.459499],[-84.299355, 30.459568],[-84.299339, 30.459692],[-84.299332, 30.459799]`
]]},{"type":"Feature",
"id": "CB120730013002001",
"geometry": {
"type":"Polygon",
"coordinates": [[[-84.296173, 30.444916],[-84.296196, 30.444923],[-84.296295, 30.44496],  `[-84.296387, 30.445002],[-84.296501, 30.445047],[-84.296707, 30.445145],[-84.296867, 30.44523],[-84.296989, 30.445284],[-84.297203, 30.44533],[-84.297264, 30.445356],[-84.297531, 30.445488],[-84.297585, 30.44552],[-84.297699, 30.445578],[-84.297943, 30.445686],[-84.297966, 30.4457],[-84.298096, 30.445765],[-84.298103, 30.446115],[-84.297615, 30.445866],[-84.29657, 30.44536],[-84.296104, 30.44516],[-84.295967, 30.445108],[-84.295616, 30.444979],[-84.295135, 30.444845],[-84.294846, 30.444798],[-84.294304, 30.444721],[-84.294281, 30.444717],[-84.294014, 30.444696],[-84.293961, 30.444696],[-84.293968, 30.444389],[-84.294136, 30.444408],[-84.294266, 30.444426],[-84.294296, 30.444435],[-84.294487, 30.44449],[-84.294739, 30.444523],[-84.295181, 30.444609],[-84.295334, 30.444643],[-84.295647, 30.444731],[-84.295975, 30.444841],[-84.296173, 30.444916]`
]]}
]}

I am accessing the file via localhost connection; however, I keep getting

TypeError: 'null' is not an object (evaluating 'json.features')

Can anyone tell me whether this is a problem with the json file? It looks like valid json to me?

Could be a problem with loading the file as well. – Lars Kotthoff Mar 02 '14 at 15:59 — Lars Kotthoff, Mar 02 '14 at 15:59

user13500 · Accepted Answer · 2014-03-02T16:22:33.937

You have some trailing backticks ` in your object. It also does not match up on brackets.

In general: Indent it and go over the errors.

Looking at the array each geometry object is not closed off.

It might help to simply putting it into a variable and using the console:

<!DOCTYPE html>
<head><title>Test obj</title></head>
<body>
<script type="text/javascript">
var x = {
    "type": "FeatureCollection",
    "features": 
    [
        {
            "type" : "Feature",
            "id"   : "CB120730014023015",
            "geometry": {
                "type": "Polygon",
                "coordinates": [
                    [
                        [-84.299332, 30.459799],
                        [-84.299255, 30.45977],
                        [-84.299156, 30.459772], ` // <<- Bad tick
                        [-84.299026, 30.45977],
                        [-84.299011, 30.459734],
                        [-84.299019, 30.459677],
                        [-84.299019, 30.45962],
                        [-84.299026, 30.459557],
                        [-84.299034, 30.459496],
                        [-84.299072, 30.459459],
                        [-84.29921, 30.459454],
                        [-84.299332, 30.459499],
                        [-84.299355, 30.459568],
                        [-84.299339, 30.459692],
                        [-84.299332, 30.459799]` // <<- Bad tick
                    ]
                ]
            // <<- Missing }
        },
        {
            "type": "Feature",
            "id": "CB120730013002001",
            "geometry": {
                "type": "Polygon",
                "coordinates": [
                    [
                        [-84.296173, 30.444916],
                        [-84.296196, 30.444923],
                        [-84.296295, 30.44496], ` // <<- Bad tick
                        [-84.296387, 30.445002],
                        [-84.296501, 30.445047],
                        [-84.296707, 30.445145],
                        [-84.296867, 30.44523],
                        [-84.296989, 30.445284],
                        [-84.297203, 30.44533],
                        [-84.297264, 30.445356],
                        [-84.297531, 30.445488],
                        [-84.297585, 30.44552],
                        [-84.297699, 30.445578],
                        [-84.297943, 30.445686],
                        [-84.297966, 30.4457],
                        [-84.298096, 30.445765],
                        [-84.298103, 30.446115],
                        [-84.297615, 30.445866],
                        [-84.29657, 30.44536],
                        [-84.296104, 30.44516],
                        [-84.295967, 30.445108],
                        [-84.295616, 30.444979],
                        [-84.295135, 30.444845],
                        [-84.294846, 30.444798],
                        [-84.294304, 30.444721],
                        [-84.294281, 30.444717],
                        [-84.294014, 30.444696],
                        [-84.293961, 30.444696],
                        [-84.293968, 30.444389],
                        [-84.294136, 30.444408],
                        [-84.294266, 30.444426],
                        [-84.294296, 30.444435],
                        [-84.294487, 30.44449],
                        [-84.294739, 30.444523],
                        [-84.295181, 30.444609],
                        [-84.295334, 30.444643],
                        [-84.295647, 30.444731],
                        [-84.295975, 30.444841],
                        [-84.296173, 30.444916]` // <<-Bad tick
                    ]
                ]
            }
        // <-- Missing }
    ]
}
</script>
</body>
</html>

Thanks. The backticks are not in the original data. They are a product of bad formatting on my part in submitting the question. Thanks for the suggestion of putting the data in a variable and trying that. I will do that and see what happens, since that should isolate whether the issue is json format or a file loading problem. — ELamar, Mar 02 '14 at 16:21
@ELamar: Ah, OK. That's good. I updated with some more detail/little rewrite – and better indenting. Basically it seems the `geometry` entries are not closed off. They are missing the closing `}`. In general it can help to put the code into this: http://jsbeautifier.org/ , and aftwerards use an editor with proper highlighting. It should e.g. highlight miss-aligned brackets. — user13500, Mar 02 '14 at 16:25
I deleted backticks, closed off hanging brackets and braces and put the data in a variable to run in the console. Once I did that the code executed without error, but no image displayed on the page. Would that have anything to do with needing to center the image and reference a projection? — ELamar, Mar 02 '14 at 17:26
@ELamar: It is there, it is simply to small to be viewable ;). 1x1 pixels. As a start try `.attr("stroke", "#800")` and `.attr("stroke-width", 200)` on the `canvas.selectAll ...` operation. — user13500, Mar 02 '14 at 19:17
A quick tip when working with json (and geojson) data is that you can use [jsonlint](http://jsonlint.com/) to check the format. This has saved me hours of time over the years. — user1614080, Mar 02 '14 at 21:05
@user1614080: Nice. Did not know about that one. Have some old JS hidden away somewhere doing something similar. Looks like that is one project I can leave dead ;) — user13500, Mar 02 '14 at 21:11
Have a look at these questions for some tips on how to center and scale geographic projections ([this one](http://stackoverflow.com/questions/14492284/center-a-map-in-d3-given-a-geojson-object) and [this one](http://stackoverflow.com/questions/18375473/d3js-cartography-auto-focus-on-geographic-area-svg-canvas-zoom-scale-coord)) — user1614080, Mar 02 '14 at 21:17
Thanks to all. I was able to resolve the scaling and projection and get the full dataset up and viewable. Thanks also for the jsonlint reference; it should no doubt help me speed things along in the future! — ELamar, Mar 02 '14 at 21:43

d3.js TypeError null is not and object Geojson

1 Answers1