d3-book | Code examples “ Interactive Data Visualization | Data Visualization library

If I understood correctly this is what you should need. Plunker with working code.

First of all I would encourage to use an margin object which will allow better flexibility when dealing with charts

As the previous D3 versions are not supported, it seems better to stick with V5 because that's what you should use in production for new projects. Few braking changes were introduced but they are not significant as you've noted so just keep it in mind when you come across d3.queue, d3.request, d3.schemeCategory20* or file data loading.

Two issues (based on comments below and updated question)

One is the geojson in your Flask project is not valid. For example features should be an array - not an object, type should still be featureCollection (This is discussed in the comments below). Somewhere along the line your geojson structure is changed to something that isn't accepted by d3.geo.path() as valid geojson.

Two is that you are not using a projection to convert your latitude and longitude pairs (in the geometry of each feature) to svg coordinate space.

For the second issue:

When using d3.geo.path(); you need to specify a projection (eg: d3.geo.path().projection(d3.geo.mercator());). If you do not provide a projection, a null projection is used. This interprets the provided geojson without applying any transformation - essentially your values are translated into pixel values on the svg.

The United States is in the western hemisphere, all the longitudes are therefore negative (and as north south geographic values increase as one goes north and svg y values increase as one moves down, the image will be upside down). A null projection (with no other transform on the svg) will draw a path that is to the left of your svg's boundaries. This is why these three things can happen:

• the "SVG element is being attached"
• "that the json data is coming through", but
• "the map itself is not [visually] coming up"

The geojson referenced in the chapter you reference is unprojected data - it contains a latitude and longitude pair for each vertex: [-133.05341,56.125739]. This is ideal, as a d3.geo.projection takes this type of coordinate, points on a three dimensional ellipsoid, and projects them onto a two dimensional Cartesian plane. If you had already planar data you would need to use a geo transform.

So, to visualize your data you will need to select a projection to convert latitude and longitude pairs into appropriate values. USA albers might be easiest as it is a composite projection that scales down Alaska and moves both Alaska and Hawaii closer to the continental US. The Albers USA also sets all the projection parameters to show the US without modification to projection parameters (center, rotation, parallels, scale etc), while other projections will require setting proper parameters.

I got your data to display with an albersUsa projection using the following code:

You are not setting the domain of the x scale: