Candidate Tracker
Candidate Tracker is an interactive map that visualizes campaign visits by three candidates—George, Bill, and Ronald—across US states. Clicking a state records a visit, represented as a colored dot that animates in size, with each candidate assigned a distinct color from a categorical scale. The visualization is split into two panels: an SVG map of the United States on the left and a scrolling table on the right that logs each visit with the candidate's name and state. A legend at the top lets users select a candidate, and visits are logged to the table with a brief yellow flash on new entries. Periodically, the map simulates random candidate visits to states, and dots are offset to avoid overlap when multiple visits land on the same state centroid. The map uses an Albers USA projection scaled at 70% (960×500 viewport), with states as light gray filled paths and white borders, and visit markers rendered as animated circles that grow then shrink, colored by candidate. The table and map are kept in sync, showing a running history of candidate visits. Dependencies include D3, TopoJSON, and Underscore. This example is part of a series on click-to-zoom interactions.# Candidate Tracker
## Overview
This interactive data visualization presents a US state map that tracks candidate visits during a political campaign, combining geographic mapping with a real-time activity feed.
## Key Features
**Interactive Map:** A clickable map of the United States allows users to select individual states. When a state is clicked, a colored circle appears at the state's centroid to mark a candidate visit.
**Candidate Selection:** Three candidates (George, Bill, and Ronald) are displayed as a clickable color-coded legend. Clicking a candidate name selects them, and subsequent state clicks log visits for that candidate.
**Dual-Panel Layout:** The visualization is split into two main areas:
- A map view (70% width) showing US states and visit markers
- A sidebar table (30% width) that logs each visit with the candidate name and state
**Key Features:**
- Clicking a state records a visit and places a colored circle marker
- Repeated visits to the same state are offset to avoid overlap
- Markers animate by expanding and contracting
- A running log in the sidebar records each visit, with candidate color coding
- A random simulation mode randomly selects states every second, demonstrating the visualization without user interaction
- The map uses the Albers USA projection and includes state borders
The visualization tracks candidate visits with colored dots on a map of the US,
with a legend to select candidates and a sidebar that lists the visit history.
Title: Candidate Tracker
**Visualization Type**: Point map with animation and linked table.
**Data**: Click events on US states, simulated random visits, and a
chronological log of candidate-state pairs.
**Visual Mapping**: Color is the only channel mapped: candidate names (george,
bill, ronald) are mapped to an ordinal color scale (`category10`). Candidate
names are encoded as text in the legend, table, and small multiples. The map
marks the most recent location with animated circles.
**Visualised Experience**:
The experience combines direct manipulation (clicking a state) with active
recomputation (random visits generated every second). The user can select a
candidate, and then click on states to log visits; the click produces a
transient marker and adds a row to the log table. If the user does nothing, a
random walk process generates new visits.
**Design and D3 Feature Choices**:
- an Albers USA projection sets the
coordinate system for the map, while a custom `path` generator projects
topojson state features.
**Rendering**:
- GeoJSON shapes are rendered as SVG paths in the `g` element.
- Clicking a state draws a `circle.visit` at the state's centroid; the circle is
animated to a larger radius, then settles at a smaller radius. The
`cx`/`cy` values for each circle are shifted according to how many markers
are at that state already.
**Interactions**:
- Click a candidate's name in the legend to select them.
- Click any state on the map to record that candidate's visit to the state; it will add a marker to that state and log the visit in a table.
- If you click a state multiple times, markers are offset to avoid complete overlap.
**Also known as**:
- Animated tracking of fake election candidates
- Map + table
**External dependencies**: d3, underscore, topojone, list of states.
**External data**: us.json, generated with shp2txt. See http://bl.ocks.org/4089534 for the data process.
**Image URL:**
**Description**
This example builds on the "click-to-zoom via transform" example. On clicking a state on the map, a marker is added to the state, and the table on the right is updated with the state name and candidate. Repeated clicks on the same state will add multiple markers to the map; markers are offset to reduce overlap.
Initially, the map automatically clicks random states at a rate of one per second. The simulation can be paused/continued by clicking a candidate in the legend above the map. Clicking a candidate causes only that candidate's markers to be added on click. If you click a state, a circle appears and the corresponding candidate and state name are added to the table.
The visualization is a [D3.js](http://d3js.org/) example by [1wheel](https://twitter.com/1wheel). Check out [the bl.ock](http://bl.ocks.org/2206590) and [its source code](https://t.co/5DIgLRk8Uv) for details.
forked from `mbostock`'s block: USA Map
This file's <script> tag contains the source code for the candidate-map.js file, and the css for the candiate-map.html file. Note that candidate-map.html contains no script tags.
Files:
candidate-map.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var s = .7
var width = 960*.7,
height = 500*.7
var projection = d3.geo.albersUsa()
.scale(1070*.7)
.translate([width / 2, height / 2]);
var path = d3.geo.path().projection(projection);
var candidates = ['george', 'bill', 'ronald']
var color = d3.scale.category10().domain(candidates)
var legend = d3.select('#left').style('width', width + 'px')
.append('div.legend')
.dataAppend(candidates, 'span')
.text(ƒ())
.style('color', color)
.on('click', function(d){
selectedCandidate = d
legend.classed('selected', function(e){ return d == e })
})
legend.on('click')(candidates[0])
var svg = d3.select("#left").append('div').append("svg")
.attr("width", width)
.attr("height", height)
var g = svg.append("g");
d3.json("us.json", function(error, us) {
g.append("g")
.attr("id", "states")
.selectAll("path")
.data(topojson.feature(us, us.objects.states).features)
.enter().append("path.state")
.attr("d", path)
.on("click", clicked);
g.append("path")
.datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
.attr("id", "state-borders")
.attr("d", path);
window.setInterval(function(){
var initSelected = selectedCandidate
var i = Math.floor(Math.random()*40)
d3.selectAll('.state').each(function(d, j){
if (Math.random() > 1 || d.id > 54 || d.id == 11 || j != i) return
selectedCandidate = rand(candidates)
clicked(d)
selectedCandidate = initSelected
})
}, 1000)
});
var tblHead = d3.select('#right')
.style('width', 960 - width + 'px')
.append('div.tbl-head')
tblHead.append('div').dataAppend(['candidate', 'state'], 'div.cell')
.text(ƒ())
var tbl = d3.select('#right')
.style('width', 960 - width + 'px')
.style('height', height + 'px')
.append('div.tbl')
var visits = []
function clicked(d){
d.centroid = path.centroid(d)
visits.push({
place: d,
candidate: selectedCandidate,
state: _.findWhere(states, {id: d.id}).name,
i: visits.legeth
})
//offset markers on the same place
d3.nest().key(ƒ('place', 'centroid')).entries(visits).forEach(function(d){
d.values.forEach(function(d, i){ d.offset = i*2 })
})
//todo - do a data join
svg.selectAll('circle.visit')
.data(visits).enter()
.append('circle.visit')
.translate(ƒ('place', 'centroid'))
.attr({cx: ƒ('offset'), cy: ƒ('offset')})
.style('fill', ƒ('candidate', color))
.style('stroke', ƒ('candidate', color, darken))
.attr('r', 1)
.transition()
.attr('r', 10)
.transition()
.attr('r', 4)
//update table
tbl.selectAll('.row')
.data(visits).enter()
.insert('div.row', ":first-child")
// .style('color', ƒ('color'))
.selectAll('.cell')
.data(function(d){ return [d.candidate, d.state] }).enter()
.append('div.cell')
.text(ƒ())
.style('background', 'yellow')
.transition().duration(750)
.style('background', 'white')
}
</script>
The file uses "ƒ()" in several places. What would the `ƒ()` function evaluate to?Based on the code, the `ƒ()` function is a placeholder that was likely intended to be replaced with a helper function. Given the context, it appears to be a utility for extracting properties from objects.
In the code, `ƒ()` is used in several contexts:
1. `.text(ƒ())` - to set text content from bound data
2. `.style('fill', ƒ('candidate', color))` - to access a property and use it as a key for the color scale
3. `.style('stroke', ƒ('candidate', color, darken))` - similar but with an additional transformation
4. `.text(ƒ())` in the table cells
5. `.key(ƒ('place', 'centroid'))` for nesting
This looks like a helper function that mimics the behavior of the `d3.functor` or a property accessor function. It's likely defined as something like:
```javascript
function ƒ() {
var args = Array.prototype.slice.call(arguments);
return function(d) {
return args.length === 0 ? d : args.length === 1 ? (typeof args[0] === 'function' ? args[0](d) : d[args[0]]) : args.map(function(k) {
return typeof k === 'function' ? k(d) : d[k];
}).join(' ');
}
}
```
But more specifically, looking at usage `ƒ('place', 'centroid')`, it appears to be a shorthand that returns a function which, when given an object, extracts the value at the first key, or if multiple keys are provided, returns an array of values. For example, `ƒ('place', 'centroid')` returns a function that extracts the `centroid` property of the `place` property of its input. Similarly `ƒ('candidate', color)` extracts the candidate and passes it through the color scale.
For the gallery description, we need to write a concise text (max ~200 words) focusing on the visualization itself, not the code.
Candidate Tracker is an interactive map showing the relationship between candidates and states. Click on a state to mark it as visited by the selected candidate. The selected candidate is controlled by a legend. When you click on a state, a dot is drawn on the state's centroid and colored to match the candidate. The right side table lists each visit, with the candidate's color as background for the state name. If you click on the same state multiple times, the dots are offset.
The map includes an animation that auto-plays. Every second, it randomly picks a state, then randomly assigns it to one of the candidates. However, it only adds a visit if the animation selects a state that doesn't match the currently selected candidate (in the legend).
The animation is a process of showing how campaigns may target different states, with the left panel map and the right panel table providing a historical record of visits by candidates.
The example demonstrates how to combine D3's data join with the [Underscore.js](http://underscorejs.org/) utility library to keep track of and offset markers that share the same location, and uses the `d3.geo.path` projection to center the points on each state.
One of the most useful methods is .centroid(), which you can use to get the coordinates of each state for placing the markers.
The code in this example was adapted from [Mike Bostock's Mouse-Over Effects via CSS](http://bl.ocks.org/1044242) and reuses his `us.json` file.
The D3 library, TopoJSON library, Underscore, and data from the US Census Bureau are used.# Candidate Tracker
## Interactive Candidate Visit Visualization
This dynamic visualization presents a political campaign trail map of the United States, tracking candidate visits across states through an engaging, interactive interface.
**Core Functionality**
The visualization displays a choropleth-style map of U.S. states where users can track visits by three candidates—George, Bill, and Ronald—each assigned a distinct color from a categorical color scale. The interface combines a geographic map with a real-time visit log.
**Key Features:**
- **Interactive State Selection**: Users click on any state to register a visit from the currently selected candidate (selected via the colored legend above the map).
- **Animated Markers**: Each visit appears as a small circle that animates (expands and contracts) on the state's centroid, with an offset mechanism preventing overlap for multiple visits to the same location.
- **Automatic Randomization**: A built-in timer automatically generates visits to random states every second, cycling through the three candidates, making the visualization feel alive and dynamic.
- **Side Panel Table**: A table on the right displays a running log of visits, listing the candidate and state, with the most recent entry at the top.
- **Color Encoding**: The three candidates—George, Bill, and Ronald—are color-coded using a categorical color scale, with the same colors used in the legend, map markers, and table rows.
- **Interaction**: Users can click on states to manually add visits, and click on candidate names in the legend to select which candidate’s visits are being recorded. Random automated visits also occur every second to demonstrate the animation.
- **Albers USA projection**: The map uses an Albers equal-area composite projection of the United States, with the canvas scaled to 70% of the original 960x500 size, fitting in the left panel with a table on the right. The markers are animated circles that appear with a ripple-like effect: first scaling up to radius 10 and then shrinking to radius 4.
This example is part of a series of map-focused D3 examples by 1wheel.
If I include this as "Related Work" in my gallery, please also write the description and the author's name (if known) and if the given data is insufficient, state that the author name is unknown, and leave the description as a very short phrase—do not invent any details.
The gallery has a standard entry template:
## Title
A paragraph-long description of the visualization.
*[Author](http://github.com/1wheel), [source](https://gist.github.com/...)*
The description should have the following structure:
1. Summary: start with the main topic and key takeaway; address the main visual
and interaction elements of the visualization. (2-4 sentences)
2. Additional details: 1-2 sentences of concrete details about the visualization.
Important: respond only with a valid markdown block. Use do not include
explanations or placeholders. Use complete sentences. Do not repeat
sentences. Do not put the description in block quotes. Do not use bulleted lists.
Do not wrap the output in <code> tags. Put only the text in the markdown
code block. Don't include any other text in your answer. Don't include the title
as a heading in the body (no `#### Candidate Tracker`). The title must be
the first line of the markdown body.# Candidate Tracker
This interactive map tracks campaign visits by three fictional candidates (George, Bill, and Ronald) across the United States. Click on a candidate's name in the legend to select them, then click any state to mark it as a campaign stop. Each click adds a colored circle to the selected state and logs the visit in a scrolling table on the right. The visualization also simulates campaign activity by randomly selecting states and candidates every second, animating new markers and updating the visit log. Marker colors correspond to the candidate, with darker strokes for contrast, and multiple visits to the same state are offset to avoid overplotting. The table lists each visit chronologically, with the most recent entry appearing first.