geoPath returns null from geojson object

Community Help
1

hi there

i’m trying to create a map but it seems that i’m doing something wrong

here is the notebook : Untitled / tgy | Observable which is largely based on Raster & vector / D3 | Observable

my code

d3.geoPath(projection.fitWidth(width, data_geojson)).bounds(data_geojson);

is returning Infinity values

any idea of what’s going wrong?

1 Like
2

You’ve got one cell, that looks like so:

<div id="#map"></div>

And then in another cell, you’ve got the following:

const svg = d3.select("#map")
  .append("svg")

But there’s no reason to think that your first cell, with ID map is even in the DOM at that point. In fact, if you run the following in it’s own cell:

d3.select("#map").node()

I think you’ll find that you get null. I would recommend that you read through the documentation in general and, particularly How Observable runs to more fully understand that.

My recommendation would be an idiom like so:

{
  let svg = d3.create('svg')
    ...

  return svg.node();
}

You can have a look at this notebook to see how that works:

3

thanks a lot for your answer

i’m really having a hard time just plotting some dots on a map

https://observablehq.com/d/66f2cc3c30db639d

in this notebook nothing is showing on my map

i find Observable to be overly complicated so far

4

Observable is a notebook based platform that allows easy access to quite a lot of Javascript libraries. Your code uses a library called D3, which is designed largely with power and flexibility in mind. While I like and use it often, it admittedly has a reputation of having a steep learning curve. The “complications” you refer to likely arise there, rather than within Observable itself.

If you want to create data based maps on Observable using a simpler library, I’d recommend looking into Plot.geo. That link contains several examples illustrating how to plot points on a map.

If that leads to new questions, feel free to open new topics here on the forum.

1 Like
5

hi @mcmcclur thanks again for answering

i’m actually more interested in learning D3 than using Observable. although this notebook interface looks nice, especially for debugging the code.

i’m in the process of learning D3 and there is a lot of its API i’m having trouble understanding, despite being a software engineer myself