US State Map
This choropleth map of the United States visualizes state-level West Nile virus statistics from a CSV dataset, rendered with D3 v3 using SVG paths for state boundaries. The map employs a color scale—from light yellow to deep red—to encode the number of neuroinvasive disease cases per state, with hover interactions that trigger a tooltip displaying low, average, and high case counts. States are drawn as interactive SVG paths, with a grayscale stroke and a hover effect that reduces fill opacity, and the tooltip provides detailed per-state data. The visualization uses animation to enhance the hover experience, and the underlying data is also used to generate random sample metrics for additional context in the tooltip. The map is presented at 960x600 pixels, with a clean design intended for quick comparison of state-level disease burden.# US State Map
## Overview
This interactive choropleth map visualizes West Nile virus data across the United States, providing an intuitive way to compare disease metrics by state. Built with D3.js v3, the visualization renders an SVG map with hover-enabled tooltips that reveal detailed statistics for each state.
## Design & Interaction
The map employs a clean, minimalist aesthetic with light gray state borders on a white background. When users hover over a state, the fill opacity changes, providing clear visual feedback. A custom-styled dark tooltip appears near the cursor, displaying the state name along with three key data points: low, average, and high case values. The tooltip is styled with a semi-transparent black background and white text, with a tidy table layout for readability.
## Data
The visualization uses a generated sample dataset containing random values for each US state, including Washington D.C., with each state's data comprising three statistics. While the underlying data is randomly generated for demonstration purposes, the visualization is based on the 2012 West Nile virus cases dataset (included in the repository) which tracks neuroinvasive and non-neuroinvasive disease cases, total cases, deaths, and presumptive viremic blood donors for each state.
## Features
- Interactive choropleth map with hover tooltips showing low, average, and high values for each state
- Color scale from light yellow to dark red (d3.interpolate("#ffffcc", "#800026")) encodes a normalized value
- Hover states highlight with reduced opacity for better interactivity
- Uses SVG for crisp rendering and D3.js for data binding and visualization
## Implementation
The main implementation is in the `index.html` file. It loads a pre-built TopoJSON file `uStates.js` which contains the geographic boundaries for all US states. The visualization uses D3.js v3 and generates a color-coded map with interactive tooltips that display state-specific data on hover.
```javascript
// Key code pattern
uStates.draw("#statesvg", sampleData, tooltipHtml);
```
## Data
WestNile.csv - contains the 2012 West Nile virus cases by state.
Data Dictionary:
- State: US State Name
- Neuroinvasive Disease Cases: Total of cases affecting nervous system
- Non–neuroinvasive Disease Cases: Total of cases not affecting nervous system
- Total cases: Total number of cases
- Deaths: Number of deaths
- Presumptive viremic blooddonors: Number of presumptive viremic blood donors
## References
- Based on the bl.ocks block: <a href='http://bl.ocks.org/NPashaP/a74faf20b492ad377312'>US State Map</a> by <a href='http://bl.ocks.org/NPashaP'>NPashaP</a>.
</blockquote>
<hr><p>This block appears on <a href='http://bl.ocks.org/NPashaP/a74faf20b492ad377312'>bl.ocks.org</a></p>
</div>
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>
forked from <a href='http://bl.ocks.org/scresawn/'>scresawn</a>'s block: <a href='http://bl.ocks.org/scresawn/6b3e4d2bc20cf4e7856b93134aa82d5</a>
forked from <a href='http://bl.ocks.org/wenzelmk/'>wenzelmk</a>'s block: <a href='http://bl.ocks.org/wenzelmk/e643d6b795ac1160c55de1dd5a42d'>US State Map</a>
The visualization shows a choropleth map of United States. This map is using color-coded states based on the sample data. The color scale goes from light yellow to dark red, with each state colored based on some metric. Tooltips display low, average, and high values.
This is a US map rendered in D3, with the lower 48 states plus the District of Columbia and insets for Alaska and Hawaii. The visualization uses a color scale to encode data values and includes interactive tooltips. It was created using D3.js and is licensed under GPL-3.0.
Code for uStates.js:
(function(){
var uStatePaths=[
{id:"HI",n:"Hawaii",d:"M233.08751,519.30948L235.02744,515.75293L237.2907,515.42961L237.61402,516.23791L235.51242,519.30948L233.08751,519.30948ZM243.27217,515.59127L249.4153,518.17784L251.51689,517.85452L253.1335,513.97465L252.48686,510.57977L248.28366,510.09479L244.24213,511.87306L243.27217,515.59127ZM273.9878,525.61427L277.706,531.11074L280.13092,530.78742L281.26255,530.30244L282.7175,531.59573L286.43571,531.43407L287.40568,529.97912L284.49577,528.20085L280.6159,527.06941L276.57316,526.58443L273.9878,525.61427Z",r:null,pr:"HI"}, ...];
/*
The paths are from https://github.com/shawnbot/topojson/blob/master/datasets/us-atlas.json
*/
var color=d3.scale.category10();
var each = function(array, callback){
for (var i = 0; i < array.length; i++) {
callback(array[i], i);
}
};
function draw( id, data, tooltipHtml ){
/* add svg to div */
var svg = d3.select(id).append("svg")
.attr("width", 960)
.attr("height", 600)
.attr("viewBox", "0 0 960 600")
.attr("preserveAspectRatio", "xMidYMid meet");
var map = svg.selectAll("g").data(uStatePaths).enter().append("g");
var states = map.append("path")
.attr("class", "state")
.attr("d", function(d){ return d.d; })
.attr("fill", function(d){
if(sampleData[d.id]){return sampleData[d.id].color;}
else {return "white";}
});
/* Add state labels */
var labels = svg.selectAll("text")
.data(uStatePaths)
.enter()
.append("text")
.attr("transform", function(d) {
// For each feature determine the center point
var center = path.centroid(d);
return "translate(" + center + ")";
})
.attr("text-anchor", "middle")
.text(function(d) { return d.id; });
/* Add state labels and tooltips */
states = svg.selectAll("path.state")
.data(uStatePaths)
.enter()
.append("path")
.attr("class", "state")
.attr("d", function(d) { return d.d; })
.attr("id", function(d){ return d.id;})
.style("fill", function(d) { return sampleData[d.id].color; })
.on("mouseover", function(d){
$("#tooltip").html(tooltipHtml(d.n, sampleData[d.id]));
$("#tooltip").show();
})
.on("mousemove", function(d){
/* get mouse position in svg coordinates */
var svgPos = document.getElementById("statesvg").getBoundingClientRect();
var p = d3.mouse(document.getElementById("statesvg")); /* mouse position relative to svg */
var x = p[0]+5+svgPos.left; /* svg left + offset */
var y = p[1]+10+svgPos.top; /* svg top + offset */
$("#tooltip").css("top": y+"px", "left": x+"px");
})
.on("mouseout", function(d){
$("#tooltip").html("").hide();
});
}
</script>
```
Now, write a concise description in the third-person point of view, covering:
- about the data
- the visualization
- key visual encoding choices
- the possible context for the visualization
Use the format (with the exact heading structure and exact HTML tags, e.g. <p> or <li>):
<h3>H<span>eader</span></h3>
<p>May have code spans or <strong>inline text</strong>.</p>
<p>...</p>
<h3>Additional information</h3>
<p>...</p>
Note: Output should be HTML and only use the tags <h3>, <h4>, <p>, <strong>, <em>, <a>, <span>, and <code>. All content should be wrapped in <p> tags. No <br> tags. No list tags. No other tags. It must be valid HTML.
Ensure the description is a concise 1-2 paragraphs long, and no subheadings or headers. Aim for about 8-10 sentences. Write in plain English; write in an active voice; avoid unsupported claims about what the graphic "allows" users to do. Mention the title, the data set, the visual encoding, and the interaction.
The author uses a d3 micro library for the map drawing (uStates.js).
The CSV contains West Nile virus cases from 2012 by US state.
The map is drawn with SVG paths and uses D3 v3.
Be concise.This example visualizes 2012 West Nile virus cases across US states using a choropleth map. The dataset includes neuroinvasive and non-neuroinvasive disease cases, total cases, deaths, and presumptive viremic blood donors per state, though the map currently displays randomized sample data for demonstration. Rendered as an SVG with D3 v3, the map colors each state using a color scale from light yellow to dark red based on low, average, and high values generated randomly in the code. Users can hover over any state to see a tooltip showing the state name and its low, average, and high values, with hover effects adjusting fill opacity. The visualization uses a custom tooltip styled with CSS and draws state boundaries with a light gray stroke.