brandonhaydu · January 29, 2018 07:09
diff --git a/.block b/.block
 license: mit
diff --git a/README.md b/README.md
diff --git a/california-2016-county-results.csv b/california-2016-county-results.csv
diff --git a/counties.json b/counties.json
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width">
 <script src="https://d3js.org/d3.v4.min.js"></script>
 <title>2016 Presedential Votes</title>
 <style>

 @import url(//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.2/leaflet.css);
      body {
        margin: 0px;
      }
      .domain {
        display: none;
      }
      .tick line {
        stroke: #C0C0BB;
      }
      .tick text {
        fill: #8E8883;
        font-size: 10pt;
        font-family: sans-serif;
      }
      .axis-label {
        fill: #635F5D;
        font-size: 16pt;
        font-family: sans-serif;
      }
 			.topcorner{
  		 position:absolute;
  		 top:0;
 			 right:0;
  		 height: 250px;
  		 width: 480px;
       z-index: 100;
       background:white;
  		}
 #map {
  width: 960px;
  height: 500px;
 }

 path {
  fill: #000;
  fill-opacity: .2;
  stroke: #fff;
  stroke-width: 1.5px;
 }

 path:hover {
  fill: brown;
  fill-opacity: .7;
 }

 </style>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.js"></script>
 <script src="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.2/leaflet.js"></script>
 <body>
 <div class="topcorner">
    <svg width="480" height="250"></svg>
 </div>
 <div id="map"</div>
 <script>
  
 //**************************chart*****************************************
 var barChart = function(countyFP){
      const xValue = d => d.value;
      const xLabel = 'Votes';
      const yValue = d => d.name;
      const yLabel = 'Candidate';
      const margin = { left: 150, right: 30, top: 5, bottom: 75 };

      
  		const svg = d3.select('svg');
  		const svgRemove = svg.selectAll('*').remove();
      const width = svg.attr('width');
      const height = svg.attr('height');
      const innerWidth = width - margin.left - margin.right;
      const innerHeight = height - margin.top - margin.bottom;

      const g = svg.append('g')
          .attr('transform', `translate(${margin.left},${margin.top})`);
      const xAxisG = g.append('g')
          .attr('transform', `translate(0, ${innerHeight})`);
      const yAxisG = g.append('g');

      xAxisG.append('text')
          .attr('class', 'axis-label')
          .attr('x', innerWidth / 2)
          .attr('y', 55)
          .text(xLabel);

      const xScale = d3.scaleLinear();
      const yScale = d3.scaleBand()
        .paddingInner(0.3)
        .paddingOuter(0);

      const xTicks = 5;
      const xAxis = d3.axisBottom()
        .scale(xScale)
        .ticks(xTicks)
        .tickPadding(5)
        .tickFormat(d3.format('.0s'))
        .tickSize(-innerHeight);

      const yAxis = d3.axisLeft()
        .scale(yScale)
        .tickPadding(5)
        .tickSize(-innerWidth);

      const row = d => {
        return {
          county: d.countyfp10,
          attributes:[
          {
            name: 'Clinton', 
            value: Number(d.pres_clinton)
          },
          {
          	name: 'Trump', 
          	value: Number(d.pres_trump)
        },
          {
          	name: 'Johnson', 
          	value: Number(d.pres_johnson)
        },
          {
          	name: 'Stein', 
          	value: Number(d.pres_stein)
        },
          {
          	name: 'Lariva', 
          	value: Number(d.pres_lariva)
        },
          {
          	name: 'Other', 
          	value: Number(d.pres_other)
        }
      ]
        };
      };

      const top5 = data => data.slice(0, 5);      
      
      //function filterCriteria(d) {
    	//	return d.county === '037';
 			//};
        function filterCriteria(d) {
    		return d.county === countyFP;
 			};
        
        d3.csv('california-2016-county-results.csv', row, data => {        
        //data = top5(data);
        data = data.filter(filterCriteria);
        data = data[0]['attributes'];
        //console.log(data);
        //console.log(Object.keys(data)[0]);
        
        yScale
          .domain(data.map(yValue).reverse())
          .range([innerHeight, 0]);

        xScale
          .domain([0, d3.max(data, xValue)])
          .range([0, innerWidth])
          .nice(xTicks);

        g.selectAll('rect').data(data)
          .enter().append('rect')
            .attr('x', 0)
        		.attr('y', d => yScale(yValue(d)))
            .attr('width', d => xScale(xValue(d)))
            .attr('height', d => yScale.bandwidth())
            .attr('fill', 'steelblue');
      

        xAxisG.call(xAxis);

        yAxisG.call(yAxis);
        yAxisG.selectAll('.tick line').remove();
      });
   };
  barChart('037');
 //**************************chart*****************************************
 //**************************map*******************************************
 var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
    osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
    osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib});

 var map = L.map('map').setView([37.5, -115], 6).addLayer(osm);

 var svgMap = d3.select(map.getPanes().overlayPane).append("svg"),
    gMap = svgMap.append("g").attr("class", "leaflet-zoom-hide");

 var transform = d3.geoTransform({point: projectPoint}),
    path = d3.geoPath().projection(transform);

 d3.json("counties.json", function(error, ca) {
  var features = ca.objects.CA.geometries.map(function(d) { return topojson.feature(ca, d); });
  var all = topojson.merge(ca, ca.objects.CA.geometries);

  var states = gMap.selectAll("path")
      .data(features)
    	.enter()
      .append("path")
  		.on("mouseover", function(d){
    		//d3.select(this).transition(0).duration(0);
    		//console.log(d.properties.COUNTYFP)
        barChart(d.properties.COUNTYFP);
  			});

  map.on("viewreset", reset);
  reset();

  // Reposition the SVG to cover the features.
  function reset() {
    var bounds = path.bounds(all),
        topLeft = bounds[0],
        bottomRight = bounds[1];

    svgMap .attr("width", bottomRight[0] - topLeft[0])
        .attr("height", bottomRight[1] - topLeft[1])
        .style("left", topLeft[0] + "px")
        .style("top", topLeft[1] + "px");

    gMap.attr("transform", "translate(" + -topLeft[0] + "," + -topLeft[1] + ")");

    states.attr("d", path);
  }
 });

 // Use Leaflet to implement a D3 geometric transformation.
 function projectPoint(x, y) {
  // Returns the map layer point that corresponds to the given geographical coordinates
  var point = map.latLngToLayerPoint(new L.LatLng(y, x));
  this.stream.point(point.x, point.y);
 }
 //**************************map*******************************************
 </script>
diff --git a/us.json b/us.json
countyfp10	pres_clinton	pres_trump	pres_johnson	pres_stein	pres_lariva	pres_other	ussenate_harris	ussenate_sanchez	prop51_yes	prop51_no	prop52_yes	prop52_no	prop53_yes	prop53_no	prop54_yes	prop54_no	prop55_yes	prop55_no	prop56_yes	prop56_no	prop57_yes	prop57_no	prop58_yes	prop58_no	prop59_yes	prop59_no	prop60_yes	prop60_no	prop61_yes	prop61_no	prop62_yes	prop62_no	prop63_yes	prop63_no	prop64_yes	prop64_no	prop65_yes	prop65_no	prop66_yes	prop66_no	prop67_yes	prop67_no
001	514842	95922	16906	17830	3162	5604	443536	144134	388254	238800	474148	144095	236803	368952	391069	209933	464626	161335	477303	163267	484119	143590	512567	114819	388587	192115	253245	340950	345490	251476	379990	231919	478253	142826	417599	211277	282191	324200	231988	351432	433763	182455
003	334	217	25	21	3	2	342	133	323	266	397	175	279	294	304	265	367	215	368	227	398	183	424	155	365	199	178	388	250	309	304	280	278	310	370	224	176	404	236	308	321	264
005	6004	10485	804	227	55	159	8690	4872	6774	10753	9807	7627	9146	8125	10791	6439	8587	8864	7986	9884	7784	9773	10319	7160	6823	9914	6135	10882	5984	11388	5141	12430	5768	11938	8607	9291	5638	11746	9502	7477	6572	11082
007	41567	45144	4625	2594	501	1133	43491	30680	47658	45420	63181	28790	48918	41380	61353	29754	55286	37637	49566	46110	53534	40077	64490	28612	44846	43554	34112	56823	34153	57104	36322	57078	39619	54611	51034	44697	41067	51364	48592	40289	46666	47356
009	7944	13511	1104	424	56	97	11259	6302	9060	13578	13458	8945	12499	9687	14666	7631	12113	10508	10250	12991	12118	10676	14636	8142	9491	12269	8748	13417	8048	14652	6488	16313	7728	15448	11114	12341	7819	14853	13255	8800	8931	14061
011	2661	3551	260	85	39	36	2639	2502	3010	3486	3766	2654	3435	2945	3877	2475	3289	3157	3212	3359	3128	3353	4206	2282	2263	3995	2491	3805	2141	4316	1933	4544	2420	4140	2858	3675	2179	4214	3409	2834	2189	4231
013	319287	115956	16123	8637	1566	4606	282587	124731	253389	200091	315435	133026	202237	240321	278107	163890	291824	161760	319269	144498	311352	138363	340013	107062	245794	179953	189007	246343	227285	215815	230039	225545	319173	140534	281832	182350	215564	235857	208825	221586	264671	190246
015	3485	5134	416	245	81	197	4603	2939	3985	5139	5170	3979	5361	3716	5938	3092	5137	4049	4553	5018	4651	4741	6062	3288	4138	4859	3694	5163	3981	5162	2978	6353	3129	6375	5674	3863	3935	5372	5266	3787	3951	5459
017	36404	49247	5027	1425	190	1298	45671	26408	35260	56340	54068	36447	50619	38909	58323	31317	45642	45860	49611	44363	47697	44091	57258	34374	40344	46289	32096	57022	35615	54707	30603	61166	36896	56353	47047	47170	33928	57713	51605	36373	39077	53128
019	141341	124049	9246	4300	875	2508	117956	118148	142268	133435	174094	97202	135740	131031	168984	97760	162030	112808	161584	120662	131105	144383	191560	83727	116026	142781	122258	145454	98584	169946	101837	171290	135100	141909	132764	148923	103300	168273	130819	131205	111227	164117
021	3065	5788	375	97	54	91	3423	3793	4006	5315	5219	3993	5022	4112	5828	3268	4726	4494	4183	5197	4313	4886	5935	3320	3512	5395	3422	5621	2624	6579	2569	6737	2762	6644	4412	5046	3193	6105	4919	4022	3236	5839
023	33200	18373	2163	3681	379	1450	32729	16277	29171	28521	39269	17647	26106	29677	35074	21220	39664	18003	34940	23717	38737	18429	44358	12644	33513	21222	21309	34209	30429	24609	29409	27792	30397	27879	34692	24666	23783	33733	22416	31740	35339	22919
025	32667	12704	1221	745	339	415	13975	28872	30768	15613	31500	14738	28051	17440	30126	15607	32123	14291	33431	13313	29912	16823	37195	9616	22130	23262	27681	17851	23684	22339	20964	25278	29619	16446	20908	25236	25290	20068	24195	20444	23106	22556
027	3155	4248	328	214	51	90	3863	2258	3352	4430	4608	3151	3829	3785	4615	3010	4245	3560	4139	3930	4346	3505	5184	2670	3436	3964	3211	4307	2935	4743	2742	5096	3061	4888	4428	3637	2956	4832	3650	3741	3508	4376
029	98689	129584	9359	2887	1522	2122	98526	97689	124634	115348	146071	90995	126901	106571	149213	85849	130668	108311	118140	124665	122990	115949	149708	89283	91767	138768	112505	122704	83746	152260	73683	164932	98404	141895	111932	129808	84141	152766	129741	102322	86575	152159
031	13617	18093	1338	411	251	205	14655	13158	17209	16300	19978	13226	17115	15724	20716	11891	18527	14746	16662	17146	15009	18447	21675	11682	11643	20546	15183	17592	10419	22313	9938	22944	13479	19629	14562	18847	11024	21547	17122	14957	10999	21842
033	11496	10599	1095	930	103	273	13188	7003	11759	11915	15405	8142	11091	12262	13751	9491	15077	8684	12478	11910	14426	9371	16273	7495	11386	11381	9651	13613	10243	13361	9174	14766	10235	13959	14231	10058	9597	14080	11611	11205	11197	12538
035	2224	7574	473	105	46	102	4151	3226	3760	6669	5363	4970	6114	4159	6617	3663	4767	5604	4141	6419	3544	6874	5969	4430	3789	6247	3154	6878	3926	6223	2155	8290	1955	8609	4839	5771	2721	7632	6107	4059	2964	7528
037	2464364	769743	88968	76465	21993	12775	1895675	1218236	1899151	1338265	2371216	826314	1421892	1678235	2019011	1068036	2178331	1049940	2285802	1031179	2198324	1046466	2473207	747288	1673279	1393503	1658241	1540928	1633337	1563601	1689407	1540961	2337292	910775	1980546	1345826	1606799	1596712	1524234	1560523	1813966	1370306
039	17029	23357	1558	644	187	337	16769	17562	19263	22986	24882	17195	21550	20141	26571	15041	22179	20137	20516	22580	17802	24200	25588	16460	15461	25029	17357	23614	13444	28607	13637	28831	16541	26313	19348	23883	13425	28612	21069	19820	14341	28011
041	108707	21771	4180	3109	351	1155	98196	27101	75501	59081	100764	31288	46033	84111	81860	47594	90023	44617	105795	32588	108519	26979	109984	24833	90613	36420	46639	83141	71701	57175	90836	43846	110035	27156	96201	42003	61624	71182	47921	77645	100561	34674
043	3122	5185	326	189	55	0	4134	2519	3632	5184	5013	3727	4444	4215	5580	3074	4557	4272	3779	5239	4194	4623	5291	3526	3676	4736	2826	5702	2763	5908	2921	5896	2803	6096	4618	4375	2829	5963	4259	4231	3586	5217
045	22079	10888	1331	2108	151	920	22335	9564	19135	17166	25382	10598	15310	19826	21492	13789	25306	10903	22677	14680	25077	11273	27554	8895	22206	12849	13216	21950	18235	17403	18550	17941	19235	17756	20333	17135	15833	20395	13830	20311	23175	13172
047	37317	28725	2410	1209	454	674	30172	29835	41502	27383	45722	22394	37649	29467	44052	23222	43725	24660	39201	31222	38917	30381	49198	19859	28446	37865	34074	33290	25599	43141	25428	43165	35691	33761	35984	33916	27879	40377	35814	30971	28039	40424
049	877	2696	122	50	13	30	1531	1044	1177	2558	1895	1804	1863	1825	2170	1515	1628	2114	1400	2384	1599	2129	2206	1525	1341	2274	1226	2323	1111	2583	869	2877	756	3026	1756	2045	875	2814	1896	1718	1024	2739
051	2773	2111	222	142	23	5	2611	1591	2422	2802	3194	1949	2485	2539	3048	2010	3084	2119	3304	2029	3525	1675	3811	1403	2606	2328	1690	3352	2356	2663	2209	2972	2549	2747	3303	2061	2488	2700	2340	2561	3219	2055
053	89088	34895	4547	2823	661	1394	77659	43060	83302	45512	93296	34373	61207	64359	74535	51280	88138	40138	88664	41703	90466	38310	99011	29942	72983	54650	56260	72603	64531	64566	67883	63442	87122	45528	83673	49904	67461	60595	58970	64652	81226	47286
055	39199	17411	2551	1262	207	742	35925	17778	29916	29051	39331	18885	27463	30095	35774	21641	37131	21910	39625	20526	41247	18253	45761	13836	31678	24780	24753	32852	27833	30313	28818	30043	37301	22252	36731	23333	29434	28706	26867	28157	36902	21844
057	26053	23365	2378	2189	85	865	29639	13329	22670	31137	36823	16211	28120	24363	35293	17159	31258	22366	30666	24365	32652	21179	35874	17817	28089	23485	17336	34921	23397	29657	23691	30198	26132	28544	29342	26083	23855	29966	27269	23947	29775	24739
059	609961	507148	46128	18068	4898	11318	555459	486783	563623	585485	761980	371994	634740	476694	776875	336377	617948	528443	720588	462350	670417	486313	788234	368269	504847	577958	528435	606001	505920	633942	461301	698832	696018	473632	619701	571646	494805	654338	652016	450891	500001	661419
061	73509	95138	9245	2501	238	2208	89687	52192	78339	102363	109273	68530	97869	78020	115979	60443	91505	88893	99418	85656	98144	82636	117966	63195	77237	93292	66452	109707	65177	111889	58275	122422	81137	102082	89333	96228	69846	109742	106718	66127	76779	104991
063	3459	5420	411	186	29	171	4606	2418	3622	5993	5902	3594	5261	4183	5856	3554	5144	4481	4614	5190	5061	4560	6238	3362	4249	4863	3149	6025	3443	6018	3008	6586	3152	6510	5101	4669	3493	6075	5089	4059	3889	5741
065	373695	333243	24089	11320	3433	5611	339497	281437	402662	328295	477766	247128	399366	310706	486563	225979	434990	290028	422369	318539	415520	315622	496460	232119	311403	386970	381346	337893	294471	432797	256813	459745	387163	331144	384018	341609	305081	398566	398806	293715	288314	421371
067	326023	189789	24412	9846	2556	6704	312038	161673	289621	251862	365135	170425	280948	247556	345410	184162	346323	194584	328578	224433	340742	196109	392488	141365	248563	260034	232682	288391	236686	291506	236158	308045	312436	236285	300485	253571	257530	282453	272212	247222	276132	266591
069	12521	7841	815	364	138	245	11151	7568	11385	9800	13658	7451	10390	10429	12497	8242	13760	7762	13347	8501	12802	8661	15450	6000	10360	10079	9367	11570	8870	12295	8595	12896	11413	10236	12113	9729	10005	11181	10448	10047	10803	10597
071	340833	271240	21050	10604	3786	6470	300738	251246	343519	288604	420499	206821	347861	269789	417658	196780	380803	245363	367042	271911	360649	280341	443431	194336	264942	342537	345356	277142	262165	370326	232521	403387	343605	297514	336736	304223	257999	365208	351127	257972	244938	382306
073	735476	477766	51663	22820	3353	15322	625843	446063	679149	572579	860856	371253	625016	571650	787455	423432	756412	485004	810089	471616	832800	410126	900575	342557	615460	549674	525736	695577	558463	655410	560304	683234	781990	487445	744836	561478	598563	646134	632762	539907	660069	603852
075	345084	37688	8883	9904	1799	2434	286723	80985	253655	126327	297714	77996	113512	255184	230934	136703	278685	105114	323192	73408	314007	66162	330471	49257	272262	83248	116852	254927	190823	174206	269861	110308	336849	57278	295284	102347	156256	228423	115100	247741	296203	92426
077	121124	88936	8049	3134	903	2020	111563	81295	123955	94476	143032	73604	122573	91019	135856	75267	138308	80547	128236	94943	128644	90893	156128	63299	99312	109870	104306	110531	91590	125714	78730	139801	117335	103864	115205	107001	94183	121848	120928	88816	90037	127273
079	67107	56164	6473	2848	425	1992	69190	37455	65309	66651	85049	44144	64305	62485	81766	46400	78751	52668	78974	56090	81612	50323	93060	38556	65322	58996	49031	78895	52606	75601	56211	75331	69435	63958	78114	57234	62078	68562	67224	57244	79778	52778
081	237882	57929	9464	5102	1047	2960	199956	81090	176624	124151	218198	76962	121769	167784	175056	114306	197741	102466	229766	78670	219323	80908	238783	64971	183001	99429	117937	174806	149904	143881	172643	127762	232926	73965	195665	115088	159462	140187	126728	157508	202802	96541
083	107142	56365	6748	3719	693	2119	88861	60995	94945	76790	117526	50497	84433	80800	109960	56474	107410	63258	116814	58745	119581	52038	126915	45059	92383	69915	74446	92803	83359	82610	88337	82358	110771	62748	108228	67715	81651	88027	76646	85125	103493	69289
085	511684	144826	25325	12664	2759	6451	411765	207380	372953	308913	481890	191198	309131	351028	444163	214740	453360	227274	512501	184404	480141	201876	504508	165652	388319	242464	287455	362008	327823	323860	358930	305794	500802	176626	406385	290786	353709	326026	307306	336097	446530	231748
087	95249	22438	4325	4485	627	1697	81443	32720	70836	53402	90286	31793	48316	71496	70251	49815	91539	33029	92068	35530	93822	31191	99237	25364	80321	37651	43653	77590	64537	55173	79046	45152	90483	35668	89253	38450	60291	63683	44914	71941	93850	31815
089	22301	51778	3382	1300	329	963	31877	24369	29474	47964	41920	34837	43392	32555	47676	28251	38706	38741	36373	43349	32433	45330	46477	30902	29747	43694	29414	45747	24050	52828	21627	56208	21343	57432	38650	40978	23785	53675	41867	32567	27581	50777
091	601	1048	98	42	15	26	826	442	721	1070	1066	703	949	809	1060	706	935	863	807	1032	1018	770	1141	641	807	911	538	1169	658	1088	572	1223	550	1282	941	904	612	1173	841	860	700	1107
093	7234	11341	875	575	88	379	8744	6457	7987	11868	11754	7953	11495	8012	12490	7002	11067	8921	9787	10732	11164	8845	13786	6234	9465	9626	7086	12032	8699	10768	6696	13115	6419	13906	10668	9932	6216	13661	9622	9251	8114	11999
095	102360	51920	6254	2771	804	2004	97410	49229	86891	73110	107186	52146	81815	75265	94296	62040	104058	55979	101767	62337	105285	55865	121111	40180	80388	73040	74345	83072	74054	85179	69279	92017	96962	65922	96257	68597	74638	86091	81497	72134	76113	84042
097	160435	51408	8987	7347	679	2397	147532	54600	124588	97722	157303	62370	84500	131426	127767	86783	149241	72749	155868	74008	156090	67839	174690	49925	136286	77325	81209	135646	113040	104368	122533	100364	146122	79500	136358	94475	102280	122036	90929	122274	152594	73520
099	81647	78494	6662	2562	986	1795	80502	61219	98616	70571	111633	56120	96419	68172	111850	53877	101693	67115	95069	77393	92762	76376	113666	55202	69194	91540	78170	86551	65949	101610	55797	112520	80504	89141	86389	85654	69316	97563	95366	68058	67184	101717
101	13076	18176	1437	382	198	254	15191	11700	15111	16917	18785	13009	17049	14197	19646	11491	16806	15066	15821	16885	16248	15734	20291	11719	12373	17918	13060	18188	10653	21181	9427	22613	12046	20276	14954	17847	11051	20899	17948	12945	11044	21053
103	6809	15494	953	290	138	224	9456	7991	8753	14520	12585	10483	12892	10031	13974	8847	11381	11865	9974	13888	9894	13390	14111	9174	8766	13519	8746	13882	7153	15912	6211	17064	6237	17301	11495	12192	7325	15773	12177	10287	7500	16005
105	2214	2812	302	239	21	98	2696	1795	2346	3313	3417	2228	2941	2576	3467	2057	3244	2392	2482	3297	2824	2858	3846	1789	2713	2766	1953	3543	2111	3424	2001	3599	1733	3955	2880	2874	1734	3907	2705	2708	2523	3165
107	47585	58299	3800	1620	636	394	47145	44044	56356	54367	68911	41132	59430	49173	68555	39561	59696	50699	57093	55508	49782	61030	68421	42397	40094	66023	47101	61559	36166	73592	35881	74601	45971	65162	50531	61760	41771	67842	57682	49368	39035	71469
109	9123	14551	1101	384	63	307	12239	6345	9808	15322	15127	9790	13238	11315	15443	9192	13391	11856	12027	13733	12426	12726	15565	9541	10996	12858	9165	15229	9186	15706	7328	17752	9032	16308	13461	12283	8973	16101	13817	10318	10320	14932
111	194402	132323	13679	6315	1481	3526	181785	115964	179879	160602	231900	106249	174056	158220	223820	108794	200466	140710	216150	132380	209997	133377	249641	95638	161920	163609	168400	169313	146511	191933	144032	200044	207507	139288	194918	155902	154521	187197	178416	147139	167009	171629
113	54752	20739	3346	1779	358	1116	48901	23429	43035	36386	55899	22564	35568	42137	47900	30054	55107	24888	56369	25592	54571	25628	61879	18245	46054	29997	31753	46260	38487	39708	42887	37001	51975	29069	49624	32455	36599	42966	35380	40982	48091	32644
115	7910	13170	1063	438	168	249	9999	7789	10069	12327	13009	9196	12393	9578	14305	7658	11745	10509	10020	12703	11479	10845	14568	7762	8928	12646	9547	12284	7944	14198	6266	15926	7510	14928	10720	11949	7770	14360	12161	9311	7368	14902
	<!DOCTYPE html>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<title>2016 Presedential Votes</title>
	<style>

	@import url(//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.2/leaflet.css);
	body {
	margin: 0px;
	}
	.domain {
	display: none;
	}
	.tick line {
	stroke: #C0C0BB;
	}
	.tick text {
	fill: #8E8883;
	font-size: 10pt;
	font-family: sans-serif;
	}
	.axis-label {
	fill: #635F5D;
	font-size: 16pt;
	font-family: sans-serif;
	}
	.topcorner{
	position:absolute;
	top:0;
	right:0;
	height: 250px;
	width: 480px;
	z-index: 100;
	background:white;
	}
	#map {
	width: 960px;
	height: 500px;
	}

	path {
	fill: #000;
	fill-opacity: .2;
	stroke: #fff;
	stroke-width: 1.5px;
	}

	path:hover {
	fill: brown;
	fill-opacity: .7;
	}

	</style>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.2/leaflet.js"></script>
	<body>
	<div class="topcorner">
	<svg width="480" height="250"></svg>
	</div>
	<div id="map"</div>
	<script>

	//************************chart***************************************
	var barChart = function(countyFP){
	const xValue = d => d.value;
	const xLabel = 'Votes';
	const yValue = d => d.name;
	const yLabel = 'Candidate';
	const margin = { left: 150, right: 30, top: 5, bottom: 75 };


	const svg = d3.select('svg');
	const svgRemove = svg.selectAll('*').remove();
	const width = svg.attr('width');
	const height = svg.attr('height');
	const innerWidth = width - margin.left - margin.right;
	const innerHeight = height - margin.top - margin.bottom;

	const g = svg.append('g')
	.attr('transform', `translate(${margin.left},${margin.top})`);
	const xAxisG = g.append('g')
	.attr('transform', `translate(0, ${innerHeight})`);
	const yAxisG = g.append('g');

	xAxisG.append('text')
	.attr('class', 'axis-label')
	.attr('x', innerWidth / 2)
	.attr('y', 55)
	.text(xLabel);

	const xScale = d3.scaleLinear();
	const yScale = d3.scaleBand()
	.paddingInner(0.3)
	.paddingOuter(0);

	const xTicks = 5;
	const xAxis = d3.axisBottom()
	.scale(xScale)
	.ticks(xTicks)
	.tickPadding(5)
	.tickFormat(d3.format('.0s'))
	.tickSize(-innerHeight);

	const yAxis = d3.axisLeft()
	.scale(yScale)
	.tickPadding(5)
	.tickSize(-innerWidth);

	const row = d => {
	return {
	county: d.countyfp10,
	attributes:[
	{
	name: 'Clinton',
	value: Number(d.pres_clinton)
	},
	{
	name: 'Trump',
	value: Number(d.pres_trump)
	},
	{
	name: 'Johnson',
	value: Number(d.pres_johnson)
	},
	{
	name: 'Stein',
	value: Number(d.pres_stein)
	},
	{
	name: 'Lariva',
	value: Number(d.pres_lariva)
	},
	{
	name: 'Other',
	value: Number(d.pres_other)
	}
	]
	};
	};

	const top5 = data => data.slice(0, 5);

	//function filterCriteria(d) {
	// return d.county === '037';
	//};
	function filterCriteria(d) {
	return d.county === countyFP;
	};

	d3.csv('california-2016-county-results.csv', row, data => {
	//data = top5(data);
	data = data.filter(filterCriteria);
	data = data[0]['attributes'];
	//console.log(data);
	//console.log(Object.keys(data)[0]);

	yScale
	.domain(data.map(yValue).reverse())
	.range([innerHeight, 0]);

	xScale
	.domain([0, d3.max(data, xValue)])
	.range([0, innerWidth])
	.nice(xTicks);

	g.selectAll('rect').data(data)
	.enter().append('rect')
	.attr('x', 0)
	.attr('y', d => yScale(yValue(d)))
	.attr('width', d => xScale(xValue(d)))
	.attr('height', d => yScale.bandwidth())
	.attr('fill', 'steelblue');


	xAxisG.call(xAxis);

	yAxisG.call(yAxis);
	yAxisG.selectAll('.tick line').remove();
	});
	};
	barChart('037');
	//************************chart***************************************
	//************************map*****************************************
	var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
	osmAttrib = '© <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
	osm = L.tileLayer(osmUrl, {maxZoom: 18, attribution: osmAttrib});

	var map = L.map('map').setView([37.5, -115], 6).addLayer(osm);

	var svgMap = d3.select(map.getPanes().overlayPane).append("svg"),
	gMap = svgMap.append("g").attr("class", "leaflet-zoom-hide");

	var transform = d3.geoTransform({point: projectPoint}),
	path = d3.geoPath().projection(transform);

	d3.json("counties.json", function(error, ca) {
	var features = ca.objects.CA.geometries.map(function(d) { return topojson.feature(ca, d); });
	var all = topojson.merge(ca, ca.objects.CA.geometries);

	var states = gMap.selectAll("path")
	.data(features)
	.enter()
	.append("path")
	.on("mouseover", function(d){
	//d3.select(this).transition(0).duration(0);
	//console.log(d.properties.COUNTYFP)
	barChart(d.properties.COUNTYFP);
	});

	map.on("viewreset", reset);
	reset();

	// Reposition the SVG to cover the features.
	function reset() {
	var bounds = path.bounds(all),
	topLeft = bounds[0],
	bottomRight = bounds[1];

	svgMap .attr("width", bottomRight[0] - topLeft[0])
	.attr("height", bottomRight[1] - topLeft[1])
	.style("left", topLeft[0] + "px")
	.style("top", topLeft[1] + "px");

	gMap.attr("transform", "translate(" + -topLeft[0] + "," + -topLeft[1] + ")");

	states.attr("d", path);
	}
	});

	// Use Leaflet to implement a D3 geometric transformation.
	function projectPoint(x, y) {
	// Returns the map layer point that corresponds to the given geographical coordinates
	var point = map.latLngToLayerPoint(new L.LatLng(y, x));
	this.stream.point(point.x, point.y);
	}
	//************************map*****************************************
	</script>