d3.js TypeError null is not and object Geojson

StackOverflow https://stackoverflow.com/questions/22129647

  •  19-10-2022
  •  | 
  •  

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?

Was it helpful?

Solution

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>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top