README.md

<Map />

import { Map } from 'ihme-ui'

<Map /> is a composition of <Choropleth /> and <ChoroplethLegend />. It provides a mesh-filter-based implementation for displaying disputed territories. In order to take advantage of this feature, your topojson must conform to the following requirements:

• geometries that are disputed must have two array of ids on their properties object on keys named claimants and admins.
  • claimants: Location ids that claim the disputed location.
  • admins: Location ids that administer data for the disputed location.
  • while the above ids must correspond to the props.geometryKeyField in non-disputed geometries, disputed geometries themselves should not have a property assigned to the props.geometryKeyField.

See it in action!

Property	Required	Type(s)	Defaults	Description
ariaHideScatterGroup	false	boolean	whether or not the scatter group should be hidden from screen readers.
ariaLabelMap	true	string	''	the string describing the map for screen readers
axisTickFormat		func		format of axis ticks implicitly defaults to numberFormat
className		CommonPropTypes.className		className applied to outermost wrapping div
colorAccessor		string, func		if string, the color property of the datum object; if function, takes in datum object and returns a color string.
colorSteps		array	defaultColorSteps.slice().reverse()	list of hex or rbg color values color scale will interpolate between these values defaults to list of 11 colors with blue at the "bottom" and red at the "top" this encodes IHME's "high numbers are bad" color scheme
data	true	array		array of datum objects
domain	true	array		domain of color scale
focus		object		The datum object corresponding to the <Shape /> currently focused.
focusedClassName		CommonPropTypes.className		className applied if <Shape /> has focus.
focusedStyle		CommonPropTypes.style		inline styles applied to focused <Shape /> If an object, spread into inline styles. If a function, passed underlying datum corresponding to its <Shape />, and return value is spread into inline styles; signature: (datum) => obj
extentPct		array	[0, 1]	[minPercent, maxPercent] of color scale domain to place slider handles
geometryKeyField	true	string, func		uniquely identifying field of geometry objects; if a function, will be called with the geometry object as first parameter N.B.: the resolved value of this prop should match the resolved value of props.keyField e.g., if data objects are of the following shape: { location_id: , mean: } and if features within topojson are of the following shape: { type: , properties: { location_id: }, arcs: } keyField may be one of the following: 'location_id', or (datum) => datum.location_id geometryKeyField may be one of the following: 'location_id' or (feature) => feature.properties.location_id
keyField	true	string, func		unique key of datum; if a function, will be called with the datum object as first parameter
legendClassName		CommonPropTypes.className		classname applied to div containing choropleth legend
legendMargins		object	{ top: 20, right: 50, bottom: 0, left: 50, }	margins passed to <ChoroplethLegend /> subtracted from width and height of <ChoroplethLegend />
legendStyle		object		inline style object applied to div containing choropleth legend
legendAriaHideTickMarks		boolean	true	Whether or not tick marks in the legend should be hidden from screen readers.
loading		bool	false	is data for this component currently being fetched will prevent component from updating (a la shouldComponentUpdate) if true
mapClassName		CommonPropTypes.className		className applied to div directly wrapping <Choropleth />
mapStyle		CommonPropTypes.style		inline styles applied to div directly wrapping <Choropleth />
onClick		func		event handler passed to both choropleth and choropleth legend; signature: (SyntheticEvent, datum, Path) => {...}
onMouseLeave		func		event handler passed to both choropleth and choropleth legend; signature: (SyntheticEvent, datum, Path) => {...}
onMouseMove		func		event handler passed to both choropleth and choropleth legend; signature: (SyntheticEvent, datum, Path) => {...}
onMouseOver		func		event handler passed to both choropleth and choropleth legend; signature: (SyntheticEvent, datum, Path) => {...}
onSetScale		func		callback for "Set scale" button; passed current rangeExtent (in data space) as first and only argument signature: ([min, max]) => {...}
onSliderMove	true	func		callback function to attach to slider handles; passed [min, max] (Array), the range extent as a percentage signature: ([min, max]) => {...}
onResetScale	true	func		callback for "Reset" button; passed current rangeExtent (in data space) as first and only argument rangeExtent in this case will always equal this.props.domain signature: (domain) => {...}
selectedLocations		array of object	[]	array of selected location objects
sliderHandleFormat		func		format of slider handle labels implicitly defaults to numberFormat
style		object		inline styles applied to outermost wrapping div
title		string		title positioned on top of choropleth in semi-opaque div that spans the full width of the component
titleClassName		CommonPropTypes.className		className applied to div wrapping the title
titleStyle		object		inline styles applied to div wrapping the title
topojsonObjects		array of string	['national']	array of keys on topology.objects (e.g., ['national', 'ADM1', 'health_districts']); if a key on topology.objects is omitted, it will not be rendered if including disputed territories as separate layer, the disputes layer must be last in the array. E.g.: ['admin0', 'admin1', 'admin2', 'disputes']
topology	true	object		preprojected topojson; for more information, see the topojson wiki
unit		string		unit of data; used as axis label in choropleth legend
valueField	true	string, func		key of datum that holds the value to display (e.g., 'mean') if a function, signature: (data, feature) => value
zoomControlsClassName		object, string		className applied to controls container div
zoomControlsStyle		object		inline styles to apply to controls buttons