Rendering a map

Hi everyone! I’m new here and new to d3. Glad to be here I’m working on a project and I am trying to render a map of massachusetts so that I can use it to play around and practice some interactions. However, nothing I have tried seems to display the map.
Backstory: I got the GIS data from mass[dot]gov and used to convert the shp files into geojson and topojson files. However, after importing the data and defining the projections and all I need, the map doesnt render. I’ve tried forking different notebooks that work and using my data there but it still doesnt work. I don’t know if my problem is the data or my methods, and I’ll appreciate it if someone can help take a look. Thanks

Inspecting the SVG with the debugger it looks like there are issues with way the svg is made, lots of NAN

Adding to the shows one pie chart. But doesnt fix the nans

// map showing the counties/zips with the most popular restaurants
projection = d3
  .parallels([34 + 2 / 60, 35 + 28 / 60])
  .rotate([118, 0])
  .center([34, 35])
  .translate([width / 2, height / 2])
  .clipExtent([[0, 0], [width, height]])

Adding a stroke colour might also help.

     .attr('d', path)
      .attr('stroke', '#00F')

This notebook might also be of help. Massachusetts Coronavirus Cases by Town / Harris Lapiroff / Observable

Hello Ofure,

looking at the coordinates in the counties_geo file it appears that they are already projected in a metric space (X, Y), and not (longitude, latitude). So the projection to use to display them should be d3.geoIdentity().reflectY(true) (we need to reflect vertically because svg’s coordinate system has y going “down”, but metric projections have y pointing “up”).

OTOH the mass_restos file uses longitudes and latitudes, so you might have a hard time adjusting two different projections. If you can find the exact definition for the original shape file’s projection (often called a CRS), it would definitely help.

1 Like

Thank you so much @hellonearthis for this. I’m not really sure how to fix the SVG but I was wondering why using this code that you shared, I see a pie chart now and not the shape of the state of massachusetts. I’m a bit confused as to what is being rendered.

1 Like

Omggg. So I was using the wrong projection all along! Thanks for pointing that out. I was also wondering why the coordinates were strange-looking and not in (lat,long) format. I now understand that are projected in a metric space and not in (lat,long).

OTOH I have a file with the .prj extension and I assume it is supposed to be for the projection, but I dont have the CRS file. I’ll try to see if I can get one. Thank you so much, @Fil

yes the prj file should give you the projection definition, which you can apply with proj4; see for example Using proj4js with d3 / Fil / Observable

1 Like