Skip to main content
100%

US State Map

✓ Published0🌍 Public
CCoola85
Last edited Aug 1, 2018
Created on Aug 1, 2018

This interactive map of the United States uses D3 v3 to render state boundaries as SVG paths from the included `uStates.js` data file. Each state is colored according to randomly generated sample statistics—low, average, and high values—using an interpolated color scale from light yellow to dark red. Hovering over a state triggers a CSS-based tooltip that displays the state's name and its low, average, and high values in a styled HTML table. The map animates state fills on hover with a subtle opacity change, while the tooltip follows the cursor, providing a clean and informative way to explore the data.

AI-generated description

forked from <a href='http://bl.ocks.org/NPashaP/'>NPashaP</a>'s block: <a href='http://bl.ocks.org/NPashaP/a74faf20b492ad377312'>US State Map</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

US State Map

This example shows a choropleth-style interactive map of the United States built with D3 v3. Each state is drawn as an SVG path from the included `uStates.js` GeoJSON-like data, and its fill color is determined by randomized sample data generated on the fly. Hovering over a state triggers a custom tooltip that displays low, average, and high values for that state, with hover effects changing fill opacity. The map is rendered in an SVG container with a fixed size, and the tooltip follows the cursor using absolute positioning. The dataset is based on West Nile virus case reports, though the visualization itself uses synthetic data for demonstration. The project is forked from a series of related blocks and is released under the GPL-3.0 license.# US State Map This interactive choropleth visualization presents a color-coded map of the United States, with each state shaded to represent data values and displaying detailed information on hover. ## Visualization Description The visualization displays a complete map of the contiguous United States, Alaska, and Hawaii, with each state colored using a yellow-to-dark-red sequential color scale (interpolated from "#ffffcc" to "#800026") based on sample data values. States appear as outlined gray polygons that respond to user interaction. **Interaction:** When users hover over a state, it becomes semi-transparent and a dark tooltip appears, showing the state's abbreviation and a small table with three statistics: Low, Average, and High values. **Data:** The map visualizes sample data for each US state, with low, average, and high values used to encode the color intensity. While the current implementation uses randomly generated data, the accompanying WestNile.csv dataset suggests the visualization could display West Nile virus statistics—including neuroinvasive and non-neuroinvasive disease cases, total cases, deaths, and presumptive viremic blood donors per state. **Design:** The visualization encodes data through a sequential color scale interpolated from light yellow ("#ffffcc") to dark red ("#800026"), where the color intensity represents the average value. The geographic layout uses the standard US state map with state boundaries drawn in grey. Hovering over a state triggers a tooltip that displays the state name along with low, average, and high values for the selected metric. Animated transitions provide visual feedback during state selection. The implementation is built with D3 v3, reading state path data from a JavaScript file, and the tooltip is implemented as an HTML overlay that appears on mouseover. Files: index.html, uStates.js, WestNile.csv </body> </html> (this text was cut off, and additional files may be needed to fully reproduce the visualization) Please describe the full URL (path) to the data file(s) used in this example. The final answer should just be a data path, with no additional prose.WestNile.csv

HHeywhoyou22
84% match