Draw Circle on Map D3
Maps Fabricated Like shooting fish in a barrel with D3
Introduction
D3 is a powerful and flexible visualization library for JavaScript, and its visualizations are not limited to bar charts and pie graphs. Geospatial information is normally represented on a map. D3 provides a complete API for generating, displaying, and interacting with geospatial data in online visualizations. This guide volition explicate how to return online maps using D3.
The Ingredients
To piece of work with maps in D3, you lot need to acquire about three ideas:
If y'all've been working with D3, you've come across generators to make shapes. It turns out that the generators used by D3 are shape generators. They are a special kind of shape generator that coverts GeoJSON data into SVG shapes. But what is GeoJSON?
GeoJSON
Y'all probably know what JSON is. And you probably have an thought most what 'Geo' implies. So it should come as no surprise that GeoJSON is a standard for representing geographical data in JSON. And from GeoJSON, D3 tin create shapes that correspond maps. At that place are lots of places to get GeoJSON data. One of the simplest is to generate it yourself at https://geojson.io.
This straightforward interface lets you generate GeoJSON information from shapes drawn on meridian of a map. To demonstrate, zoom in on the state of Utah in the United States.
I picked Utah for two reasons. First, it is the abode land of Pluralsight, and 2d, its borders are direct lines, making information technology like shooting fish in a barrel to draw. Now, using the line tool, draw the outline of the land. To complete the shape, click again on the kickoff point. In the epitome below, I started on the tiptop left corner and went counter-clockwise.
The completed line in chosen a feature and is stored in the features array in the GeoJSON. As y'all draw the lines, the coordinates are stored in the GeoJSON in the coordinates key for the feature. In the properties central, yous can add metadata for the characteristic, such as a name .
Pluralsight is located in Farmington, Utah, just north of Table salt Lake City. Zoom in to Common salt Lake Urban center (just southeast of the Slap-up Salt Lake). You'll see Farmington on Interstate 15.
Apply the marker tool to place a marker on Farmington and add another feature to the GeoJSON.
After adding a name indentifying the new feature, salve the GeoJSON to a file.
Projections
A projection is a function that takes the latitude and longitude coordinates in the GeoJSON file and converts them into x-y coordinates that D3 can use to depict shapes. If this sounds hard, that'south because it is, but D3 provides a number of functions to do the projections for you.
For case, the Mercator projection is ofttimes used for maps considering a constant path is always a direct line. Here is what the GeoJSON for Utah looks like with a Mercator projection.
The project part is available in the d3 npm bundle.
1 import * every bit d3 from 'd3' ; 2 3 let projection = d3 . geoMercator ( ) ; javascript
If you switch to the equal conic project, the shape is distorted. Only the relative area between features is constant.
The lawmaking to create information technology is similar to the previous sample.
1 permit projection = d3 . geoConicEqualArea ( ) ; javascript
At that place are a large number of projections in D3. A complete listing is bachelor from the documentation online.
Generators
The generator will use the features in the GeoJSON to create shapes based on the project.
1 d3 . json ( "../data/utah.geojson" ) . and then ( geodata => { ii let projection = d3 . geoConicEqualArea ( ) three . fitSize ( [ 360 , 480 ] , geodata ) ; 4 allow generator = d3 . geoPath ( ) . projection ( projection ) ; 5 d3 . select ( "g.map" ) vi . selectAll ( "path" ) 7 . data ( geodata . features ) 8 . join ( "path" ) 9 . attr ( "d" , generator ) x . attr ( 'stroke' , '#000' ) eleven . attr ( 'fill' , '#fff' ) 12 } ) ; javascript
This code generates the previous sample. The GeoJSON information is read with the json function. Information technology is as well used to adjust the the geometry of a projection so that it will fit in a certain area. The generator is created with the geoPath method and the projection is practical to it. Then you tin take D3 create the map by selecting an element, passing the features from the GeoJSON, and using the generator to supply the coordinates of the point to the d attribute. The make full and stroke attributes are cosmetic.
Striking Testing
To get a more authentic map, there are many sources of GeoJSON online. Here is a map of the U.s.a. generated from a GeoJSON file from the PublicaMundi repository on Github.
Maps can exist interactive. Say you want to bank check if the mouse is clicked inside of state boundaries. It is easy to get the coordinate of a mouse click.
1 d3 . select ( 'g.map' ) 2 . on ( 'mousedown' , function ( ) { iii console . log ( d3 . mouse ( this ) ) ; iv } ) ; javascript
The d3.mouse method will render the ten-y coordinates relative to the map element. The problem is that you will likely need the latitude and longitude. The projection function volition convert the x-y coordinate to latitude and longitude. Calling invert on the project will reverse the process.
ane d3 . select ( 'yard.map' ) 2 . on ( 'mousedown' , function ( ) { 3 console . log ( projection . invert ( d3 . mouse ( this ) ) ) ; 4 } ) ; javascript
With the latitude and longitude of the mouse click, you now need to go the boundaries of a state and check if the mouse coordinates are inside of it. Like many tasks in geospatial analysis, this is hard. Merely D3 gives you an API to make it uncomplicated. First yous need to get the feature itself. The features are just objects, and each has a name property corresponding to the country proper noun.
1 var feature_utah = geodata . features . find ( two f => f . properties . name === 'Utah' 3 ) ; javascript
To perform the striking test, use the geoContains function and pass information technology the features and the coordinates. Information technology volition return a Boolean true if the coordinates are in the feature.
1 panel . log ( d3 . geoContains ( feature_utah , coords ) ) ; javascript
It's besides easy to generate a circle at the indicate the mouse was clicked. The geoCircle method will generate a circle shape at the specified coordinates.
1 var circle = d3 . geoCircle ( ) 2 . center ( coords ) iii . radius ( 0.5 ) ; javascript
The circle represents a GeoJSON object, which volition be converted to an SVG path string when passed to the generator . That SVG can be appended to the path of the map.
1 d3 . select ( 'g.map' ) 2 . suspend ( 'path' ) 3 . attr ( 'd' , generator ( circle ( ) ) ) ; javascript
Conclusion
This guide showed you how to work with GeoJSON to render online maps in JavaScript with D3. The D3 API provides objects and methods to handle the circuitous work of geospatial analysis. Equally y'all saw, part of the challenge of creating a geospatial visualization is getting the accurate map data. There are lots of repositories and databases online where you can get GeoJSON information. You can also convert other formats, including shapefiles, to GeoJSON.
You also saw how projections allow you convert between 2d coordinates and latitude and longitude. This makes it possible to create interactive geospatial visualizations. You learned how to check if a point is contained within a GeoJSON feature and how to add shapes to a map past generating GeoJSON objects and adding them to an SVG path.
Source: https://www.pluralsight.com/guides/maps-made-easy-with-d3
0 Response to "Draw Circle on Map D3"
Post a Comment