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

Nuxt: Delaying Loading of Google Maps in VueJS Until Data is Fully Prepared

What is the most effective method for implementing COPY/INSERT functionality with cascading effects in PostgreSQL?

What is the correct method for downloading an Excel file in a Vue.js application?

To update the JSON values in a YAML file using Python, you can embed the JSON within the YAML

React - callbackFromApp function is executing only one time when clicked

Utilizing Vue.js to apply conditional statements or filters on v-for generated outputs

How can a loading circle be displayed upon clicking a button on a PHP website using JavaScript?

Embed the website onto a webpage using ajax or an iframe without any need for navigation

Display a loading dialog when an AJAX request is made

Steps for generating an array entry containing an ObjectId and a Number

Utilizing variable values in Google Charts with AngularJS

Please elaborate on the appropriate application of angularjs Directives in this specific scenario

Unusual behavior encountered with JSON, exploring the scope of a JavaScript variable

Understanding the mechanics of utilizing node modules and requiring them within an Express 4 router

Merging data sets with Javascript: A comprehensive guide

Refreshing Form in Angular 2

The React callback is failing to update before navigating to the next page

What might be the reason for npm live-server to cease detecting file updates?

Is there a way to trigger the animation of this text effect only when the mouse is scrolled to that specific section?

Is there a foolproof way to generate JSON data using PHP?