0.0.5 • Published 3 years ago
@plotdb/pdmap-world v0.0.5
pdmap-world
World map in D3js and ISO 3166 country code.
Usage
include required JS files:
<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>
<script src="path-to-your-pdmap-world.js"></script>
then, init with following:
p = new pdmapWorld({ ... })
p.init().then(function() { p.fit(); ... })
country paths will be added under a SVG g
element with pdmap-world
class. pdmap-world only draws countries. To further visualize your data, you have to do it yourself, such as:
# if you call `p.set` first:
d3.select(root).selectAll("path")
.attr "fill", (d,i) ~>
v = d.properties.value or 0
if v <= 0 => return \#eee
"rgb(#{255 * (d.properties.value or 0) / p.range!},0,0)"
# or bind data with country yourself:
d3.select(root).selectAll("path")
.attr "fill", (d,i) ~>
v = data[d.properties.alpha2]
if v <= 0 => return \#eee
"rgb(#{255 * (v) / max},0,0)"
Constructor options
root
: container element.excludes
: Array of country identifiers ( see below ). countries listed here will not be shown.includes
: Array of country identifiers ( see below ). countries not listed here will not be shonw.- when
includes
is set,excludes
will be ignored.
- when
padding
: padding space between container and map shapes.popup
: handler called when mouse hovering on shapes.
API
init()
: initialization.set(hash)
: set values for each country. country name as key in hash, value as value in hash.range()
: get[minimal, maximal]
values fromset
calls.allCountries()
: get a list of all countries.fit()
: fix map to size of container.findCountry(n)
: return a country object according to country identifiern
( see below )
Country Identifiers
There are many ways to identify a country. Here we use following identifiers:
- iso 3166 country code, including:
- Alpha-2 code ( e.g.,
KP
for North Korea,GB
for United Kingdon. ) - Alpha-3 code ( e.g.,
USA
for United States,JPN
for Japan ) - Short name ( e.g.,
Afghanistan
,Congo (the)
) - Numeric ( e.g.,
156
for China,524
for Nepal )
- Alpha-2 code ( e.g.,
- Common name in zh-TW ( e.g.,
阿爾巴尼亞
,波希尼亞及赫塞哥維那
)
Following is an example to refer some countries with a list, which can be used as excludes
/ includes
option:
["KP", "USA", "Afghanistan", 156, "波希尼亞及赫塞哥維那"]
All codes are case insensitive.
Data Resources
- map data: natural-earth-vector
- country code: iso 3166 country codes
License
- Code: MIT
- Data:
- map data: Public Domain
- country code: should be(?) Public Domain