Rendering a map

Community Help
1

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 mapshaper.org 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

2

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

image
image1017×205 17.2 KB

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

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

Adding a stroke colour might also help.

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

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

3

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
4

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
5

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

6

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