Turkish General Election 2018

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    .tooltip {	
     position: absolute;			
    text-align: center;			
    width: 300px;					
    height: 40px;					
    padding: 2px;				
    font: 12px sans-serif;		
    background: lightsteelblue;	
    border: 0px;		
    border-radius: 8px;			
    pointer-events: none;
    opacity:0;
}
  </style>
</head>

<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    var svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 500)
    svg.append("text")
      .text("Turkish General Election Results 2018")
      .attr("y", 83)
      .attr("x", 120)
      .attr("font-size", 36)
      .attr("font-family", "monospace")
    
    var g = svg.append('g');
    
    var tooltipdiv = d3.select("body").append("div")	
    .attr("class", "tooltip");
    
    var mercProjection = d3.geoMercator()
  .scale(2000)
  .rotate([-1, 0])
  .center([36.487, 38.961])
  ;
    
    var geoPath = d3.geoPath().projection(mercProjection);
    
	var featureCount =0;	
    d3.json("turkeyProvinces_simplified.json",function(error,mapData){
    
    d3.json("turkey2018Election.json",function(error,electionData){
      
      
    
     var provinces =  g.selectAll('path')
  .data(mapData.features)
  .enter()
  .append('path')
  .attr('fill', function(d) {return electionColor(findMatch(d,electionData))})
  .attr('stroke','black')
  .attr('d', geoPath)
  .on("mouseover", function(d) {	
    	//console.log(electionData[d.properties.NAME_1]);
			console.log(findMatch(d, electionData));
    	tooltipdiv.transition()		
                .duration(200)		
                .style("opacity", .9)
			  				.style("left", (d3.event.pageX) + "px")		
              	.style("top", (d3.event.pageY - 28) + "px")
      					.text(d.properties.NAME_1+" - Winning Party: "+findMatch(d,electionData))
      					;
 //need to find out how to index  	//tooltipdiv.html(mapData.features[featureCount].properties.NAME_1);
    
    
            })
		.on("mouseout", function(d) {	
            tooltipdiv.transition()		
                .duration(500)
                .style("opacity", 0);	
        });
    
      
      });
    });
    
    
    function findMatch(d,obj)
    {
      for (var i = 0; i < obj.length; i++){
      // look for the entry with a matching `code` value
      if (obj[i].HA_SC == d.properties.HASC_1){
         return obj[i].WinningParty;
        // obj[i].name is the matched result
      }
    	}
    }
    
    function electionColor(party){
      switch(party) {
        case "AKP":
            return "yellow";
            break;
        case "CHP":
            return "red";
            break;
        case "MHP":
            return "firebrick";
            break;
        case "HDP":
            return "purple";
            break;
        case "AKP-CHP-tie":
            return "orange";
            break;
        case "AKP-HDP-tie":
            return "brown";
            break;
        case "AKP-MHP-tie":
            return "fuchsia";
            break;
        case "three-way-tie":
            return "gray";
            break;
        default:
            return "steelblue";
				}
    }
    
  </script>
</body>

https://d3js.org/d3.v4.min.js