D3 Examples - Map of Yemen, with subdivisions

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Yemen Provinces</title>
        <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
        <style type="text/css">
                        
            body {
                
                margin: 0;
                background-color: #eaeaea;
                font-family: Helvetica, Arial, sans-serif;
/*                padding-top:10px;
                padding-left:20px;
*/          }
            
            svg {
                background-color: #d6e6e4;
            }
            
            path {
                stroke: white;
                stroke-width: 0.5px;
                fill: #bc7d7d;
            }
            
            path:hover {
                fill: #959595;
            }
            
​
            #container {
                width: 1000px;
                margin-left: auto;
                margin-right: auto;
                margin-top: 20px;
                padding: 20px;
                background-color: white;
                box-shadow: 2px 2px 3px 3px #c4c0c0;
            }
​
            h1 {
                font-size: 24px;
                margin: 0;
            }
​
            p {
                font-size: 16px;
                margin: 10px 0 0 0;
            }
            
            .country {
                fill: #b5b5b5;
                stroke: #bfbfbf;
            }
​
            .YEM {
                fill: #bc7d7d;
                stroke: #ededed;
            }
            
            .YEM:hover {
                fill: orange;
            }
            
            #chart {
                width: 1000px;
                height: 500px;
                position:relative;
                right: -400px;
                top: 10px;
            }
            
        </style>
    </head>
    <body>
    <div id="container">
        <h1>Yemen - Provinces</h1>
​
            <p>Yemen is currently in a state of civil war, with two factions, one supporting the current government of Mansur Hadi, and the other loyal to former President Saleh.  While this breaks down roughly along tribal lines, the conflict has also tunred into a proxy war between a Saudi led coalition, and Iran.  Meanwhile, a poverty stricken nation careens towards human disaster.<br></p>
            <p><br></p>
        <svg class="chart"></svg>
        
    </div>       
        <script type="text/javascript">     
            var margin = {top: 80, right: 20, bottom: 50, left: 60},
            width = 1000 - margin.left - margin.right,
            height = 450 - margin.top - margin.bottom;
​
            //Define map projection
            var projection = d3.geo.mercator()
                                   .center([50, 15 ])
                                   .translate([ width/2, height/2 ])
                                   .scale([ width/0.5 ]);
​
            //Define path generator
            var path = d3.geo.path()
                             .projection(projection);
​
            var chart = d3.select(".chart")
                .attr("width", width + margin.left + margin.right)
                .attr("height", height + margin.top + margin.bottom)
              .append("g")
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
            
            //Load in GeoJSON data
            var features;
            d3.json("yemen.json", function(json) {
                
                //Bind data and create one path per GeoJSON feature
                features = json.features;
                chart.selectAll("path")
                    .data(json.features)
                    .enter()
                    .append("path")
                    .attr("d", path)
                    .attr("class",function(d) { return "country " +d.properties.adm0_a3;})
                    .append("title")
                    .text(function(d) {labels = "Country: " + d.properties.admin + "\n" + d.properties.type_en + ": " + d.properties.name; return labels ;});
                
    /*          chart.enter()
                    .append("text")
                    .text(function(d) {
                        var iso3 = d.properties.adm0_a3;
                        var country = d.properties.admin;
                        var adm_lvl = d.properties.gadm_level;
                        console.log(adm_lvl);
                        if (iso3 == "YEM" && adm_lvl==0 ) { return country;} else { return "";}
                    })
                    .attr("x", function(d) { return projection([d.properties.longitude,d.properties.latitude])[0] })
                    .attr("y", function(d) { return projection([d.properties.longitude, d.properties.latitude])[1] });
    
    */
            chart.append("text").text("Yemen")
                .attr("x",projection([46.9,15.564383])[0])
                .attr("y",projection([46.9,15.564383])[1])
                .attr("fill","#2c2c2c");
            
            });
​
        </script>
    </body>
</html>
    