Display geographic data using d3 with geoJSON

Question

Display geographic data using d3 with geoJSON

I am struggling to render a geoJSON file using d3 because I am having trouble targeting the correct features for projection.

Instead of working with the typical us.json file used in many d3 examples, my current map focuses on United States "Commuting Zones" (CZ's) rather than land, states, or counties.

In my usual process, I call

topojson.feature(us, us.objects.states)

to display the correct layer. However, the file I'm currently working with is not organized into objects and does not have multiple layers. Here is an excerpt from the geoJSON file:

{"type":"FeatureCollection","bbox":[-120.30602148510043,6.667736880597216,-70.95829310710806,34.46308750538215],"features":[{"type":"Feature","geometry":{"type":"Polygon","coordinates":[[[-83.802805983004,22.64602264051764],[-83.8080569412408,22.638128812605782],

Below is the code I am using, which is not successfully rendering the map:

d3.json("CZ90.zip.geojson", function(error, us) {
    if (error) throw error;

    d3.select("svg").append("path")
        .datum(topojson.feature(us, us.CZ90))
        .attr("d", d3.geo.path());
});

Since there are no objects defined in the file, I omitted the ".object". When I view the file in Mapshaper, it renders correctly with a layer titled "CZ90", leading me to try "us.CZ90" instead of "us.objects.states"

I understand that I may be using "topojson.feature" instead of something geoJSON specific, but I have been unsuccessful in converting the file to topoJSON in Mapshaper without losing projection information.

What is the right way to target this layer in the .datum call?

This issue would be resolved if I could find a topoJSON file similar to us.json that includes a commuting zones layer!

javascript json d3.js geojson topojson

Answer 1

Answer №1

After receiving assistance from a developer friend of mine, I discovered that the solution to my problem was much simpler than I had initially thought.

It turns out that d3.json() is inherently designed to interpret the structure of my geoJSON file without requiring the use of datum(). All I needed to do was make the following call:

d3.json("CZ90.zip.geojson", function(error, geoData) {
    d3.select("svg").append("path")
        .attr("d", path(geoData));
}

Just a side note: this code snippet is based on d3.v4

Below is the complete script that successfully rendered the map:

<!DOCTYPE html>
<meta charset="utf-8">
<style>
    path {
      fill: #ccc;
      stroke: #fff;
      stroke-linejoin: round;
    }
</style>

<svg width="960" height="500"></svg>
<script src="//d3js.org/d3.v4.min.js"></script>

<script>

var width = 960;
var height = 620;

var chosenProjection = d3.geoMercator()
  .scale(600)
  .translate([1300, 450])

  var path = d3.geoPath()
    .projection(chosenProjection);

d3.json("CZ90.zip.geojson", function(error, geoData) {

  d3.select("svg").append("path")
      .attr("d", path(geoData));
});

</script>

I hope this explanation can assist others who may find themselves stuck on a seemingly simple obstacle!

Answer 2

After receiving assistance from a developer friend of mine, I discovered that the solution to my problem was much simpler than I had initially thought.

It turns out that d3.json() is inherently designed to interpret the structure of my geoJSON file without requiring the use of datum(). All I needed to do was make the following call:

d3.json("CZ90.zip.geojson", function(error, geoData) {
    d3.select("svg").append("path")
        .attr("d", path(geoData));
}

Just a side note: this code snippet is based on d3.v4

Below is the complete script that successfully rendered the map:

<!DOCTYPE html>
<meta charset="utf-8">
<style>
    path {
      fill: #ccc;
      stroke: #fff;
      stroke-linejoin: round;
    }
</style>

<svg width="960" height="500"></svg>
<script src="//d3js.org/d3.v4.min.js"></script>

<script>

var width = 960;
var height = 620;

var chosenProjection = d3.geoMercator()
  .scale(600)
  .translate([1300, 450])

  var path = d3.geoPath()
    .projection(chosenProjection);

d3.json("CZ90.zip.geojson", function(error, geoData) {

  d3.select("svg").append("path")
      .attr("d", path(geoData));
});

</script>

I hope this explanation can assist others who may find themselves stuck on a seemingly simple obstacle!

Answer 3

Answer №2

Upon reviewing the topojson documentation, it is clear that topojson.feature:

Returns the GeoJSON Feature or FeatureCollection for the specified object in the given topology. If the specified object is a GeometryCollection, a FeatureCollection is returned, and each geometry in the collection is mapped to a Feature. Otherwise, a Feature is returned.

Additionally, according to the d3 documentation, a d3 geopath:

Renders the given object, which may be any GeoJSON feature

Regarding this statement:

I realize I'm calling "topojson.feature" instead of something geoJSON specific

It should be noted that you are already using something geoJSON specific. Topojson.js is used to convert topoJSON back to geoJSON for D3 map usage. So, in response to your inquiry:

What is the correct way to target this layer in the .datum call?

The appropriate method is simply:

.datum(us) // feature collection or single feature

This will append a single path. However, if you wish to append multiple paths with the same dataset (for different coloring or mouse interaction):

.data(us.features) // feature collection

Answer 4

Upon reviewing the topojson documentation, it is clear that topojson.feature:

Returns the GeoJSON Feature or FeatureCollection for the specified object in the given topology. If the specified object is a GeometryCollection, a FeatureCollection is returned, and each geometry in the collection is mapped to a Feature. Otherwise, a Feature is returned.

Additionally, according to the d3 documentation, a d3 geopath:

Renders the given object, which may be any GeoJSON feature

Regarding this statement:

I realize I'm calling "topojson.feature" instead of something geoJSON specific

It should be noted that you are already using something geoJSON specific. Topojson.js is used to convert topoJSON back to geoJSON for D3 map usage. So, in response to your inquiry:

What is the correct way to target this layer in the .datum call?

The appropriate method is simply:

.datum(us) // feature collection or single feature

This will append a single path. However, if you wish to append multiple paths with the same dataset (for different coloring or mouse interaction):

.data(us.features) // feature collection

Display geographic data using d3 with geoJSON

Answer №1

Answer №2

Similar questions

Highcharts 3D Pie Chart with Drilldown Feature

The error message "app.use() function requires middleware function" appears when the app

Utilize PowerShell to access JSON fields by name through converting a string to JSON

Collection of various data points stored in a JSON format

Using Vue3 to set attributes on web components

tips for retrieving global variables from ajax calls using promises

Implementation of multiple angular guards causing a crash on the page

Guide to assigning IDs to multiple paragraphs within a parent element using a for loop

Using AngularJS, learn how to populate array objects within a JSON object

Transform your HTML audio player into a Vue component

The function cannot be applied to the size of the map within the action payload

The 'name' property of Axios and Vuex is not defined and cannot be read

When utilizing the array.push method, new elements are successfully added, however, it appears to also overwrite the last object

Transferring information into MySQL through an Android application

Is there a way to capture the input from the text box and store it in the local storage?

What could be causing the issue of the view not showing up in AngularJS?

Securing $_FILES Filenames in PHP

submit a new entry to add a record to the database

Ensuring Unique CSS for Diverse Devices: A User-Agent Driven Approach

Exploring ways to access elements within shadow-root (open) in Angular using SVG.js