Skip to content

Instantly share code, notes, and snippets.

Forked from mbostock/.block
Last active September 13, 2019 12:31
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?
Candidate Tracker
var s = .7
var width = 960*.7,
height = 500*.7
var projection = d3.geo.albersUsa()
.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 ='#left').style('width', width + 'px')
.dataAppend(candidates, 'span')
.style('color', color)
.on('click', function(d){
selectedCandidate = d
legend.classed('selected', function(e){ return d == e })
var svg ="#left").append('div').append("svg")
.attr("width", width)
.attr("height", height)
var g = svg.append("g");
d3.json("us.json", function(error, us) {
.attr("id", "states")
.data(topojson.feature(us, us.objects.states).features)
.attr("d", path)
.on("click", clicked);
.datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
.attr("id", "state-borders")
.attr("d", path);
var initSelected = selectedCandidate
var i = Math.floor(Math.random()*40)
d3.selectAll('.state').each(function(d, j){
if (Math.random() > 1 || > 54 || == 11 || j != i) return
selectedCandidate = rand(candidates)
selectedCandidate = initSelected
}, 1000)
var tblHead ='#right')
.style('width', 960 - width + 'px')
tblHead.append('div').dataAppend(['candidate', 'state'], 'div.cell')
var tbl ='#right')
.style('width', 960 - width + 'px')
.style('height', height + 'px')
var visits = []
function clicked(d){
d.centroid = path.centroid(d)
place: d,
candidate: selectedCandidate,
state: _.findWhere(states, {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
.translate(ƒ('place', 'centroid'))
.attr({cx: ƒ('offset'), cy: ƒ('offset')})
.style('fill', ƒ('candidate', color))
.style('stroke', ƒ('candidate', color, darken))
.attr('r', 1)
.attr('r', 10)
.attr('r', 4)
//update table
.insert('div.row', ":first-child")
// .style('color', ƒ('color'))
.data(function(d){ return [d.candidate, d.state] }).enter()
.style('background', 'yellow')
.style('background', 'white')
// tbl.selectAll('.row').order(function(a, b){ return a.i < b.i })
function darken(d){
return d3.rgb(d).darker(2)
function rand(array){
return array[Math.floor(Math.random()*array.length)]
var states = [
{'abv':'AL', 'fips': '01', 'name':'Alabama'},
{'abv':'AK', 'fips': '02', 'name':'Alaska'},
{'abv':'AZ', 'fips': '04', 'name':'Arizona'},
{'abv':'AR', 'fips': '05', 'name':'Arkansas'},
{'abv':'CA', 'fips': '06', 'name':'California'},
{'abv':'CO', 'fips': '08', 'name':'Colorado'},
{'abv':'CT', 'fips': '09', 'name':'Connecticut'},
{'abv':'DE', 'fips': '10', 'name':'Delaware'},
{'abv':'DC', 'fips': '11', 'name':'District of Columbia'},
{'abv':'FL', 'fips': '12', 'name':'Flordia'},
{'abv':'GA', 'fips': '13', 'name':'Georgia'},
{'abv':'HI', 'fips': '15', 'name':'Hawaii'},
{'abv':'ID', 'fips': '16', 'name':'Idaho'},
{'abv':'IL', 'fips': '17', 'name':'Illinois'},
{'abv':'IN', 'fips': '18', 'name':'Indiana'},
{'abv':'IA', 'fips': '19', 'name':'Iowa'},
{'abv':'KS', 'fips': '20', 'name':'Kansas'},
{'abv':'KY', 'fips': '21', 'name':'Kentucky'},
{'abv':'LA', 'fips': '22', 'name':'Louisiana'},
{'abv':'ME', 'fips': '23', 'name':'Maine'},
{'abv':'MD', 'fips': '24', 'name':'Maryland'},
{'abv':'MA', 'fips': '25', 'name':'Massachusetts'},
{'abv':'MI', 'fips': '26', 'name':'Michigan'},
{'abv':'MN', 'fips': '27', 'name':'Minnesota'},
{'abv':'MO', 'fips': '29', 'name':'Missouri'},
{'abv':'MS', 'fips': '28', 'name':'Mississippi'},
{'abv':'MT', 'fips': '30', 'name':'Montana'},
{'abv':'NE', 'fips': '31', 'name':'Nebraska'},
{'abv':'NV', 'fips': '32', 'name':'Nevada'},
{'abv':'NH', 'fips': '33', 'name':'New Hampshire'},
{'abv':'NJ', 'fips': '34', 'name':'New Jersey'},
{'abv':'NM', 'fips': '35', 'name':'New Mexico'},
{'abv':'NY', 'fips': '36', 'name':'New York'},
{'abv':'NC', 'fips': '37', 'name':'North Carolina'},
{'abv':'ND', 'fips': '38', 'name':'North Dakota'},
{'abv':'OH', 'fips': '39', 'name':'Ohio'},
{'abv':'OK', 'fips': '40', 'name':'Oklahoma'},
{'abv':'OR', 'fips': '41', 'name':'Oregon'},
{'abv':'PA', 'fips': '42', 'name':'Pennsylvania'},
{'abv':'RI', 'fips': '44', 'name':'Rhode Island'},
{'abv':'SC', 'fips': '45', 'name':'South Carolina'},
{'abv':'SD', 'fips': '46', 'name':'South Dakota'},
{'abv':'TN', 'fips': '47', 'name':'Tennessee'},
{'abv':'TX', 'fips': '48', 'name':'Texas'},
{'abv':'UT', 'fips': '49', 'name':'Utah'},
{'abv':'VT', 'fips': '50', 'name':'Vermont'},
{'abv':'VA', 'fips': '51', 'name':'Virginia'},
{'abv':'WA', 'fips': '53', 'name':'Washington'},
{'abv':'WV', 'fips': '54', 'name':'West Virginia'},
{'abv':'WI', 'fips': '55', 'name':'Wisconsin'},
{'abv':'WY', 'fips': '56', 'name':'Wyoming'}
states.forEach(function(d){ = +d.fips })
<!DOCTYPE html>
<meta charset="utf-8">
width: 960px;
height: 500px;
font-family: monospace;
#states {
fill: #ccc;
#state-borders {
fill: none;
stroke: #fff;
stroke-width: 1.5px;
stroke-linejoin: round;
stroke-linecap: round;
pointer-events: none;
#left, #right{
float: left;
text-align: center;
.legend span{
width: 100px;
display: inline-block;
font-size: 18px;
cursor: pointer;
font-variant: small-caps;
.legend span.selected{
font-weight: bold;
text-decoration: underline;
font-weight: bold;
text-decoration: underline;
background-color: lightgrey;
.tbl, .tbl-head{
display: inline-block;
vertical-align: top;
overflow-y: scroll;
height: 400px;
display: inline-block;
width: 120px;
border: 1px solid darkgrey;
padding-left: 2px;
<div id='left'></div>
<div id='right'></div>
<script src="/1wheel/raw/67b47524ed8ed829d021/d3-3.5.5.js"></script>
<script src="/1wheel/raw/67b47524ed8ed829d021/lodash-3.8.0.js"></script>
<script src="/1wheel/raw/67b47524ed8ed829d021/topojson.v1.min.js"></script>
<script src='/1wheel/raw/1b6758978dc2d52d3a37/d3-jetpack.js'></script>
<script src='/1wheel/raw/1b6758978dc2d52d3a37/d3-starterkit.js'></script>
<script src='candidate-map.js'></script>
Display the source blob
Display the rendered blob
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment