elsherbini/state-choropleth.csv

## state-choropleth.csv

          
            State
            Response
            Predicted
            Difference

            
              1
              0.0526762956669499
              0.0983417957543063
              0.0456655000873564

            
              2
              0.116140051238258
              0.109308795975831
              0.00683125526242642

            
              5
              0.096722621902478
              0.103514578497592
              0.00679195659511383

            
              4
              0.0998322147651007
              0.0942662765956997
              0.00556593816940097

            
              6
              0.0888501742160279
              0.0957795913389227
              0.00692941712289478

            
              8
              0.102857142857143
              0.0899265569700815
              0.0129305858870613

            
              9
              0.114285714285714
              0.0948882843180256
              0.0193974299676887

            
              11
              0.166344294003868
              0.139210777071404
              0.0271335169324649

            
              10
              0.130327868852459
              0.102019406504546
              0.0283084623479134

            
              12
              0.0914479254868755
              0.0967140837003516
              0.00526615821347605

            
              13
              0.116455696202532
              0.105320125277631
              0.0111355709249005

            
              15
              0.12241653418124
              0.0973781470936476
              0.0250383870875924

            
              19
              0.0675569520816968
              0.0874754963884159
              0.0199185443067191

            
              16
              0.083739837398374
              0.0876404912819252
              0.00390065388355117

            
              17
              0.10310021629416
              0.100537808890023
              0.00256240740413684

            
              18
              0.117408906882591
              0.0944305388334601
              0.022978368049131

            
              20
              0.105723370429253
              0.0883922268028023
              0.0173311436264505

            
              21
              0.112757201646091
              0.0952584898118371
              0.0174987118342534

            
              22
              0.0944170771756979
              0.113883404411713
              0.0194663272360153

            
              25
              0.115602263540825
              0.0924094822875007
              0.0231927812533238

            
              24
              0.114985163204748
              0.113757872022582
              0.00122729118216568

            
              23
              0.0948678071539658
              0.0908546138994951
              0.00401319325447069

            
              26
              0.110655737704918
              0.101263563653564
              0.00939217405135387

            
              27
              0.0775646371976647
              0.0869683401721915
              0.00940370297452676

            
              29
              0.104453441295547
              0.0940928215211176
              0.010360619774429

            
              28
              0.0925
              0.119318091923169
              0.0268180919231688

            
              30
              0.0836038961038961
              0.0921566944887218
              0.0085527983848257

            
              37
              0.096551724137931
              0.105857160497344
              0.00930543635941303

            
              38
              0.0884070058381985
              0.0817546546320644
              0.00665235120613414

            
              31
              0.0789259560618389
              0.0870241231197248
              0.00809816705788589

            
              33
              0.106686701728024
              0.0872847870404996
              0.0194019146875245

            
              34
              0.104253544620517
              0.0960349816380214
              0.00821856298249567

            
              35
              0.121835443037975
              0.0972718710441837
              0.024563571993791

            
              32
              0.0916463909164639
              0.0937160679317704
              0.00206967701530644

            
              36
              0.112269446672013
              0.103094198569698
              0.00917524810231471

            
              39
              0.0959438377535101
              0.0958805469620007
              6.32907915094905e-05

            
              40
              0.138986013986014
              0.102778640359023
              0.036207373626991

            
              41
              0.0959016393442623
              0.0924068074666989
              0.00349483187756343

            
              42
              0.128606760098928
              0.0980241169694057
              0.0305826431295226

            
              44
              0.112540192926045
              0.0927174215860511
              0.0198227713399939

            
              45
              0.0982704402515723
              0.106744274402152
              0.00847383415057927

            
              46
              0.0770562770562771
              0.0839645544144424
              0.00690827735816535

            
              47
              0.117109634551495
              0.0978943188522365
              0.0192153156992586

            
              48
              0.0983125458547322
              0.0938410677756411
              0.0044714780790911

            
              49
              0.0714285714285714
              0.0859483870582455
              0.0145198156296741

            
              51
              0.0908333333333333
              0.0953483972349073
              0.00451506390157393

            
              50
              0.102817974105103
              0.0921639206419876
              0.0106540534631152

            
              53
              0.0711297071129707
              0.0925596128701326
              0.0214299057571619

            
              55
              0.0937996820349762
              0.0942786704790301
              0.000478988444053974

            
              54
              0.11340206185567
              0.100501528206439
              0.0129005336492309

            
              56
              0.0787728026533997
              0.0905360696736087
              0.011763267020209

## state-choropleth.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

.states {
  fill: none;
  stroke: #000;
  stroke-linejoin: round;
}

.q0-9 { fill:rgb(247,251,255); }
.q1-9 { fill:rgb(222,235,247); }
.q2-9 { fill:rgb(198,219,239); }
.q3-9 { fill:rgb(158,202,225); }
.q4-9 { fill:rgb(107,174,214); }
.q5-9 { fill:rgb(66,146,198); }
.q6-9 { fill:rgb(33,113,181); }
.q7-9 { fill:rgb(8,81,156); }
.q8-9 { fill:rgb(8,48,107); }

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/queue.v1.min.js"></script>
<script src="http://d3js.org/topojson.v0.min.js"></script>
<script>

var width = 960,
    height = 500;

var quantize = d3.scale.quantize()
    .domain([0, .17])
    .range(d3.range(9).map(function(i) { return "q" + i + "-9"; }));

var path = d3.geo.path();

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

queue()
    .defer(d3.json, "us-10m.json")
    .defer(d3.csv, "state-choropleth.csv")
    .await(ready);

function ready(error, us, asthmadata) {
  var rateById = {};
  asthmadata.forEach(function(d) { rateById[d.State] = +d.Response; });
  console.log(rateById);
  svg.append("g")
      .attr("class", "states")
    .selectAll("path")
      .data(topojson.object(us, us.objects.states).geometries)
    .enter().append("path")
      .attr("class", function(d) {return quantize(rateById[d.id]) })
      .attr("d", path);
}

</script>

## us-10m.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              us-10m.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.
State	Response	Predicted	Difference
1	0.0526762956669499	0.0983417957543063	0.0456655000873564
2	0.116140051238258	0.109308795975831	0.00683125526242642
5	0.096722621902478	0.103514578497592	0.00679195659511383
4	0.0998322147651007	0.0942662765956997	0.00556593816940097
6	0.0888501742160279	0.0957795913389227	0.00692941712289478
8	0.102857142857143	0.0899265569700815	0.0129305858870613
9	0.114285714285714	0.0948882843180256	0.0193974299676887
11	0.166344294003868	0.139210777071404	0.0271335169324649
10	0.130327868852459	0.102019406504546	0.0283084623479134
12	0.0914479254868755	0.0967140837003516	0.00526615821347605
13	0.116455696202532	0.105320125277631	0.0111355709249005
15	0.12241653418124	0.0973781470936476	0.0250383870875924
19	0.0675569520816968	0.0874754963884159	0.0199185443067191
16	0.083739837398374	0.0876404912819252	0.00390065388355117
17	0.10310021629416	0.100537808890023	0.00256240740413684
18	0.117408906882591	0.0944305388334601	0.022978368049131
20	0.105723370429253	0.0883922268028023	0.0173311436264505
21	0.112757201646091	0.0952584898118371	0.0174987118342534
22	0.0944170771756979	0.113883404411713	0.0194663272360153
25	0.115602263540825	0.0924094822875007	0.0231927812533238
24	0.114985163204748	0.113757872022582	0.00122729118216568
23	0.0948678071539658	0.0908546138994951	0.00401319325447069
26	0.110655737704918	0.101263563653564	0.00939217405135387
27	0.0775646371976647	0.0869683401721915	0.00940370297452676
29	0.104453441295547	0.0940928215211176	0.010360619774429
28	0.0925	0.119318091923169	0.0268180919231688
30	0.0836038961038961	0.0921566944887218	0.0085527983848257
37	0.096551724137931	0.105857160497344	0.00930543635941303
38	0.0884070058381985	0.0817546546320644	0.00665235120613414
31	0.0789259560618389	0.0870241231197248	0.00809816705788589
33	0.106686701728024	0.0872847870404996	0.0194019146875245
34	0.104253544620517	0.0960349816380214	0.00821856298249567
35	0.121835443037975	0.0972718710441837	0.024563571993791
32	0.0916463909164639	0.0937160679317704	0.00206967701530644
36	0.112269446672013	0.103094198569698	0.00917524810231471
39	0.0959438377535101	0.0958805469620007	6.32907915094905e-05
40	0.138986013986014	0.102778640359023	0.036207373626991
41	0.0959016393442623	0.0924068074666989	0.00349483187756343
42	0.128606760098928	0.0980241169694057	0.0305826431295226
44	0.112540192926045	0.0927174215860511	0.0198227713399939
45	0.0982704402515723	0.106744274402152	0.00847383415057927
46	0.0770562770562771	0.0839645544144424	0.00690827735816535
47	0.117109634551495	0.0978943188522365	0.0192153156992586
48	0.0983125458547322	0.0938410677756411	0.0044714780790911
49	0.0714285714285714	0.0859483870582455	0.0145198156296741
51	0.0908333333333333	0.0953483972349073	0.00451506390157393
50	0.102817974105103	0.0921639206419876	0.0106540534631152
53	0.0711297071129707	0.0925596128701326	0.0214299057571619
55	0.0937996820349762	0.0942786704790301	0.000478988444053974
54	0.11340206185567	0.100501528206439	0.0129005336492309
56	0.0787728026533997	0.0905360696736087	0.011763267020209
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	.states {
	fill: none;
	stroke: #000;
	stroke-linejoin: round;
	}

	.q0-9 { fill:rgb(247,251,255); }
	.q1-9 { fill:rgb(222,235,247); }
	.q2-9 { fill:rgb(198,219,239); }
	.q3-9 { fill:rgb(158,202,225); }
	.q4-9 { fill:rgb(107,174,214); }
	.q5-9 { fill:rgb(66,146,198); }
	.q6-9 { fill:rgb(33,113,181); }
	.q7-9 { fill:rgb(8,81,156); }
	.q8-9 { fill:rgb(8,48,107); }

	</style>
	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://d3js.org/queue.v1.min.js"></script>
	<script src="http://d3js.org/topojson.v0.min.js"></script>
	<script>

	var width = 960,
	height = 500;

	var quantize = d3.scale.quantize()
	.domain([0, .17])
	.range(d3.range(9).map(function(i) { return "q" + i + "-9"; }));

	var path = d3.geo.path();

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height);

	queue()
	.defer(d3.json, "us-10m.json")
	.defer(d3.csv, "state-choropleth.csv")
	.await(ready);

	function ready(error, us, asthmadata) {
	var rateById = {};
	asthmadata.forEach(function(d) { rateById[d.State] = +d.Response; });
	console.log(rateById);
	svg.append("g")
	.attr("class", "states")
	.selectAll("path")
	.data(topojson.object(us, us.objects.states).geometries)
	.enter().append("path")
	.attr("class", function(d) {return quantize(rateById[d.id]) })
	.attr("d", path);
	}

	</script>