0

I'm trying to follow a similar example to Mike Bostock's county example (https://bl.ocks.org/mbostock/4122298), but I've hit a roadblock due to my d3 ignorance after working on this problem for multiple hours.

The short of it is that I would like to display my own json file in an interactive d3 map (similar to the one above with hover capabilities), and send the user to a hyperlink upon clicking on a feature.

So far I have downloaded the necessary custom shapefile (available at http://www.spc.noaa.gov/gis/svrgis-2014/zipped/County_Warning_Areas.zip) and converted it to json (after renaming) by:

shp2json cwa.shape -i cwa.json

The resulting json file is ~7 MB.

To attempt to display, I have tried various renditions of: 

    <!DOCTYPE html>
<html lang="en">
<head>
        <title>Mapping with D3</title>
        <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
        <script src="cwa.json"></script>
</head>
<body>
        <!-- Page elements and content go here. -->
        <script>
                // Width and Height of the whole visualization
        var width = 700;
        var height = 580;

        // Create SVG
        var svg = d3.select( "body" )
                .append( "svg" )
                .attr( "width", width )
                .attr( "height", height );

        // Append empty placeholder g element to the SVG
        // g will contain geometry elements
        var g = svg.append( "g" );

                // Create GeoPath function that uses built-in D3 functionality to turn
        // lat/lon coordinates into screen coordinates
        var geoPath = d3.geoPath()
                .projection( albersProjection );
        // Classic D3... Select non-existent elements, bind the data, append the elements, and apply attributes
        g.selectAll( "path" )
    .data( cwa_json.features )
    .enter()
    .append( "path" )
    .attr( "fill", "#ccc" )
    .attr( "stroke", "#333")
    .attr( "d", geoPath );
        </script>
</body>
</html>

Where cwa.json was modified at the beginning to create a variable cwa_json.

At the end of the day I would like to recreate Mike's map linked above with this json file and have the ability to hyperlink to a page on mouse click of a specific feature.

Thanks in advance for your help!

EDIT: I have also tried to convert to a topojson using:

ndjson-split 'd.features' < cwa.json > cwa.ndjson
geo2topo -n tracts=cwa.ndjson > cwa_topo.json

...and then rendering...

<!DOCTYPE html>
<style>

.counties :hover {
  fill: red;
}

.county-borders {
  fill: none;
  stroke: #fff;
  stroke-width: 0.5px;
  stroke-linejoin: round;
  stroke-linecap: round;
  pointer-events: none;
}

</style>
<svg width="960" height="600"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>
<script>

var svg = d3.select("svg");

var path = d3.geoPath();

d3.json("cwa_topo.json", function(error, us) {
  if (error) throw error;

  svg.append("g")
      .attr("class", "counties")
    .selectAll("path")
    .data(topojson.feature(us, us.objects.counties).features)
    .enter().append("path")
      .attr("d", path);

  svg.append("path")
      .attr("class", "county-borders")
      .attr("d", path(topojson.mesh(us, us.objects.counties, function(a, b) { return a !== b; })));
});

</script>
</body>
</html>

...but nothing.

wuffwuff
  • 730
  • 2
  • 9
  • 19
  • First, do you have elements added to the DOM? Second, this data is projected already - you are attempting to project projected data (see the .prj file details in your shapefile) - the d3 geoProjections take latitude/longitude values. Lastly, a 7mb file may be a bit on the heavy side (given that there can be more vertices than the file contains due to resampling lines to great arcs). – Andrew Reid May 09 '18 at 18:41
  • This is likely applicable: https://stackoverflow.com/a/42430876/7106086 – Andrew Reid May 09 '18 at 19:53

0 Answers0