gustavderdrache/README.md

## README.md

      
    Raw
  

              README.md
            
          
    This is a relatively simple D3 demo using electoral college results culled from the Federal Election Commission. Red states are states in which the Republican candidate won more votes, and blue states are Democratic. (We use this rule because in 2008, Nebraska cast one vote for Obama and four for McCain.)

  
## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js" charset="utf-8"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.js" charset="utf-8"></script>
  </head>
  <body>
    <form>
      Select a year:
      <label><input type="radio" name="year" value="2012" checked> 2012</label>
      <label><input type="radio" name="year" value="2008"> 2008</label>
      <label><input type="radio" name="year" value="2004"> 2004</label>
    </form>

    <svg width="960" height="500"></svg>

    <p>Source: <a href="http://www.fec.gov/pubrec/electionresults.shtml">Federal Election Commission</a></p>

    <script src="script.js"></script>
  </body>
</html>

## results.csv

          
            STATE
            D2012
            R2012
            D2008
            R2008
            R2004
            D2004

            
              AL
              
              9
              
              9
              9

            
              AK
              
              3
              
              3
              3

            
              AZ
              
              11
              
              10
              10

            
              AR
              
              6
              
              6
              6

            
              CA
              55
              
              55
              
              
              55

            
              CO
              9
              
              9
              
              9

            
              CT
              7
              
              7
              
              
              7

            
              DE
              3
              
              3
              
              
              3

            
              DC
              3
              
              3
              
              
              3

            
              FL
              29
              
              27
              
              27

            
              GA
              
              16
              
              15
              15

            
              HI
              4
              
              4
              
              
              4

            
              ID
              
              4
              
              4
              4

            
              IL
              20
              
              21
              
              
              21

            
              IN
              
              11
              11
              
              11

            
              IA
              6
              
              7
              
              7

            
              KS
              
              6
              
              6
              6

            
              KY
              
              8
              
              8
              8

            
              LA
              
              8
              
              9
              9

            
              ME
              4
              
              4
              
              
              4

            
              MD
              10
              
              10
              
              
              10

            
              MA
              11
              
              12
              
              
              12

            
              MI
              16
              
              17
              
              
              17

            
              MN
              10
              
              10
              
              
              9*

            
              MS
              
              6
              
              6
              6

            
              MO
              
              10
              
              11
              11

            
              MT
              
              3
              
              3
              3

            
              NE
              
              5
              1
              4
              5

            
              NV
              6
              
              5
              
              5

            
              NH
              4
              
              4
              
              
              4

            
              NJ
              14
              
              15
              
              
              15

            
              NM
              5
              
              5
              
              5

            
              NY
              29
              
              31
              
              
              31

            
              NC
              
              15
              15
              
              15

            
              ND
              
              3
              
              3
              3

            
              OH
              18
              
              20
              
              20

            
              OK
              
              7
              
              7
              7

            
              OR
              7
              
              7
              
              
              7

            
              PA
              20
              
              21
              
              
              21

            
              RI
              4
              
              4
              
              
              4

            
              SC
              
              9
              
              8
              8

            
              SD
              
              3
              
              3
              3

            
              TN
              
              11
              
              11
              11

            
              TX
              
              38
              
              34
              34

            
              UT
              
              6
              
              5
              5

            
              VT
              3
              
              3
              
              
              3

            
              VA
              13
              
              13
              
              13

            
              WA
              12
              
              11
              
              
              11

            
              WV
              
              5
              
              5
              5

            
              WI
              10
              
              10
              
              
              10

            
              WY
              
              3
              
              3
              3

## script.js
d3.json('states.topo.json', function (err, us) {
  "use strict";

  if (err) throw err;

  var svg = d3.select('svg'),
      geo = d3.geo.path(),
      states = svg.selectAll('path.state')
                  .data(topojson.feature(us, us.objects.states).features);

  states
    .enter()
    .append('path')
    .classed('state', true)
    .attr('d', geo)
    .attr('fill', 'white');

  svg
    .append('path')
    .classed('boundary', true)
    .datum(topojson.mesh(us, us.objects.states))
    .attr('d', geo);

  d3.csv('results.csv', function (err, results) {
    if (err) throw err;

    var form = d3.select('form'),
        input = form.selectAll('input[name=year]'),
        lookup = d3.nest()
                   .key(function (d) { return d.STATE; })
                   .rollup(function (a) { return a[0]; })
                   .map(results);

    form.on('submit', function () {
      d3.event.preventDefault();
    });

    input
      .datum(function () { return this.value; })
      .on('change', changeStates);

    changeStates(2012);

    function changeStates(year) {
      states.transition()
        .duration(500)
        .attr('fill', function (feature) {
          var data = lookup[feature.id],
              r = +data['R' + year],
              d = +data['D' + year];
          return r > d ? 'red' : 'blue';
        })
    }
  });
});

## states.topo.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              states.topo.json
            
          
        Loading

      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## style.css
path.boundary {
  fill: none;
  stroke: black;
}

path.state {
  stroke: none;
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="style.css">
	<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js" charset="utf-8"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.js" charset="utf-8"></script>
	</head>
	<body>
	<form>
	Select a year:
	<label><input type="radio" name="year" value="2012" checked> 2012</label>
	<label><input type="radio" name="year" value="2008"> 2008</label>
	<label><input type="radio" name="year" value="2004"> 2004</label>
	</form>

	<svg width="960" height="500"></svg>

	<p>Source: <a href="http://www.fec.gov/pubrec/electionresults.shtml">Federal Election Commission</a></p>

	<script src="script.js"></script>
	</body>
	</html>
STATE	D2012	R2012	D2008	R2008	R2004	D2004
AL		9		9	9
AK		3		3	3
AZ		11		10	10
AR		6		6	6
CA	55		55			55
CO	9		9		9
CT	7		7			7
DE	3		3			3
DC	3		3			3
FL	29		27		27
GA		16		15	15
HI	4		4			4
ID		4		4	4
IL	20		21			21
IN		11	11		11
IA	6		7		7
KS		6		6	6
KY		8		8	8
LA		8		9	9
ME	4		4			4
MD	10		10			10
MA	11		12			12
MI	16		17			17
MN	10		10			9*
MS		6		6	6
MO		10		11	11
MT		3		3	3
NE		5	1	4	5
NV	6		5		5
NH	4		4			4
NJ	14		15			15
NM	5		5		5
NY	29		31			31
NC		15	15		15
ND		3		3	3
OH	18		20		20
OK		7		7	7
OR	7		7			7
PA	20		21			21
RI	4		4			4
SC		9		8	8
SD		3		3	3
TN		11		11	11
TX		38		34	34
UT		6		5	5
VT	3		3			3
VA	13		13		13
WA	12		11			11
WV		5		5	5
WI	10		10			10
WY		3		3	3
	d3.json('states.topo.json', function (err, us) {
	"use strict";

	if (err) throw err;

	var svg = d3.select('svg'),
	geo = d3.geo.path(),
	states = svg.selectAll('path.state')
	.data(topojson.feature(us, us.objects.states).features);

	states
	.enter()
	.append('path')
	.classed('state', true)
	.attr('d', geo)
	.attr('fill', 'white');

	svg
	.append('path')
	.classed('boundary', true)
	.datum(topojson.mesh(us, us.objects.states))
	.attr('d', geo);

	d3.csv('results.csv', function (err, results) {
	if (err) throw err;

	var form = d3.select('form'),
	input = form.selectAll('input[name=year]'),
	lookup = d3.nest()
	.key(function (d) { return d.STATE; })
	.rollup(function (a) { return a[0]; })
	.map(results);

	form.on('submit', function () {
	d3.event.preventDefault();
	});

	input
	.datum(function () { return this.value; })
	.on('change', changeStates);

	changeStates(2012);

	function changeStates(year) {
	states.transition()
	.duration(500)
	.attr('fill', function (feature) {
	var data = lookup[feature.id],
	r = +data['R' + year],
	d = +data['D' + year];
	return r > d ? 'red' : 'blue';
	})
	}
	});
	});
	path.boundary {
	fill: none;
	stroke: black;
	}

	path.state {
	stroke: none;
	}