usStateMap

React component for displaying colors on a US state map. Available on npm as us-state-map.

See the included app for usage, or see stateElectionMap for another example.

Note: You must copy the files in public/data to your app's public/data directory. (issue #2 is looking for a better way to handle this)

The main components are:

USStateMap

The main map component. It has props:

• stateColors: Map<string, string | ColorGradient> Map of stateCode (i.e. 'AL', 'DC', 'TX', etc.) to what color it should be. Any CSS color should work (examples: 'red', '#123456', 'rgb(100, 200, 0)', etc.) Instead of a string, you can specify a ColorGradient.
• stateTitles?: Map<string, string> Optional map of stateCode (i.e. 'AL', 'DC', 'TX', etc.) to the label on the tooltip.
• stateSelectedCallback?: (stateCode: string) => void Optional callback when a state is tapped. Argument passed is the stateCode (i.e. 'AL', 'DC', 'TX', etc.)
• stateClearedCallback?: () => void Optional callback when a part of the map that is not a state is tapped.
• isCartogram: boolean Whether the map is a cartogram (state sizes roughly proportional to population) or not.
• x?: number Optional offset in the x direction for the map. Defaults to 0.
• y?: number Optional offset in the y direction for the map. Defaults to 0.
• width: number Width of the map. 900 seems like a good value.
• height: number Height of the map. 500 seems like a good value.
• onError: (error: any) => void Callback that is called when there's an error loading data.

DateSlider

A slider that can display months or years. It has props:

• ticksPerYear?: number The number of ticks per year, if a year is made up of multiple ticks. If this is defined it should be divisible by 12 (i.e. 1, 2, 3, 4, 6, or 12) Exactly one of this and yearsPerTick should be defined (the other should be undefined)
• yearsPerTick?: number The number of years per tick, if a tick covers multiple years. Exactly one of this and ticksPerYear should be defined (the other should be undefined)
• startTickDateRange: TickDateRange The TickDateRange of the first tick of the slider.
• endTickDateRange: TickDateRange The TickDateRange of the last tick of the slider.
• currentTickDateRange: TickDateRange The TickDateRange of the current tick.
• onTickDateRangeChange: (tickDateRange: TickDateRange) => void Callback called when the tick changes (whether the user changes it or it automatically advances because it's playing)
• hidePlay?: boolean Whether to hide the Play/Stop button and speed controls. Default is to show them.
• initialSpeed?: DateSpeedSliderEnum The initial speed of the slider. Default is Normal
• cssProps?: React.CSSProperties CSS properties to apply to the div containing the slider. Default is {width: 500}

TickDateRange

Represents a date range of a tick on the slider. The year and month represent the end of the range, while the beginning of the range can be calculated by looking at ticksPerYear or yearsPerTick, although I expect most applications will set these to be constants so your code can assume what they are. It has properties:

• endYear: number The ending year that this date range represents.
• endMonth: number The ending month that this date range represents. Note that this is 0-indexed, so 0=January and 11=December.