jessihamel/index.html

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
  path {
    stroke: black;
  }
  .party-1 {
    fill: red;
  }
  .party-2 {
    fill: blue;
  }
  .party-3 {
    fill: purple;
  }
  div.tooltip {
    position: absolute;
    text-align: center;
    padding: 2px 8px;
    min-width: 50px;
    font: 12px sans-serif;
    background: #fff;
    border: 0px;
    pointer-events: none;
    border: 1px solid #bdbdbd;
  }
</style>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script type="text/javascript" src="http://d3js.org/topojson.v2.min.js"></script>
<script>

var tooltip = d3.select('body')
  .append('div')
  .classed('tooltip', true)
  .style('opacity', 0)

var WIDTH = 500
var HEIGHT = 500

var svg = d3.select('body').append('svg')
    .attr('width', WIDTH)
    .attr('height', HEIGHT)

d3.queue()
    .defer(d3.json, 'tiles.topo.json')
    .defer(d3.csv, 'results.csv')
    .await(ready)

function ready(error, tilegram, results) {
  if (error) throw error

  // convert results to hash for quick lookup
  results = results.reduce(function (a, b) {
    a[b.geoId] = b.party
    return a
  }, {})

  var tiles = topojson.feature(tilegram, tilegram.objects.tiles)

  var transform = d3.geoTransform({
    point: function(x, y) {
      this.stream.point(x, -y)
    },
  })

  var path = d3.geoPath().projection(transform)

  var g = svg.append('g')
    .attr('transform', 'translate(' + -WIDTH / 8 + ',' + HEIGHT + ')scale(0.5)')

  g.selectAll('.tiles')
    .data(tiles.features)
    .enter().append('path')
    .attr('d', path)
    .attr('class', function(d) { return 'party-' + results[d.id] })
    .on('mouseover', function(d) {
      var ev = d3.event
      tooltip.text('Party: ' + results[d.id])
        .style('opacity', 1)
        .style('left', ev.pageX + 20 + 'px')
        .style('top', ev.pageY + 20 + 'px')
    })
    .on('mouseout', function(d) {
      tooltip.text('').style('opacity',0)
    })
}

</script>
</body>

## results.csv

          
            geoId
            party

            
              1
              1

            
              2
              3

            
              3
              3

            
              4
              3

            
              5
              1

            
              6
              2

            
              7
              1

            
              8
              1

            
              9
              3

            
              10
              3

            
              11
              3

            
              12
              1

            
              13
              2

            
              14
              3

            
              15
              1

            
              16
              2

            
              17
              2

            
              18
              2

            
              19
              2

            
              20
              3

            
              21
              3

            
              22
              2

            
              23
              2

            
              24
              1

            
              25
              3

            
              26
              3

            
              27
              3

            
              28
              3

            
              29
              1

            
              30
              1

            
              31
              1

            
              32
              2

            
              33
              3

            
              34
              3

            
              35
              1

            
              36
              2

            
              37
              1

            
              38
              1

            
              39
              1

            
              40
              3

            
              41
              1

            
              42
              1

            
              43
              1

            
              44
              2

            
              45
              2

            
              46
              1

            
              47
              2

            
              48
              2

            
              49
              2

            
              50
              1

            
              51
              3

            
              52
              3

            
              53
              2

            
              54
              1

            
              55
              3

            
              56
              3

            
              57
              3

            
              58
              3

            
              59
              2

            
              60
              1

            
              61
              3

            
              62
              3

            
              63
              1

            
              64
              3

            
              65
              1

            
              66
              3

            
              67
              2

            
              68
              3

            
              69
              1

            
              70
              1

            
              71
              3

            
              72
              2

            
              73
              1

            
              74
              1

            
              75
              2

            
              76
              3

            
              77
              1

            
              78
              1

            
              79
              2

            
              80
              3

            
              81
              1

            
              82
              1

            
              83
              2

            
              84
              1

            
              85
              1

            
              86
              1

            
              87
              2

            
              88
              3

            
              89
              2

            
              90
              1

            
              91
              2

            
              92
              2

            
              93
              1

            
              94
              1

            
              95
              1

            
              96
              3

            
              97
              2

            
              98
              1

            
              99
              2

            
              100
              2

            
              101
              3

            
              102
              2

            
              103
              1

            
              104
              2

            
              105
              1

            
              106
              3

            
              107
              3

            
              108
              2

            
              109
              2

            
              110
              3

            
              111
              3

            
              112
              2

            
              113
              3

            
              114
              2

            
              115
              3

            
              116
              2

            
              117
              3

            
              118
              3

            
              119
              1

            
              120
              3

            
              121
              1

            
              122
              1

            
              123
              1

            
              124
              2

            
              125
              2

            
              126
              1

            
              127
              1

            
              128
              3

            
              129
              3

            
              130
              2

            
              131
              3

            
              132
              2

            
              133
              1

            
              134
              1

            
              135
              2

            
              136
              1

            
              137
              2

            
              138
              3

            
              139
              1

            
              140
              3

            
              141
              2

            
              142
              3

            
              143
              2

            
              144
              2

            
              145
              2

            
              146
              3

            
              147
              3

            
              148
              3

            
              149
              3

            
              150
              1

            
              151
              2

            
              152
              3

            
              153
              2

            
              154
              1

            
              155
              1

            
              156
              3

            
              157
              1

            
              158
              2

            
              159
              3

            
              160
              2

            
              161
              3

            
              162
              1

            
              163
              1

            
              164
              3

            
              165
              2

            
              166
              3

            
              167
              1

            
              168
              2

            
              169
              3

            
              170
              1

            
              171
              1

            
              172
              1

            
              173
              2

            
              174
              3

            
              175
              1

            
              176
              2

            
              177
              1

            
              178
              1

            
              179
              2

            
              180
              3

            
              181
              3

            
              182
              1

            
              183
              3

            
              184
              2

            
              185
              2

            
              186
              1

            
              187
              3

            
              188
              2

            
              189
              2

            
              190
              3

            
              191
              1

            
              192
              2

            
              193
              1

            
              194
              1

            
              195
              3

            
              196
              2

            
              197
              2

            
              198
              3

            
              199
              1

            
              200
              2

            
              201
              2

            
              202
              1

            
              203
              2

            
              204
              1

            
              205
              2

            
              206
              3

            
              207
              2

            
              208
              3

            
              209
              2

            
              210
              1

            
              211
              3

            
              212
              2

            
              213
              3

            
              214
              3

            
              215
              1

            
              216
              2

            
              217
              3

            
              218
              2

            
              219
              3

            
              220
              2

            
              221
              3

            
              222
              1

            
              223
              3

            
              224
              3

            
              225
              1

            
              226
              2

            
              227
              1

            
              228
              2

            
              229
              1

            
              230
              1

            
              231
              3

            
              232
              1

            
              233
              3

            
              234
              2

            
              235
              1

            
              236
              2

            
              237
              2

            
              238
              2

            
              239
              2

            
              240
              3

            
              241
              3

            
              242
              3

            
              243
              2

            
              244
              1

            
              245
              1

            
              246
              3

            
              247
              2

            
              248
              2

            
              249
              3

            
              250
              1

            
              251
              2

            
              252
              1

            
              253
              2

            
              254
              2

            
              255
              2

            
              256
              1

            
              257
              3

            
              258
              2

            
              259
              2

            
              260
              3

            
              261
              2

            
              262
              3

            
              263
              3

            
              264
              2

            
              265
              2

            
              266
              1

            
              267
              3

            
              268
              3

            
              269
              3

            
              270
              1

            
              271
              3

            
              272
              1

            
              273
              3

            
              274
              3

            
              275
              2

            
              276
              1

            
              277
              1

            
              278
              1

            
              279
              1

            
              280
              2

            
              281
              2

            
              282
              3

            
              283
              2

            
              284
              3

            
              285
              2

            
              286
              1

            
              287
              3

            
              288
              3

            
              289
              1

            
              290
              1

            
              291
              2

            
              292
              3

            
              293
              3

            
              294
              3

            
              295
              2

            
              296
              3

            
              297
              3

            
              298
              2

            
              299
              2

## tiles.topo.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              tiles.topo.json
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>
	path {
	stroke: black;
	}
	.party-1 {
	fill: red;
	}
	.party-2 {
	fill: blue;
	}
	.party-3 {
	fill: purple;
	}
	div.tooltip {
	position: absolute;
	text-align: center;
	padding: 2px 8px;
	min-width: 50px;
	font: 12px sans-serif;
	background: #fff;
	border: 0px;
	pointer-events: none;
	border: 1px solid #bdbdbd;
	}
	</style>
	<body>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script type="text/javascript" src="http://d3js.org/topojson.v2.min.js"></script>
	<script>

	var tooltip = d3.select('body')
	.append('div')
	.classed('tooltip', true)
	.style('opacity', 0)

	var WIDTH = 500
	var HEIGHT = 500

	var svg = d3.select('body').append('svg')
	.attr('width', WIDTH)
	.attr('height', HEIGHT)

	d3.queue()
	.defer(d3.json, 'tiles.topo.json')
	.defer(d3.csv, 'results.csv')
	.await(ready)

	function ready(error, tilegram, results) {
	if (error) throw error

	// convert results to hash for quick lookup
	results = results.reduce(function (a, b) {
	a[b.geoId] = b.party
	return a
	}, {})

	var tiles = topojson.feature(tilegram, tilegram.objects.tiles)

	var transform = d3.geoTransform({
	point: function(x, y) {
	this.stream.point(x, -y)
	},
	})

	var path = d3.geoPath().projection(transform)

	var g = svg.append('g')
	.attr('transform', 'translate(' + -WIDTH / 8 + ',' + HEIGHT + ')scale(0.5)')

	g.selectAll('.tiles')
	.data(tiles.features)
	.enter().append('path')
	.attr('d', path)
	.attr('class', function(d) { return 'party-' + results[d.id] })
	.on('mouseover', function(d) {
	var ev = d3.event
	tooltip.text('Party: ' + results[d.id])
	.style('opacity', 1)
	.style('left', ev.pageX + 20 + 'px')
	.style('top', ev.pageY + 20 + 'px')
	})
	.on('mouseout', function(d) {
	tooltip.text('').style('opacity',0)
	})
	}

	</script>
	</body>
	geoId	party
	1	1
	2	3
	3	3
	4	3
	5	1
	6	2
	7	1
	8	1
	9	3
	10	3
	11	3
	12	1
	13	2
	14	3
	15	1
	16	2
	17	2
	18	2
	19	2
	20	3
	21	3
	22	2
	23	2
	24	1
	25	3
	26	3
	27	3
	28	3
	29	1
	30	1
	31	1
	32	2
	33	3
	34	3
	35	1
	36	2
	37	1
	38	1
	39	1
	40	3
	41	1
	42	1
	43	1
	44	2
	45	2
	46	1
	47	2
	48	2
	49	2
	50	1
	51	3
	52	3
	53	2
	54	1
	55	3
	56	3
	57	3
	58	3
	59	2
	60	1
	61	3
	62	3
	63	1
	64	3
	65	1
	66	3
	67	2
	68	3
	69	1
	70	1
	71	3
	72	2
	73	1
	74	1
	75	2
	76	3
	77	1
	78	1
	79	2
	80	3
	81	1
	82	1
	83	2
	84	1
	85	1
	86	1
	87	2
	88	3
	89	2
	90	1
	91	2
	92	2
	93	1
	94	1
	95	1
	96	3
	97	2
	98	1
	99	2
	100	2
	101	3
	102	2
	103	1
	104	2
	105	1
	106	3
	107	3
	108	2
	109	2
	110	3
	111	3
	112	2
	113	3
	114	2
	115	3
	116	2
	117	3
	118	3
	119	1
	120	3
	121	1
	122	1
	123	1
	124	2
	125	2
	126	1
	127	1
	128	3
	129	3
	130	2
	131	3
	132	2
	133	1
	134	1
	135	2
	136	1
	137	2
	138	3
	139	1
	140	3
	141	2
	142	3
	143	2
	144	2
	145	2
	146	3
	147	3
	148	3
	149	3
	150	1
	151	2
	152	3
	153	2
	154	1
	155	1
	156	3
	157	1
	158	2
	159	3
	160	2
	161	3
	162	1
	163	1
	164	3
	165	2
	166	3
	167	1
	168	2
	169	3
	170	1
	171	1
	172	1
	173	2
	174	3
	175	1
	176	2
	177	1
	178	1
	179	2
	180	3
	181	3
	182	1
	183	3
	184	2
	185	2
	186	1
	187	3
	188	2
	189	2
	190	3
	191	1
	192	2
	193	1
	194	1
	195	3
	196	2
	197	2
	198	3
	199	1
	200	2
	201	2
	202	1
	203	2
	204	1
	205	2
	206	3
	207	2
	208	3
	209	2
	210	1
	211	3
	212	2
	213	3
	214	3
	215	1
	216	2
	217	3
	218	2
	219	3
	220	2
	221	3
	222	1
	223	3
	224	3
	225	1
	226	2
	227	1
	228	2
	229	1
	230	1
	231	3
	232	1
	233	3
	234	2
	235	1
	236	2
	237	2
	238	2
	239	2
	240	3
	241	3
	242	3
	243	2
	244	1
	245	1
	246	3
	247	2
	248	2
	249	3
	250	1
	251	2
	252	1
	253	2
	254	2
	255	2
	256	1
	257	3
	258	2
	259	2
	260	3
	261	2
	262	3
	263	3
	264	2
	265	2
	266	1
	267	3
	268	3
	269	3
	270	1
	271	3
	272	1
	273	3
	274	3
	275	2
	276	1
	277	1
	278	1
	279	1
	280	2
	281	2
	282	3
	283	2
	284	3
	285	2
	286	1
	287	3
	288	3
	289	1
	290	1
	291	2
	292	3
	293	3
	294	3
	295	2
	296	3
	297	3
	298	2
	299	2