Exciting news!Announcing our $4.6M Series Seed. Learn more
Socket
LoveBlogFAQ
Install
Log in

@redsift/d3-rs-geo

Package Overview
Dependencies
9
Maintainers
19
Versions
11
Issues
File Explorer

Advanced tools

@redsift/d3-rs-geo

Generates geo maps using D3v4.

    0.1.5latest

Version published
Maintainers
19
Yearly downloads
4,466
increased by5.11%

Weekly downloads

Readme

Source

d3-rs-geo

d3-rs-geo presents a TopoJSON map in an SVG container.

Builds

Circle CI npm MIT

Example

View @redsift/d3-rs-geo on Codepen

Flat map

World map

Map with country coloring and great arcs

World map with links

Interrupted projection with points of interest

Interrupted Homolosine projection

USA highlighting states

USA with states

Stylized Europe

Funky europe

Usage

Browser

<script src="//static.redsift.io/reusable/d3-rs-geo/latest/d3-rs-geo.umd-es2015.min.js"></script> <script> var chart = d3_rs_geo.html(); d3.select('body') .datum('https://static.redsift.io/thirdparty/topojson/examples/world-50m.json') .call(chart); </script>

ES6

import { html as chart } from "@redsift/d3-rs-geo"; let eml = chart(); ...

Require

var chart = require("@redsift/d3-rs-geo"); var eml = chart.html(); ...

Datum

Datum can be one of:

  1. String representing the URL to load the TopoJSON file for the map from
  2. Object representing the TopoJSON itself
  3. Object with key url (URL to load the TopoJSON file) and optionally the keys points and links

Points

Represents points of interest on the map. [ [ longitude, latitude ] ... ]

Points - Custom presentation

Default presentation uses a symbol. You can supply a custom symbol i.e. object that implements a draw function as per https://github.com/d3/d3-shape#symbol_type or supply a totally custom reusable component via the pointsDisplay property.

// Display a text label instead of the default symbol. var points = [ [ -76.852587, 38.991621, 'NY' ], [ -0.076132, 51.5074, 'London' ] ]; function displayText(selection) { selection.each(function(d, i) { let node = select(this).selectAll('text').data([ d ]); node = node.enter().append('text').merge(node); node.text(d[2]); }); } var chart = d3_rs_geo.html().points(points).pointsDisplay(displayText); d3.select('body') .datum('https://static.redsift.io/thirdparty/topojson/examples/world-50m.json') .call(chart);

Represents great arcs between two points. [ [ longitude-1, latitude-1, longitude-2, latitude-2 ] ... ]

Default presentation uses a dashed line.

// Display a solid red line var links = [ [ -76.852587, 38.991621, -0.076132, 51.5074 ] ]; function redLine(selection) { selection.attr('stroke', 'red').attr('stroke-width', '2px'); } var chart = d3_rs_geo.html().links(links).linksDisplay(redLine); d3.select('body') .datum('https://static.redsift.io/thirdparty/topojson/examples/world-50m.json') .call(chart);

onClick(d,i,c)

Click handler for map interactions. d will be the object of the interaction from the TopoJSON data structure. E.g. if the click was on a country, d will be an object and d.id will be the ISO_3166-1 country code.

d will be null if the click was outside a country boundary.

Performance checklist

As setup in the examples, the drawing of the map involves a number of heavy operations.

  1. Downloading the specified topojson data set.
  2. Parsing the data set.
  3. Applying the projection to convert the data into paths where the paths represent the landmass and/or the political boundaries of the planet.
  4. Performing a standard D3 enter()/update()/exit() pattern for the paths.
  5. Rendering the additional points and links on the map.

While this is all done relatively efficiently (once the JSON is in the network cache, a 110m world map will compute in ~200ms on a fast desktop), reducing the amount of work that needs to be done will improve performance, reduce energy consumption and free cycles for the rest of the application. You can do this by:

  1. Use a topojson that provides the appropriate level of detail for your application. The 50m resolution version of the world https://static.redsift.io/thirdparty/topojson/examples/world-50m.json is ~750kb of JSON while the 110 meter resolution version https://static.redsift.io/thirdparty/topojson/examples/world-110m.json is ~ 100kb. The 110m version obviously does not capture outlines and smaller islands as accurately.
  2. Load the topojson once and parse the parsed javascript object to the chart via the datum indead of using the URL reference.
  3. Once your map is rendered and you do not intend the change the topology of the map itself, you can supress logic associated with refreshing the paths by setting redrawTopology to false e.g. you may use this when updating data points on the same map.

Parameters

PropertyDescriptionTransition
classedString SVG custom class.N
width, height, size, scaleInteger SVG container sizes.Y
backgroundString Change the colour of the SVG background.Y
themeString Change the graph theme, includes 'light'(default) and 'dark'.Y
marginNumber Change the margin inside of the SVG container.Y
graticuleNumber Opacity of the graticule (line grid). Range between 0 and 1.N
projectionString Change projection view of the world map. Default set to geoPatterson. The available world projection can be on found the D3 geo library github webpage.Y
projectionScaleNumber Change the projection scale of the world map.Y
interruptedBoolean Enabled clipping for interrupted projections. Default set to true.N
geometryString Set the country geometry Parameters land;display the entire country geometry , states; display each state of the country, countries; display each countries.N
fillString Change the land filling colour. Parameter colour name, rgb colour or hex colour.Y
points(Array of)Number Add points on the map using decimal expression of [ Longitude, Latitude ].N
pointsDisplayFunction, String Supply custom symbol of the plotted points i.e. object that implements a draw function or supply a totally custom reusable component via the pointDisplay property. Default set to symbolWye*N
links(Array of)Number Links each points. Parameter include an arrays of points connecting the link.Y
linksDisplayFunction, String Supply custom presentation to the dashed line.
zoomNumber Zoom into the map. Default set to 1.0.Y
zoomX, zoomYNumber Zoom into the map at x-coordinate (zoomX) and Y-coordinate (zoomY).Y
onClickFunction Handler for a click event on a data series.N
redrawTopologyBoolean When drawing the map, redraw the topology too
negativeString Color for the negative space in the map i.e. typically the water. When interrupted is set to false, this does not display and the background color shows through
boundaryString Color for the boundaries between country polygons

Keywords

Socket

Product

Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc