D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
rekaj3773
Full window
Github gist
Turkey Election
Built with
blockbuilder.org
<!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 Election Results 2015") .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("turkey2015Election.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