Map of Haiti

A very simple map of Haiti. Inspired by http://bl.ocks.org/rgdonohue/4793dab7f993a81cc670

by Matthew Bowlby

HTML

<script src="https://gist.github.com/29a1f4a91c1c8d615595.git"></script>
<!-- this map is inspired by https://github.com/maptimelex/d3-mapping -->

<title>A very simple D3 map of Haiti</title>

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>

<link href="http://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">

<body>
     <h1>Republic of Haiti</h1>
</body>

CSS

body {
    padding: 0;
    margin: 0;
    background: whitesmoke;
}
h1 {
    position: absolute;
    left: 20px;
    top: 10px;
    font-family:"Proxima Nova", Montserrat, sans-serif;
    font-size: 2em;
    font-weight: 100;
    color: #005DAA;
    /* offical UK Kentucky blue */
}
.county {
    stroke: #fff;
    fill:#005DAA;
}

JavaScript

// set height and width of viz    
    var width = window.innerWidth,
        height = window.innerHeight;

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

    // define JSON map data
    d3.json("https://rawgit.com/mattbowlby/29a1f4a91c1c8d615595/raw/9aac80c757f6af814ad425c45e130bec25e68354/haiti.json", function (json) {

        // create a first guess for the projection
        var center = d3.geo.centroid(json);
        var scale = 150;
        var offset = [width / 2, height / 2];

        var projection = d3.geo.mercator()
            .center(center)
            .rotate([85.8, 0])
            .scale(scale)
            .translate(offset);

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

        svg.append("g")
            .selectAll("path")
            .data(json.coordinates)
            .enter()
            .append("path")
            .attr("d", geoPath);
    });