Components!

<custom-element>

This is really just a test of the custom element template. Click on it and its text should change to a random number.

123

<eiti-map>

The <eiti-map> type extension renders an SVG geographic map by loading one or more "data layers" defined by <g> elements with data-url attributes.

Just render the states and their mesh

Click on a state in this map to zoom

A more complex example with linked states and county mesh

Attributes

data-path="prefix"
String: the common path to data files of the contained layers. This is appended as a prefix onto each layer's data-url URI.
projection="name"
String: D3 projection name. If not provided, the default is albersUsa.
zoom-to="id"
String: the ID of the feature to zoom to.

<eiti-slider>

The <eiti-slider> element provides a horizontal slider control with the following attributes and corresponding properties:

value="0"
Number: the value
min="0"
Number: the minimum value
max="100"
Number: the maximum value
snap
Boolean: whether to snap to round values

This text should indicate the value when changed:

And this input should both reflect the current value and modify the slider when changed. It should not be possible to set values outside of the slider's min and max.

Click anywhere on the slider to change its value, or click and drag to change it as the mouse (or touch cursor) moves. You should also be able to focus the slider handle with the tab key and using the left and right arrows to move the slider.