Observable+Vega and GeoJSON

Community Help
1

Iam having huge issues with Vega and geoJSON foles and would appreciate some pointers. I have several issues.

  1. I can’t seem to get the vector file to situate properly in the canvas. ! have been trying to adapt Mike Bostock’s basic map tutorial that uses a topoJson file for areas and a csv file with [long,lat] for points. I have a line vector layer in both geoJSON and topoJSON format and I can bring in and render either - but using VEGA I get a huge amount of whitespace on the top of the canvas. I have no idea why. (Using straight d3 renders correctly, but there I can use fitExtent() and everything is happy.) What am I doing wrong?
  2. For the point data, how do I reference the geometry[].coordinates array that has the lat,long ? (it’s not called lat/long in the geoJson file. ) The json file was generated by qGIS.
    2b. If i give up and put the point data into a .csv, Observable hangs and then gives me the block unhappy face with no explanation.

Workbooks are public: https://observablehq.com/@drlynb/starting-from-the-basics-reimagining-my-code-from-mike-bost (starting from scratch) and https://observablehq.com/@drlynb/drawing-maps-from-geodata-with-d3-observable(has the correctly rendered line map).

Why am I using VEGA? I am teaching non-programmers using Vega as a scaffold, and before I completely give up I’d like to know what I am doing wrong.

2

The us10 file will load if you use a proxy such as
https://cors-anywhere.herokuapp.com

The first image will be positioned properly if you center it on a point closer to the streets:
d3.geoCentroid(Streets) => [-123.10677808530241, 49.248477050114715]

For the second image it will not break if you take the scale down. But you will see two clumps of data very far from one another — I’m not sure how to read the csv into vega as geopoints — I’ve removed them to fix the map.

1 Like
3

Mille remerciments, I so appreciate it.
The points map correctly in mapshaper, and qGIS. I am going to try them in straight d3. working with your changes now!