Skip to content

Instantly share code, notes, and snippets.

@1wheel
Forked from mbostock/.block
Last active Sep 13, 2019
Embed
What would you like to do?
Candidate Tracker
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')
// 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.id = +d.fips })
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body{
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;
}
.legend{
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;
}
.tbl-head{
font-weight: bold;
text-decoration: underline;
background-color: lightgrey;
}
.tbl, .tbl-head{
display: inline-block;
vertical-align: top;
}
.tbl{
overflow-y: scroll;
height: 400px;
}
.cell{
display: inline-block;
width: 120px;
border: 1px solid darkgrey;
padding-left: 2px;
}
</style>
<body>
<div id='left'></div>
<div id='right'></div>
</body>
<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>
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