CafeConVega · April 4, 2016 16:56
diff --git a/custom.css b/custom.css
 body {
  padding: 20px 0px 15px 20px;
  font-family: Helvetica, sans-serif;
  font-size: 10pt;
 }

 .intro {
  text-align: center;
 }

 .county {
  stroke: #fff;
  stroke-width: .5px;
 }

 .state {
  stroke: #fff;
  fill: none;
 }

 .selected{
  background: #ccc;
 }

 /*
 h3 {
  position: absolute;
  left: 350px;
  top: 200px;
 }
 */

 #metrics { 
    width: 90vw; 
    margin: auto;
    font-family: Helvetica, sans-serif;
 }

 #metrics h4 { 
    font-size: 13px;
    font-family: Helvetica, sans-serif; 
    text-align: center; 
    margin-bottom: 0; 
 }

 #metrics ul { 
    font-size: 12px; 
    font-family: Helvetica, sans-serif; 
    margin-left: 0; 
    padding: 0; 
 }

 #metrics ul li {
    list-style: none;
    padding: 2px 0;
    display: inline-block;
    width: 125px;
    height: 50px;
    cursor: pointer;
    text-align: center;
    font-size: 11px;
    border: 1px solid #e0e0e0;
 }
 /*

 #metrics ul li.bottom { 
    margin-bottom: 0; 
 }

 #metrics #demog { 
    width: 25vw; 
    float: left; 
 }

 #metrics .block-button { 
    width: 80px; 
    display: block; 
    float:left; 
    clear:both; 
 }
 */

 .tooltip {
  position: absolute;
  z-index: 10;
 }

 .tooltip p {
  background-color: white;
  border: gray 1px solid;
  padding: 2px;
  max-width: 180px;
  font-size: 10px;
  color: steelblue;
 }

 .metrics_button {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    margin: auto;
 }

 h2,h3 {
    text-align: center;
 }

 svg{
    display: flex;
    margin:auto;
 }

 h4{
    padding-bottom: 10px;
 }
diff --git a/fldiagbycounty.csv b/fldiagbycounty.csv
diff --git a/index.html b/index.html
 <!DOCTYPE html>

 <meta charset="utf-8">
 <head>
 <script src="//d3js.org/d3.v3.min.js"></script>
 <script src="//d3js.org/topojson.v1.min.js"></script>
 <script src="https://d3js.org/queue.v1.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/1.9.0/d3-legend.js"></script>
 <link href="custom.css" rel="stylesheet" type="text/css" />    
 </head>

 <body>

 <h2>Top Disease Groups in Florida</h2>

 <p class="intro">Source: <a href="http://www.floridahealthfinder.gov/Researchers/OrderData/order-data.aspx">AHCA Inpatient Discharge Data</a>, Volume of grouped ICD-9 diagnosis codes for July 2014 - June 2015 per 100,000 people.</p>
 <div id="metrics">
        <h4>Choose a Disease Group to Map:</h4>
  <div id="demog">
        <ul class="metrics_button">
        <li data-metric="certain_conditions_originating_in_the_perinatal_period" class="selected urban">Conditions Originating in the Perinatal Period</li>
        <li data-metric="complication_of_pregnancy,_childbirth_and_puerperium" class="rural">Complication of Pregnancy, Childbirth and Puerperium</li>
        <li data-metric="congenital_anomalies" class="differenceLoc">Congenital Anomalies</li>
        <li data-metric="diseases_of_the_blood_and_blood-forming_organs" class="differenceLoc">Diseases of the Blood and Blood-Forming Organs</li>
        <li data-metric="diseases_of_the_circulatory_system" class="differenceLoc">Diseases of the Circulatory System</li>
        <li data-metric="diseases_of_the_digestive_system" class="differenceLoc">Diseases of the Digestive System</li>
        <li data-metric="diseases_of_the_genitourinary_system" class="differenceLoc">Diseases of the Genitourinary System</li>
        <li data-metric="diseases_of_the_musculoskeletal_system_and_connective_tissue" class="differenceLoc">Diseases of the Musculoskeletal System and Connective Tissue</li>
        <li data-metric="diseases_of_the_nervous_system_and_sense_organs" class="differenceLoc">Diseases of the Nervous System and Sense Organs</li>
        <li data-metric="diseases_of_the_respiratory_system" class="differenceLoc">Diseases of the Repiratory System</li>
        <li data-metric="diseases_of_the_skin_and_subcutaneous_tissue" class="differenceLoc">Diseases of the Skin and Subcutaneous Tissue</li>
        <li data-metric="endocrine,_nutritional_and_metabolic_diseases,_and_immunity_disorders" class="differenceLoc">Endocrine, Nutritional and Metabolic Diseases, and Immunity Disorders</li>
        <li data-metric="infectious_and_parasitic_diseases" class="differenceLoc">Infectious and Parasitic Diseases</li>
        <li data-metric="injury_and_poisoning" class="differenceLoc">Injury and Poisoning</li>
        <li data-metric="mental_disorders" class="differenceLoc">Mental Disorders</li>
        <li data-metric="neoplasms" class="differenceLoc">Neoplasms</li>
        <li data-metric="supplementary_classification_of_factors_influencing_health_status_and_contact_with_health_services" class="differenceLoc">Factors Influencing Health Status and Contact with Health Services</li>
        <li data-metric="symptoms,_signs,_and_ill-defined_conditions" class="differenceLoc">Symptoms, Signs, and Ill-Defined Conditions</li>
        </ul>
    </div>
 </div>

 <h3 id="chartLabel">Map of Counties with Conditions Originating in the Perinatal Period</h3>

 <script>

 var current = "certain_conditions_originating_in_the_perinatal_period"; // default view

 var width = 600,
    height = 450;

 // use a d3 map to make a lookup table for the string in the chart title
 var chartLabels = d3.map();
  chartLabels.set("certain_conditions_originating_in_the_perinatal_period", "Conditions Originating in the Perinatal Period");
  chartLabels.set("complication_of_pregnancy,_childbirth_and_puerperium", "Complication of Pregnancy, Childbirth and Puerperium");
  chartLabels.set("congenital_anomalies", "Congenital Anomalies");
  chartLabels.set("diseases_of_the_blood_and_blood-forming_organs", "Diseases of the Blood and Blood-Forming Organs");
  chartLabels.set("diseases_of_the_circulatory_system", "Diseases of the Circulatory System");
  chartLabels.set("diseases_of_the_digestive_system", "Diseases of the Digestive System");
  chartLabels.set("diseases_of_the_genitourinary_system", "Diseases of the Genitourinary System");
  chartLabels.set("diseases_of_the_musculoskeletal_system_and_connective_tissue", "Diseases of the Musculoskeletal System and Connective Tissue");
  chartLabels.set("diseases_of_the_nervous_system_and_sense_organs", "Diseases of the Nervous System and Sense Organs");
  chartLabels.set("diseases_of_the_respiratory_system", "Diseases of the Repiratory System");
  chartLabels.set("diseases_of_the_skin_and_subcutaneous_tissue", "Diseases of the Skin and Subcutaneous Tissue");
  chartLabels.set("endocrine,_nutritional_and_metabolic_diseases,_and_immunity_disorders", "Endocrine, Nutritional and Metabolic Diseases, and Immunity Disorders");
  chartLabels.set("infectious_and_parasitic_diseases" ,"Infectious and Parasitic Diseases");
  chartLabels.set("injury_and_poisoning" ,"Injury and Poisoning");
  chartLabels.set("mental_disorders" ,"Mental Disorders");
  chartLabels.set("neoplasms" ,"Neoplasms");
  chartLabels.set("supplementary_classification_of_factors_influencing_health_status_and_contact_with_health_services" ,"Factors Influencing Health Status and Contact with Health Services");
  chartLabels.set("symptoms,_signs,_and_ill-defined_conditions" ,"Symptoms, Signs, and Ill-Defined Conditions");


 // Not going to lie, there's a ton of trial and error here.
 var projection = d3.geo.conicEqualArea()
      .parallels([31,25])
      .rotate([81, 0])
      .center([0, 28])
      .translate([425,175])
      .scale(3000);

 var path = d3.geo.path()
    .projection(projection);

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

 var tooltip = d3.select("body").append("div").attr("class", "tooltip");

 var idLookup = d3.map();

 // all our data is a binary 1 or 2 for this dataset.
 var colorScale = d3.scale.linear().range(["#fee0d2", "#de2d26"]);

 // we use queue because we have 2 data files to load.
 queue()
  .defer(d3.json, "us_counties_topo.json")
  .defer(d3.csv, "fldiagbycounty.csv", typeAndSet) // process
  .await(loaded);

 function loaded(error, us, data) {
  if (error) throw error;
    
 colorScale.domain(d3.extent(data, function(d) { return +d[current];}));
    
  var states = topojson.feature(us, us.objects.states).features;
  var florida = states.filter(function(d) { return d.id == 12;})[0];
  var counties = topojson.feature(us, us.objects.counties).features;
  var flcounties = counties.filter(function(d) {
    return d.id.toString().match(/^12/); // look for counties starting with 12
  });
  console.log("counties",flcounties);

  svg.selectAll("path.state")
    .data(florida)
    .enter().append("path")
      .attr("d", path)
      .attr("class", "state");

  svg.selectAll("path.county")
      .data(flcounties)
    .enter().append("path")
      .attr("d", path)
      .attr("class", "county")
      .attr("fill", function(d,i) {
        var data = idLookup.get(d.id);
        if (data) {
          return colorScale(+data[current]);
        } else {
          return "darkgray";
        }
      })
      .on("mouseover", mouseover)
      .on("mousemove", mousemove)
      .on("mouseout", mouseout);
    
 d3.selectAll("#metrics li")
    .on("click", function() {
        var item = d3.select(this);
        d3.selectAll(".metrics_button li").classed("selected", false);
        current = item.attr("data-metric");
        colorScale.domain(d3.extent(data, function(d) { return +d[current];}));
         
        legendColors = d3.legend.color()
            .shapeWidth(20)
            .title("Diagnoses per 100,000 People")
            .labelFormat(d3.format("1f"))
            .scale(colorScale); // our existing color scale

            svg.select(".legendColors")
            .call(legendColors);
    
        var label = chartLabels.get(current);
        item.classed("selected", true);
        item.classed(item.attr("data-metric"), true);
        updateFill(current);
        d3.select("h3#chartLabel").text("Map of Counties with " + label);
    });
 console.log("data", data);

 svg.append("g")
    .attr("class", "legendColors")
        .attr("transform", "translate(100, 175)"); // where we put it on the page!

    var legendColors = d3.legend.color()
    .shapeWidth(20)
    .title("Diagnoses per 100,000 People")
    .labelFormat(d3.format("1f"))
    .scale(colorScale); // our existing color scale

    svg.select(".legendColors")
    .call(legendColors);
    
 var range = d3.extent(data, function(d) { return +d[current];});
    
 } // end loaded;


  function updateFill(current) {

    console.log("current", current);
      
    svg.selectAll("path.county")
      .transition()
      .attr("fill", function(d) {
        var data = idLookup.get(d.id);
        if (data) {
          return colorScale(+data[current]);
        } else {
          return "darkgray";
        }
      });
  }

  function typeAndSet(d) {
    // create the lookup hash for the county id in the map (id) and data (fipstxt)
    idLookup.set(+d.FIPStxt, d);
    return d;
  }

  d3.selection.prototype.moveToFront = function() {
    return this.each(function(){
      this.parentNode.appendChild(this);
    });
  };

 function mouseover(d) {

    d3.select(this)
      .transition()
      .style("stroke", "#8A0829")
      .style("stroke-width", "2");

    d3.select(this).moveToFront();

    var data = idLookup.get(d.id);

    tooltip
      .style("display", null) // this removes the display none setting from it
      .html("<p>" + data[current] + " diagnoses per 100,000 people in " + data.county_name + ", " + data.state +"</p>");

  }

  function mousemove(d) {
    tooltip
      .style("top", (d3.event.pageY - 10) + "px" )
      .style("left", (d3.event.pageX + 10) + "px");
    }


  function mouseout(d) {
    d3.select(this)
      .transition()
      .style("stroke", null)
      .style("stroke-width", null);

    tooltip.style("display", "none");  // this sets it to invisible!
  }


 </script>
diff --git a/us_counties_topo.json b/us_counties_topo.json
	body {
	padding: 20px 0px 15px 20px;
	font-family: Helvetica, sans-serif;
	font-size: 10pt;
	}

	.intro {
	text-align: center;
	}

	.county {
	stroke: #fff;
	stroke-width: .5px;
	}

	.state {
	stroke: #fff;
	fill: none;
	}

	.selected{
	background: #ccc;
	}

	/*
	h3 {
	position: absolute;
	left: 350px;
	top: 200px;
	}
	*/

	#metrics {
	width: 90vw;
	margin: auto;
	font-family: Helvetica, sans-serif;
	}

	#metrics h4 {
	font-size: 13px;
	font-family: Helvetica, sans-serif;
	text-align: center;
	margin-bottom: 0;
	}

	#metrics ul {
	font-size: 12px;
	font-family: Helvetica, sans-serif;
	margin-left: 0;
	padding: 0;
	}

	#metrics ul li {
	list-style: none;
	padding: 2px 0;
	display: inline-block;
	width: 125px;
	height: 50px;
	cursor: pointer;
	text-align: center;
	font-size: 11px;
	border: 1px solid #e0e0e0;
	}
	/*

	#metrics ul li.bottom {
	margin-bottom: 0;
	}

	#metrics #demog {
	width: 25vw;
	float: left;
	}

	#metrics .block-button {
	width: 80px;
	display: block;
	float:left;
	clear:both;
	}
	*/

	.tooltip {
	position: absolute;
	z-index: 10;
	}

	.tooltip p {
	background-color: white;
	border: gray 1px solid;
	padding: 2px;
	max-width: 180px;
	font-size: 10px;
	color: steelblue;
	}

	.metrics_button {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	margin: auto;
	}

	h2,h3 {
	text-align: center;
	}

	svg{
	display: flex;
	margin:auto;
	}

	h4{
	padding-bottom: 10px;
	}
FIPStxt	state	county_name	certain_conditions_originating_in_the_perinatal_period	complication_of_pregnancy,_childbirth_and_puerperium	congenital_anomalies	diseases_of_the_blood_and_blood-forming_organs	diseases_of_the_circulatory_system	diseases_of_the_digestive_system	diseases_of_the_genitourinary_system	diseases_of_the_musculoskeletal_system_and_connective_tissue	diseases_of_the_nervous_system_and_sense_organs	diseases_of_the_respiratory_system	diseases_of_the_skin_and_subcutaneous_tissue	endocrine,_nutritional_and_metabolic_diseases,_and_immunity_disorders	infectious_and_parasitic_diseases	injury_and_poisoning	mental_disorders	neoplasms	supplementary_classification_of_factors_influencing_health_status_and_contact_with_health_services	symptoms,_signs,_and_ill-defined_conditions
12001	FL	Alachua County	35	1223	22	200	1503	1001	534	649	253	972	230	459	659	922	926	364	1369	449
12003	FL	Baker County	31	1251	48	222	1945	1153	664	671	369	1640	233	568	738	1101	611	319	1291	626
12005	FL	Bay County	45	1429	47	123	2230	1314	654	862	327	1380	279	423	907	1109	1042	404	2024	723
12007	FL	Bradford County	49	1118	24	268	2374	1605	730	802	355	1816	356	607	716	1277	692	422	1193	649
12009	FL	Brevard County	28	940	28	206	2346	1425	718	945	317	1287	268	470	707	1179	757	546	1261	575
12011	FL	Broward County	21	1247	17	248	1473	1140	586	482	213	983	315	395	497	847	1189	442	1522	537
12013	FL	Calhoun County	42	958	56	160	1952	1258	709	564	224	1510	230	458	521	601	767	343	1044	527
12015	FL	Charlotte County	41	627	45	155	2881	1858	914	1286	366	1658	303	461	792	1450	764	678	899	680
12017	FL	Citrus County	46	792	43	165	3106	1914	876	1495	311	1455	361	466	780	1776	963	643	1109	812
12019	FL	Clay County	19	1008	22	131	1857	1243	645	833	301	1088	214	446	813	939	794	362	1138	607
12021	FL	Collier County	19	950	33	112	1528	1025	464	806	168	711	176	234	455	858	531	357	1162	259
12023	FL	Columbia County	77	1353	31	227	2491	1723	798	697	301	1638	284	661	721	1069	725	422	1395	847
12027	FL	DeSoto County	50	1036	80	182	2036	1318	595	753	254	1149	310	451	548	936	364	381	1211	319
12029	FL	Dixie County	42	982	24	184	2451	1542	742	855	339	1806	581	701	1011	1626	723	530	1090	707
12031	FL	Duval County	28	1444	27	237	2009	1330	715	728	358	1301	312	632	889	1052	1017	410	1550	700
12033	FL	Escambia County	49	1269	22	162	2040	1227	687	690	237	1237	286	551	668	1066	1531	391	1310	433
12035	FL	Flagler County	22	797	36	185	2263	1425	575	972	250	1006	240	457	884	1048	543	447	1050	362
12037	FL	Franklin County	62	1078	44	174	1940	1194	705	675	220	1259	378	547	602	1053	650	536	1388	434
12039	FL	Gadsden County	45	1313	42	370	2380	1257	629	606	312	1088	196	437	794	881	839	620	1553	663
12041	FL	Gilchrist County	59	1206	30	142	2156	1450	654	951	259	1577	338	543	801	1273	639	506	1310	738
12043	FL	Glades County	21	459	28	73	1362	806	225	476	114	949	219	248	204	523	171	128	505	313
12045	FL	Gulf County	19	919	24	162	2454	1243	727	872	243	1463	175	434	862	1012	672	415	1462	737
12047	FL	Hamilton County	70	1218	0	252	1701	1190	588	560	294	1309	224	525	735	784	637	476	1162	560
12049	FL	Hardee County	41	1588	51	126	1977	1172	755	414	229	1067	177	393	785	930	338	367	2193	308
12051	FL	Hendry County	110	1604	37	222	1805	1290	642	569	315	1520	345	527	633	916	408	444	1709	570
12053	FL	Hernando County	34	896	46	166	2714	1928	908	1056	364	1413	341	417	948	1405	1231	598	1520	897
12055	FL	Highlands County	56	1058	36	186	3193	1588	786	830	221	1580	290	511	1161	1217	795	475	1144	395
12057	FL	Hillsborough County	29	1387	28	192	1603	1250	622	535	273	1064	263	380	630	877	736	401	1474	478
12059	FL	Holmes County	35	1026	51	20	1580	823	534	519	116	1317	339	194	423	617	1057	344	1184	282
12061	FL	Indian River County	38	925	38	142	2248	1369	579	1007	254	1194	224	354	599	1246	1215	553	1722	412
12063	FL	Jackson County	42	877	22	193	1293	785	550	416	159	1441	265	385	384	581	713	299	1019	286
12065	FL	Jefferson County	35	953	21	269	2507	1215	757	754	323	1303	261	553	858	898	740	611	1298	600
12067	FL	Lafayette County	36	737	12	142	1432	669	616	386	95	897	293	153	511	570	318	225	796	409
12069	FL	Lake County	37	1046	43	221	2908	1746	861	999	318	1505	373	549	910	1341	841	558	1206	783
12071	FL	Lee County	45	989	19	127	2068	1364	595	901	233	1101	252	392	679	992	553	408	1154	621
12073	FL	Leon County	24	1147	20	173	1303	698	387	500	231	697	154	278	459	581	772	327	1412	372
12075	FL	Levy County	30	1184	43	144	2535	1513	724	879	289	1531	357	529	891	1476	723	588	1306	744
12077	FL	Liberty County	24	984	60	180	2112	984	564	612	480	1212	300	324	552	684	648	300	1128	504
12079	FL	Madison County	31	1071	20	278	1928	802	484	523	244	1398	219	478	533	630	739	307	1275	430
12081	FL	Manatee County	31	1040	31	164	1850	1307	650	849	236	976	239	359	464	1049	841	423	1425	430
12083	FL	Marion County	29	1065	43	204	2581	1426	687	886	259	1374	298	453	767	1274	750	544	1376	668
12085	FL	Martin County	26	837	39	124	1980	1279	594	987	212	1295	266	302	618	1214	567	552	1278	432
12086	FL	Miami-Dade County	31	1264	17	239	1588	1191	676	425	249	1060	289	400	545	816	1308	494	1483	480
12087	FL	Monroe County	39	1012	34	128	1745	1190	586	756	191	833	330	370	497	1025	816	434	1335	444
12089	FL	Nassau County	30	984	54	126	1937	1275	606	1010	324	1230	289	483	683	1082	677	395	1166	466
12091	FL	Okaloosa County	85	1283	42	143	1848	1102	551	773	262	980	232	363	635	1003	1124	431	1356	379
12093	FL	Okeechobee County	60	1427	40	208	3732	2436	956	1000	472	2314	719	620	1048	1654	582	650	1612	1498
12095	FL	Orange County	21	1367	20	185	1507	1149	556	523	277	890	257	417	531	815	927	389	1436	837
12097	FL	Osceola County	27	1277	33	192	1711	1442	629	524	332	1147	285	449	660	880	694	422	1298	944
12099	FL	Palm Beach County	25	1095	24	229	1878	1312	662	664	235	1162	325	372	502	1035	958	431	1277	658
12101	FL	Pasco County	43	1013	25	147	2305	1555	801	736	287	1339	378	413	756	1135	1294	453	1142	683
12103	FL	Pinellas County	87	931	24	159	2151	1406	751	830	312	1282	311	435	802	1244	1178	497	1158	582
12105	FL	Polk County	36	1268	31	225	2284	1560	767	711	265	1547	326	571	687	959	921	479	1338	650
12107	FL	Putnam County	46	1240	34	176	2834	1418	713	811	223	1524	373	596	878	1225	736	478	1353	680
12109	FL	St. Johns County	15	937	25	107	1600	987	410	801	162	843	181	317	656	824	692	308	1102	349
12111	FL	St. Lucie County	31	1086	34	221	2449	1438	721	895	343	1297	338	467	823	1204	882	495	1413	799
12113	FL	Santa Rosa County	60	1031	34	121	1863	1205	627	706	218	1064	237	433	520	1017	1016	376	1106	434
12115	FL	Sarasota County	16	661	18	124	1910	1218	494	930	181	971	204	302	478	1024	778	452	1252	313
12117	FL	Seminole County	15	991	14	152	1416	1094	517	567	248	789	220	334	542	774	946	364	1102	650
12119	FL	Sumter County	20	483	39	183	3159	1689	792	1623	288	1359	286	414	670	1428	579	709	727	643
12121	FL	Suwannee County	57	1161	24	214	2613	1455	748	739	282	1669	325	522	1255	1109	614	447	1192	571
12123	FL	Taylor County	55	1033	16	259	1764	1081	604	727	201	1401	286	580	539	917	577	388	1296	323
12125	FL	Union County	28	1112	27	220	2326	1877	785	915	444	1561	351	572	1226	2060	528	911	1271	616
12127	FL	Volusia County	24	953	20	184	2168	1373	543	812	251	1156	285	426	873	1088	850	437	1201	514
12129	FL	Wakulla County	28	1178	43	89	1793	1066	527	602	350	967	235	297	575	787	845	404	1326	442
12131	FL	Walton County	37	1179	18	142	1449	1078	463	689	179	1048	207	273	508	801	636	345	1273	227
12133	FL	Washington County	36	916	28	96	1690	790	593	469	152	1111	180	236	536	624	665	292	1262	333
	<!DOCTYPE html>

	<meta charset="utf-8">
	<head>
	<script src="//d3js.org/d3.v3.min.js"></script>
	<script src="//d3js.org/topojson.v1.min.js"></script>
	<script src="https://d3js.org/queue.v1.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/1.9.0/d3-legend.js"></script>
	<link href="custom.css" rel="stylesheet" type="text/css" />
	</head>

	<body>

	<h2>Top Disease Groups in Florida</h2>

	<p class="intro">Source: <a href="http://www.floridahealthfinder.gov/Researchers/OrderData/order-data.aspx">AHCA Inpatient Discharge Data</a>, Volume of grouped ICD-9 diagnosis codes for July 2014 - June 2015 per 100,000 people.</p>
	<div id="metrics">
	<h4>Choose a Disease Group to Map:</h4>
	<div id="demog">
	<ul class="metrics_button">
	<li data-metric="certain_conditions_originating_in_the_perinatal_period" class="selected urban">Conditions Originating in the Perinatal Period</li>
	<li data-metric="complication_of_pregnancy,_childbirth_and_puerperium" class="rural">Complication of Pregnancy, Childbirth and Puerperium</li>
	<li data-metric="congenital_anomalies" class="differenceLoc">Congenital Anomalies</li>
	<li data-metric="diseases_of_the_blood_and_blood-forming_organs" class="differenceLoc">Diseases of the Blood and Blood-Forming Organs</li>
	<li data-metric="diseases_of_the_circulatory_system" class="differenceLoc">Diseases of the Circulatory System</li>
	<li data-metric="diseases_of_the_digestive_system" class="differenceLoc">Diseases of the Digestive System</li>
	<li data-metric="diseases_of_the_genitourinary_system" class="differenceLoc">Diseases of the Genitourinary System</li>
	<li data-metric="diseases_of_the_musculoskeletal_system_and_connective_tissue" class="differenceLoc">Diseases of the Musculoskeletal System and Connective Tissue</li>
	<li data-metric="diseases_of_the_nervous_system_and_sense_organs" class="differenceLoc">Diseases of the Nervous System and Sense Organs</li>
	<li data-metric="diseases_of_the_respiratory_system" class="differenceLoc">Diseases of the Repiratory System</li>
	<li data-metric="diseases_of_the_skin_and_subcutaneous_tissue" class="differenceLoc">Diseases of the Skin and Subcutaneous Tissue</li>
	<li data-metric="endocrine,_nutritional_and_metabolic_diseases,_and_immunity_disorders" class="differenceLoc">Endocrine, Nutritional and Metabolic Diseases, and Immunity Disorders</li>
	<li data-metric="infectious_and_parasitic_diseases" class="differenceLoc">Infectious and Parasitic Diseases</li>
	<li data-metric="injury_and_poisoning" class="differenceLoc">Injury and Poisoning</li>
	<li data-metric="mental_disorders" class="differenceLoc">Mental Disorders</li>
	<li data-metric="neoplasms" class="differenceLoc">Neoplasms</li>
	<li data-metric="supplementary_classification_of_factors_influencing_health_status_and_contact_with_health_services" class="differenceLoc">Factors Influencing Health Status and Contact with Health Services</li>
	<li data-metric="symptoms,_signs,_and_ill-defined_conditions" class="differenceLoc">Symptoms, Signs, and Ill-Defined Conditions</li>
	</ul>
	</div>
	</div>

	<h3 id="chartLabel">Map of Counties with Conditions Originating in the Perinatal Period</h3>

	<script>

	var current = "certain_conditions_originating_in_the_perinatal_period"; // default view

	var width = 600,
	height = 450;

	// use a d3 map to make a lookup table for the string in the chart title
	var chartLabels = d3.map();
	chartLabels.set("certain_conditions_originating_in_the_perinatal_period", "Conditions Originating in the Perinatal Period");
	chartLabels.set("complication_of_pregnancy,_childbirth_and_puerperium", "Complication of Pregnancy, Childbirth and Puerperium");
	chartLabels.set("congenital_anomalies", "Congenital Anomalies");
	chartLabels.set("diseases_of_the_blood_and_blood-forming_organs", "Diseases of the Blood and Blood-Forming Organs");
	chartLabels.set("diseases_of_the_circulatory_system", "Diseases of the Circulatory System");
	chartLabels.set("diseases_of_the_digestive_system", "Diseases of the Digestive System");
	chartLabels.set("diseases_of_the_genitourinary_system", "Diseases of the Genitourinary System");
	chartLabels.set("diseases_of_the_musculoskeletal_system_and_connective_tissue", "Diseases of the Musculoskeletal System and Connective Tissue");
	chartLabels.set("diseases_of_the_nervous_system_and_sense_organs", "Diseases of the Nervous System and Sense Organs");
	chartLabels.set("diseases_of_the_respiratory_system", "Diseases of the Repiratory System");
	chartLabels.set("diseases_of_the_skin_and_subcutaneous_tissue", "Diseases of the Skin and Subcutaneous Tissue");
	chartLabels.set("endocrine,_nutritional_and_metabolic_diseases,_and_immunity_disorders", "Endocrine, Nutritional and Metabolic Diseases, and Immunity Disorders");
	chartLabels.set("infectious_and_parasitic_diseases" ,"Infectious and Parasitic Diseases");
	chartLabels.set("injury_and_poisoning" ,"Injury and Poisoning");
	chartLabels.set("mental_disorders" ,"Mental Disorders");
	chartLabels.set("neoplasms" ,"Neoplasms");
	chartLabels.set("supplementary_classification_of_factors_influencing_health_status_and_contact_with_health_services" ,"Factors Influencing Health Status and Contact with Health Services");
	chartLabels.set("symptoms,_signs,_and_ill-defined_conditions" ,"Symptoms, Signs, and Ill-Defined Conditions");


	// Not going to lie, there's a ton of trial and error here.
	var projection = d3.geo.conicEqualArea()
	.parallels([31,25])
	.rotate([81, 0])
	.center([0, 28])
	.translate([425,175])
	.scale(3000);

	var path = d3.geo.path()
	.projection(projection);

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

	var tooltip = d3.select("body").append("div").attr("class", "tooltip");

	var idLookup = d3.map();

	// all our data is a binary 1 or 2 for this dataset.
	var colorScale = d3.scale.linear().range(["#fee0d2", "#de2d26"]);

	// we use queue because we have 2 data files to load.
	queue()
	.defer(d3.json, "us_counties_topo.json")
	.defer(d3.csv, "fldiagbycounty.csv", typeAndSet) // process
	.await(loaded);

	function loaded(error, us, data) {
	if (error) throw error;

	colorScale.domain(d3.extent(data, function(d) { return +d[current];}));

	var states = topojson.feature(us, us.objects.states).features;
	var florida = states.filter(function(d) { return d.id == 12;})[0];
	var counties = topojson.feature(us, us.objects.counties).features;
	var flcounties = counties.filter(function(d) {
	return d.id.toString().match(/^12/); // look for counties starting with 12
	});
	console.log("counties",flcounties);

	svg.selectAll("path.state")
	.data(florida)
	.enter().append("path")
	.attr("d", path)
	.attr("class", "state");

	svg.selectAll("path.county")
	.data(flcounties)
	.enter().append("path")
	.attr("d", path)
	.attr("class", "county")
	.attr("fill", function(d,i) {
	var data = idLookup.get(d.id);
	if (data) {
	return colorScale(+data[current]);
	} else {
	return "darkgray";
	}
	})
	.on("mouseover", mouseover)
	.on("mousemove", mousemove)
	.on("mouseout", mouseout);

	d3.selectAll("#metrics li")
	.on("click", function() {
	var item = d3.select(this);
	d3.selectAll(".metrics_button li").classed("selected", false);
	current = item.attr("data-metric");
	colorScale.domain(d3.extent(data, function(d) { return +d[current];}));

	legendColors = d3.legend.color()
	.shapeWidth(20)
	.title("Diagnoses per 100,000 People")
	.labelFormat(d3.format("1f"))
	.scale(colorScale); // our existing color scale

	svg.select(".legendColors")
	.call(legendColors);

	var label = chartLabels.get(current);
	item.classed("selected", true);
	item.classed(item.attr("data-metric"), true);
	updateFill(current);
	d3.select("h3#chartLabel").text("Map of Counties with " + label);
	});
	console.log("data", data);

	svg.append("g")
	.attr("class", "legendColors")
	.attr("transform", "translate(100, 175)"); // where we put it on the page!

	var legendColors = d3.legend.color()
	.shapeWidth(20)
	.title("Diagnoses per 100,000 People")
	.labelFormat(d3.format("1f"))
	.scale(colorScale); // our existing color scale

	svg.select(".legendColors")
	.call(legendColors);

	var range = d3.extent(data, function(d) { return +d[current];});

	} // end loaded;


	function updateFill(current) {

	console.log("current", current);

	svg.selectAll("path.county")
	.transition()
	.attr("fill", function(d) {
	var data = idLookup.get(d.id);
	if (data) {
	return colorScale(+data[current]);
	} else {
	return "darkgray";
	}
	});
	}

	function typeAndSet(d) {
	// create the lookup hash for the county id in the map (id) and data (fipstxt)
	idLookup.set(+d.FIPStxt, d);
	return d;
	}

	d3.selection.prototype.moveToFront = function() {
	return this.each(function(){
	this.parentNode.appendChild(this);
	});
	};

	function mouseover(d) {

	d3.select(this)
	.transition()
	.style("stroke", "#8A0829")
	.style("stroke-width", "2");

	d3.select(this).moveToFront();

	var data = idLookup.get(d.id);

	tooltip
	.style("display", null) // this removes the display none setting from it
	.html("<p>" + data[current] + " diagnoses per 100,000 people in " + data.county_name + ", " + data.state +"</p>");

	}

	function mousemove(d) {
	tooltip
	.style("top", (d3.event.pageY - 10) + "px" )
	.style("left", (d3.event.pageX + 10) + "px");
	}


	function mouseout(d) {
	d3.select(this)
	.transition()
	.style("stroke", null)
	.style("stroke-width", null);

	tooltip.style("display", "none"); // this sets it to invisible!
	}


	</script>