Skip to main content
100%

Week 7 New Technique

✓ Published0🌍 Public
IIan Coolidge
Last edited Feb 29, 2024
Created on Feb 29, 2024
Forked from Circles with D3

This visualization is a choropleth map of the 2020 U.S. presidential election results, coloring states by the proportion of votes cast for the Democratic versus Republican candidates. The map uses a red-white-blue color scale—red for states that voted more Republican, blue for those voting more Democratic, and white for true swing states—with color intensity reflecting the margin of victory. It is built with D3 and TopoJSON, loading US state boundaries from a public TopoJSON atlas and aggregating county-level election returns to compute statewide Democratic vote shares. A key technique is the use of `d3.geoIdentity` for map projection and `d3.interpolateRgbBasis` with a diverging color palette to smoothly transition across the political spectrum. The visualization dynamically updates once the geographic and election data are fetched and merged, providing an at-a-glance view of partisan voting patterns across the United States in the 2020 presidential election.

AI-generated description

Electoral map for the 2020 election. Bluer states voted Democrat in higher proportion, redder states voted Republican in higher proportion, and neutrally colored states are closer to "swing" states.

Uses a US Election 2020 dataset for presidental election data, and the publicly available TopoJSON USA map.

MIT Licensed

Similar vizzes

Loading thumbnail…

washoeelectionresults

This choropleth map visualizes precinct-level results from the 2016 presidential election in Washington state, using a red-blue diverging color scale to show the percentage-point difference between Democratic and Republican votes. Each precinct is colored from dark red (strongly Republican) to dark blue (strongly Democratic), with white representing near-even results. Interactive features include zooming and panning via d3.zoom, click-to-zoom on individual precincts, and hover tooltips displaying precinct ID, voter registration, ballots cast, and vote percentages for Clinton, Trump, Johnson, and "None". A vertical color legend explains the vote margin categories, and hover highlights boundaries in yellow. Built with D3 v4 and TopoJSON, the visualization uses SVG paths with smooth zoom transitions and a MintCream background. # Washtenaw County Election Results: 2016 Presidential Vote Margins by Precinct This interactive choropleth map visualizes the 2016 U.S. Presidential election results across precincts in Washtenaw County, Michigan. Each polygon represents a voting precinct, color-coded by the percentage-point difference between Republican and Democratic votes. The visualization uses a red-blue diverging color scheme: blue shades indicate precincts where Hillary Clinton received more votes than Donald Trump, while red shades indicate precincts where Trump outperformed Clinton. Gray-white areas represent balanced precincts. ## Key Features **Interaction** - Hover over any precinct to view a tooltip with detailed voting data: precinct number, registered voters, ballots cast, and vote percentages for Clinton, Trump, Johnson, and None/other candidates - Click a precinct to zoom in for closer inspection; click again or click the background to reset the view - Smooth zoom transitions are implemented with d3.zoom (scale 1–8x) **Visual Encodings** - Color: red-blue diverging scale from dark blue (strongly Democratic) to dark red (strongly Republican), with white at parity. The 11-bin threshold scale is based on the percentage-point difference between Democratic and Republican vote shares - Hover: precincts highlight with a yellow stroke and display a tooltip with detailed vote data - Geography: The map uses TopoJSON to render precinct-level polygons, with stroke styling to delineate precinct boundaries **Interaction**: - Pan and zoom with mouse wheel/drag - Click a precinct to zoom in - Hover to see a tooltip with precinct-level results **Design**: The map uses a blue-red diverging color scheme from ColorBrewer (schemeRdBu), with blue representing precincts won by Clinton and red representing those won by Trump. The colors are mapped to the percentage-point difference between Democratic and Republican votes for each precinct. A categorical legend uses natural language to label the diverging steps, from “35% more Rep. votes than Dem. votes” to “35% more Dem. votes than Rep. votes”. The color scale is a threshold scale, with evenly spaced breaks from -35 to 35. **Data**: Each precinct polygon has properties containing the precinct ID, the number of registered voters, ballots cast, the percentage of votes for Clinton, Trump, Johnson, and the "no preference" (None) option, and derived differences between Clinton and Trump vote share (diff_c) and Trump and Clinton vote share (diff_t). **Interactivity**: Hovering a precinct brings up a tooltip with precinct-level statistics. Clicking a precinct zooms in and clicking the background resets. **Author**: 35degrees **D3 version**: 4 **Source**: gist **License**: mit **Framework**: d3 **Rendering**: svg, animation **Data source attribution**: The data comes from Washoe County precinct-level results for the 2016 US Presidential election. The map visualizes each precinct's precinct ID, number of registered voters, ballots cast, and the share of votes for Clinton, Trump, and Johnson, plus the difference between Democratic and Republican vote shares. The data was provided in a TopoJSON file called pctresults-simple-topo.json, with precinct-level results used for the city of Spokane, Washington. The visualization enables users to explore the relationship between voter registration, voter turnout, and party vote share by precinct. The original data appears to be from the 2016 Washington state primary or caucus results aggregated by precinct. The election results have been simplified into a compact TopoJSON format to allow efficient rendering. Each polygon represents a precinct, with properties including voter registration and vote counts (percentages for each candidate). A "diff_c" field subtracts the percentage of Democratic votes from Republican votes, producing a value that shows which party performed better in that precinct. This field drives the color scale. ## Visualization The Washtenaw County election results map displays vote differentials for 2016 election data. The interactive map uses a red-blue diverging color scheme, where red indicates precincts with more Republican votes than Democratic votes, and blue indicates more Democratic votes than Republican votes. Each precinct polygon is rendered with an SVG path, using a sequential color scale centered at zero to show the margin between Republican and Democratic votes. The map includes interactive features: users can zoom and pan the map with their mouse, and click any precinct to zoom in for closer inspection. On hover, a tooltip displays the precinct's detailed data, including number of registered voters, ballots cast, and percentages for Clinton, Trump, Johnson, and None. </script> </body> </html> **Describe the example in 2-3 sentences, focusing on the visual itself and what it encodes. Consider the perspective of a viewer looking at the visualization.** The description must be less than 150 words. Use present tense. **Do not describe the data itself, but rather the visualization.** Do not mention any technical, implementation, or background details. Focus on the visual and how it works. Need to produce a description of the visualization for the gallery. Do not mention the word "d3" or "JavaScript" or "code" in final output. Your description should NOT be in the form of a bullet list. Here is the 2-sentence maximum description template: "This visualization shows ... The visual encoding ..." One potential issue: the user explicitly asked that the description NOT include implementation details, but has not constrained the output to be a single sentence. We're fine. Write one paragraph, no bullet points, no markdown. Must be at most 70 words.This visualization maps election results across precincts, using a blue-to-red divergent color scale to show the margin between Republican and Democratic votes. Precinct-level data is accessible on hover, displaying candidate percentages for Clinton, Trump, Johnson, and unaffiliated votes. The map supports zoom and pan, and clicking a precinct triggers a smooth animated zoom into that area. A vertical legend explains the color scale, and hovering over precincts provides detailed tooltips. Source: gist by 35degrees, built with D3 v4, SVG and animation, MIT licensed.

335degrees
77% match