npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

replot-map

v0.3.0

Published

Map chart components for Replot

Downloads

7

Readme

replot-map: Map charts for react

Intelligent and customizable map chart components for react.

Installation

Only works with React projects. React must be installed separately.

npm install replot-map

Then with a module bundler like webpack/browserify that supports CommonJS/ES2015 modules, use as you would anything else.

import {Map} from 'replot-map'

API

replot-map is designed to create beautiful map charts right out of the box. The only required inputs are properly formatted data and svg paths of your map.

Basic Usage

In the simplest case, just supply data and svg paths (as Javascript arrays) and specify the keys for geocodes and weights of data and IDs and titles of paths:

render() {
    let populations = [
        {"code": "US-AL", "population": 4853875},
        {"code": "US-AK", "population": 737709},
        {"code": "US-AZ", "population": 6817565},
        ...
    ]

    let paths = [
    	  {"ID":"US-AK", "name":"Alaska", "d":"M456.18,...,731.03z"},
        {"ID":"US-AL", "name":"Alabama", "d":"M955.38,...,481.61z"},
        {"ID":"US-AZ", "name":"Arizona", "d":"M533.89,...,320.29z"},
        ...
    ]

    return(
        <Map data={populations}
            geoCode="code"
            weightKey="population"
            paths={paths}
            pathIDKey="ID"
            pathTitleKey="name"
        />
    )
}
  • data and paths are the only required props
  • geoCode defaults to "ID"
  • weightKey defaults to "weight"
  • pathIDKey defaults to "id"
  • pathTitleKey defaults to "title"

ScreenshotDefaultUSA

You can also import our complimentary svg map paths:

import {Map, USA} from 'replot-map'
render() {
    let populations = [
        {"code": "US-AL", "population": 4853875},
        {"code": "US-AK", "population": 737709},
        {"code": "US-AZ", "population": 6817565},
        ...
    ]

    return(
        <Map data={populations}
            geoCode="code"
            weightKey="population"
            paths={USA}
        />
    )
}

If you're using our complimentary map paths, do not specify pathIDKey or pathTitleKey.

Our complimentary map paths currently support 243 countries and regions. See the list of all supported countries/regions.

Dimensions

Dimensions may be specified by passing in width prop with a number, in the unit of pixels.

render() {
  return(
    <Map data={populations} paths={USA} width={600} />
  )
}
  • width defaults to 800

Width dimensions may also be specified with a string, as a percentage. The width will then be calculated as a proportion of the parent container.

render() {
  return(
    <Map data={populations} paths={USA} width="60%" />
  )
}

Default (800px) | width={600} | width="60%"
:-------------------------:|:-------------------------:|:-------------------------: ScreenshotDefaultWidth | ScreenshotWidth600px | ScreenshotWidth60%

Height dimension will be adjusted automatically to best match the width, fitting the entirity of map without skewing the original aspect ratio.

Zoom

You may zoom into a specific area of map by passing in zoomID and zoomScale props. The Map will be centered on the area specified by zoomID, scaled up by zoomScale. Original dimensions of the Map will be preserved.

render() {
  return(
    <Map data={populations} paths={USA} zoomID="US-TX" zoomScale={2} />
  )
}
  • zoomID defaults to null
  • zoomScale defaults to 1

If zoomScale is passed in, but zoomID is not, the Map will be scaled up from its top left corner by zoomScale.

Default |zoomID={null} zoomScale={2}|zoomID="US-TX" zoomScale={2}
:-------------------------:|:-------------------------:|:-------------------------: ScreenshotDefault | ScreenshotZoomIDNullScale2 | ScreenshotZoomIDTexasScale2

Color

Colors may be specified by passing in colorRangeLow and colorRangeHigh props. The Map is colored with the gradient in the range of colorRangeLow to colorRangeHigh, from the smallest to the largest weight.

render() {
  return(
    <Map data={populations} paths={USA} colorRangeLow="#ffffff" colorRangeHigh="#ff4c4c" />
  )
}
  • colorRangeLow defaults to "#ffffff"
  • colorRangeHigh defaults to "#225588"

Default |colorRangeLow="#ffffff" colorRangeHigh="#ff4c4c"
:-------------------------:|:-------------------------: ScreenshotDefault | ScreenshotColorHighFF4C4CLowFFFFFF

Coloring Regions with No Data

Color of the regions with no data may be specified by passing in noDataColor prop.

render() {
  return(
    <Map data={populations} paths={USA} noDataColor="red" />
  )
}
  • noDataColor defaults to the value of colorRangeLow

Opacity of the regions with no data may be specified by passing in noDataOpacity prop.

render() {
  return(
    <Map data={populations} paths={USA} noDataOpacity={0.1} />
  )
}
  • noDataOpacity defaults to 0.5

Default (No data for California) |noDataColor="red" |noDataOpacity={0.1} :-------------------------:|:-------------------------:|:-------------------------: ScreenshotNoDataDefault | ScreenshotNoDataColorRed | ScreenshotNoDataOpacity0.1

Scale

Users can control the scale of the Map coloring, linear or logarithmic.

  • scale defaults to "lin" for linear scale, can be "log" for logarithmic scale:
render() {
  return(
    <Map data={populations} paths={USA} scale="log" colorRangeLow="#ffffff" colorRangeHigh="#225588" />
  )
}

Default (scale="lin") | scale="log"
:-------------------------:|:-------------------------: ScreenshotDefault | ScreenshotScaleLog

User-provided Color function

Users can also specify a function to assign colors to different areas by passing in colorFunc prop. Expected arguments to the function are the geocode and weight for each area.

function customColor(geocode, weight) {
  if (weight > 5000000) {
    return "#225588"
  } else {
    return "#ffffff"
  }
}

render() {
  return(
    <Map data={populations} paths={USA} colorFunc={this.customColor} />
  )
}

When colorFunc is specified, legend is hidden and noDataColor defaults to #ffffff.

ScreenshotColorFunction

Legend

Title of legend may be specified by passing in legendTitle prop.

render() {
  return(
    <Map data={populations} paths={USA} legendTitle="Populations" />
  )
}
  • legendTitle defaults to null and no title is shown.

Default Legend | legendTitle="Populations" :-------------------------:|:-------------------------: ScreenshotDefaultLegend | ScreenshotLegendTitle

Tooltip

Tooltips can display more specific information about a data series.

render() {
  return(
    <Map data={populations} paths={USA} tooltip={true} tooltipColor="light" />
  )
}
  • tooltip defaults to true, false turns the tooltip off
  • tooltipColor defaults to light, it can be set to light or dark
  • tooltipContents defaults to data associated with the location (title, weight)

Default (tooltipColor="light")|tooltipColor="dark"|tooltip={false}
:-------------------------:|:-------------------------:|:-------------------------: ScreenshotDefaultTooltip | ScreenshotTooltipDark | ScreenshotTooltipOff

User-provided Tooltip Function

Users can customize what is displayed inside the tooltip with a function. Expected arguments to the function are the title of the location and the data for the specific location hovered over. The function should return JSX.

fillTooltip(title, data){
  return(
    <div>
      <span>The name of this location is {title}.</span><br/>
      <span>The data for this location looks like: {JSON.stringify(data)}</span>
    </div>
  )
}

render() {
  return(
    <Map data={populations} paths={USA} tooltipContents={this.fillTooltip} />
  )
}

ScreenshotTooltipCustom

Supported Countries and Regions

  • AFGHANISTAN
  • ALBANIA
  • ALGERIA
  • AMERICAN_SAMOA
  • ANDORRA
  • ANGOLA
  • ANGUILLA
  • ANTIGUA_BARBUDA
  • ARGENTINA
  • ARMENIA
  • ARUBA
  • AUSTRALIA
  • AUSTRIA
  • AZERBAIJAN
  • BAHAMAS
  • BAHRAIN
  • BANGLADESH
  • BARBADOS
  • BELARUS
  • BELGIUM
  • BELIZE
  • BENIN
  • BERMUDA
  • BHUTAN
  • BOLIVIA
  • BOSNIA_HERZEGOVINA
  • BOTSWANA
  • BRAZIL
  • BRITISH_VIRGIN_ISLANDS
  • BRUNEI_DARUSSALAM
  • BULGARIA
  • BURKINA_FASO
  • BURUNDI
  • CAMBODIA
  • CAMEROON
  • CANADA
  • CAPE_VERDE
  • CARIBBEAN_NETHERLANDS
  • CAYMAN_ISLANDS
  • CENTRAL_AFRICAN_REPUBLIC
  • CHAD
  • CHANNEL_ISLANDS
  • CHILE
  • CHINA
  • CHRISTMAS_ISLAND
  • COCOS_ISLANDS
  • COLOMBIA
  • COMOROS
  • CONGO_DR
  • CONGO
  • COOK_ISLANDS
  • COSTA_RICA
  • CROATIA
  • CUBA
  • CURACAO
  • CYPRUS
  • CZECH_REPUBLIC
  • DENMARK
  • DJIBOUTI
  • DOMINICA
  • DOMINICAN_REPUBLIC
  • EAST_TIMOR
  • ECUADOR
  • EGYPT
  • EL_SALVADOR
  • EQUATORIAL_GUINEA
  • ERITREA
  • ESTONIA
  • ETHIOPIA
  • FALKLAND_ISLANDS
  • FAROE_ISLANDS
  • FIJI_EAST
  • FIJI_WEST
  • FINLAND
  • FRANCE
  • FRENCH_GUIANA
  • FRENCH_POLYNESIA
  • GABON
  • GAMBIA
  • GEORGIA
  • GERMANY
  • GHANA
  • GIBRALTAR
  • GREECE
  • GREENLAND
  • GRENADA
  • GUADELOUPE
  • GUAM
  • GUATEMALA
  • GUINEA_BISSAU
  • GUINEA
  • GUYANA
  • HAITI
  • HONDURAS
  • HONG_KONG
  • HUNGARY
  • ICELAND
  • INDIA
  • INDONESIA
  • IRAN
  • IRAQ
  • IRELAND
  • ISLE_OF_MAN
  • ISRAEL
  • ITALY
  • IVORY_COAST
  • JAMAICA
  • JAPAN
  • JERSEY
  • JORDAN
  • KAZAKHSTAN
  • KENYA
  • KIRIBATI
  • KOSOVO
  • KUWAIT
  • KYRGYZSTAN
  • LAOS
  • LATVIA
  • LEBANON
  • LESOTHO
  • LIBERIA
  • LIBYA
  • LIECHTENSTEIN
  • LITHUANIA
  • LUXEMBOURG
  • MACAO
  • MACEDONIA
  • MADAGASCAR
  • MALAWI
  • MALAYSIA
  • MALDIVES
  • MALI
  • MALTA
  • MARSHALL_ISLANDS
  • MARTINIQUE
  • MAURITANIA
  • MAURITIUS
  • MAYOTTE
  • MEXICO
  • MICRONESIA
  • MOLDOVA
  • MONACO
  • MONGOLIA
  • MONTENEGRO
  • MONTSERRAT
  • MOROCCO
  • MOZAMBIQUE
  • MYANMAR
  • NAMIBIA
  • NAURU
  • NEPAL
  • NETHERLANDS
  • NEW_CALEDONIA
  • NEW_ZEALAND
  • NICARAGUA
  • NIGER
  • NIGERIA
  • NIUE
  • NORTHERN_MARIANA_ISLANDS
  • NORTH_KOREA
  • NORWAY
  • OMAN
  • PAKISTAN
  • PALAU
  • PALESTINE
  • PANAMA
  • PAPUA_NEW_GUINEA
  • PARAGUAY
  • PERU
  • PHILIPPINES
  • PITCAIRN_ISLANDS
  • POLAND
  • PORTUGAL
  • PUERTO_RICO
  • QATAR
  • REUNION
  • ROMANIA
  • RUSSIA
  • RWANDA
  • SAINT_MARTIN
  • SAINT_PIERRE_MIQUELON
  • SAMOA
  • SAN_MARINO
  • SAO_TOME_PRINCIPE
  • SAUDI_ARABIA
  • SENEGAL
  • SERBIA
  • SEYCHELLES
  • SIERRA_LEONE
  • SINGAPORE
  • SINT_MAARTEN
  • SLOVAKIA
  • SLOVENIA
  • SOLOMON_ISLANDS
  • SOMALIA
  • SOUTH_AFRICA
  • SOUTH_KOREA
  • SOUTH_SUDAN
  • SPAIN
  • SRI_LANKA
  • ST_HELENA
  • ST_KITTS_NEVIS
  • ST_LUCIA
  • ST_VINCENT
  • SUDAN
  • SURINAME
  • SVALBARD_JAN_MAYEN
  • SWAZILAND
  • SWEDEN
  • SWITZERLAND
  • SYRIA
  • TAIWAN
  • TAJIKISTAN
  • TANZANIA
  • THAILAND
  • TIBET
  • TOGO
  • TOKELAU
  • TONGA
  • TRINIDAD_AND_TOBAGO
  • TUNISIA
  • TURKEY
  • TURKMENISTAN
  • TURKS_CAICOS_ISLANDS
  • TUVALU
  • UGANDA
  • UKRAINE
  • UNITED_ARAB_EMIRATES
  • UNITED_KINGDOM
  • URUGUAY
  • USA
  • US_VIRGIN_ISLANDS
  • UZBEKISTAN
  • VANUATU
  • VENEZUELA
  • VIETNAM
  • WALLIS_FUTUNA
  • WORLD
  • YEMEN
  • ZAMBIA
  • ZIMBABWE