This is a
playground to test code. It runs a full
Node.js environment and already has all of
npm’s 400,000 packages pre-installed, including
us-state-map with all
npm packages installed. Try it out:
This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.
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.
The main components are:
The main map component. It has props:
stateColors: Map<string, string>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.)
stateTitles?: Map<string, string>Optional map of stateCode (i.e. 'AL', 'DC', 'TX', etc.) to the label on the tooltip.
stateSelectedCallback?: (stateCode: string) => voidOptional callback when a state is tapped. Argument passed is the stateCode (i.e. 'AL', 'DC', 'TX', etc.)
stateClearedCallback?: () => voidOptional callback when a part of the map that is not a state is tapped.
isCartogram: booleanWhether the map is a cartogram (state sizes roughly proportional to population) or not.
x?: numberOptional offset in the x direction for the map. Defaults to 0.
y?: numberOptional offset in the y direction for the map. Defaults to 0.
width: numberWidth of the map. 900 seems like a good value.
height: numberHeight of the map. 500 seems like a good value.
onError: (error: any) => voidCallback that is called when there's an error loading data.
A slider that can display months or years. It has props:
ticksPerYear?: numberThe 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
yearsPerTickshould be defined (the other should be undefined)
yearsPerTick?: numberThe number of years per tick, if a tick covers multiple years. Exactly one of this and
ticksPerYearshould be defined (the other should be undefined)
TickDateRangeof the first tick of the slider.
TickDateRangeof the last tick of the slider.
TickDateRangeof the current tick.
onTickDateRangeChange: (tickDateRange: TickDateRange) => voidCallback called when the tick changes (whether the user changes it or it automatically advances because it's playing)
hidePlay?: booleanWhether to hide the Play/Stop button and speed controls. Default is to show them.
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
yearsPerTick, although I expect most applications will set these to be constants so your code can assume what they are.
It has properties:
endYear: numberThe ending year that this date range represents.
endMonth: numberThe ending month that this date range represents. Note that this is 0-indexed, so 0=January and 11=December.