2016 World Press Freedom Index by martgnz

index.html

<!DOCTYPE html>
<meta charset="utf-8" /> 
<body>
<style>
body {
  max-width: 960px;
  position: relative;
}
.tooltip {
  position: absolute;
  z-index: 1;
  width: 250px;
  height: 40px;
  padding: 8px;
  background: rgb(255,255,255);
  font-family: "Helvetica Neue", "Helvetica", Arial sans-serif;
  font-size: 12px;
  border: 1px solid rgba(0,0,0,0.2);
  box-shadow: 0 3px 5px rgba(0,0,0,0.5),0 0 0 1px rgba(0,0,0,.08);
  border-radius: 2px;
  pointer-events: none;
}
.g-place {
  border-bottom: 1px solid rgb(130,130,130);
  padding-bottom: 3px;
  margin-bottom: 5px;
}
.g-headline {
  font-size: 16px;
}
.g-sub {
  color: rgb(130,130,130);
}
.g-value {
  float: right;
}
.legend {
  position: absolute;
  right: 0;
  bottom: 0;
  font-family: "Helvetica Neue", sans-serif;
  font-size: 12px;
  height: 100px;
  width: 170px;
  text-shadow: 1px 1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, -1px -1px 0 #fff;
}
</style>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script src="https://unpkg.com/rbush@1.4.3/rbush.js"></script>
<script src="https://unpkg.com/spamjs@1.1.0/spam.min.js"></script>
<script src="https://unpkg.com/d3-svg-legend@1.13.0/d3-legend.min.js"></script>

<script type='text/javascript'>
var hover = null;
var graticule = d3.geo.graticule();

var tooltip = d3
  .select("body")
  .append("div")
  .attr("class", "tooltip")
  .style("opacity", 0);

document.onmousemove = handleMouseMove;

function handleMouseMove(event) {
  mouseX = event.pageX;
  mouseY = event.pageY;

  tooltip.style("left", mouseX - 100 + "px").style("top", mouseY + 25 + "px");
}

var color = d3.scale
  .ordinal()
  .domain([
    "Very serious situation",
    "Difficult situation",
    "Noticiable problems",
    "Satisfactory situation",
    "Good situation"
  ])
  .range([
    "rgb(0, 0, 0)",
    "rgb(252, 52, 51)",
    "rgb(252, 136, 0)",
    "rgb(255, 215, 18)",
    "rgb(255, 240, 179)"
  ]);

d3
  .select("body")
  .append("svg")
  .attr("class", "legend");

var legend = d3.legend
  .color()
  .shapeHeight(10)
  .shapeWidth(20)
  .shapePadding(5)
  .labelOffset(10)
  .orient("vertical")
  .labelAlign("start")
  .ascending(true)
  .scale(color);

d3.select(".legend").call(legend);

d3.json("world.json", function(error, d) {
  topojson.presimplify(d);

  var map = new StaticCanvasMap({
    element: "body",
    width: 960,
    projection: d3.geo.equirectangular(),
    data: [
      {
        features: topojson.feature(d, d.objects["world"]),

        static: {
          prepaint: function(parameters) {
            parameters.path(graticule());
            parameters.context.lineWidth = 0.5;
            parameters.context.strokeStyle = "rgb(230,230,230)";
            parameters.context.stroke();
          },
          paintfeature: function(parameters, d) {
            if (d.properties.fill == null) {
              parameters.context.fillStyle = "#fff";
            } else {
              parameters.context.fillStyle = d.properties.fill;
            }

            parameters.context.fill();

            parameters.context.lineWidth = 0.5;
            parameters.context.strokeStyle = "rgb(30,30,30)";
            parameters.context.stroke();
          }
        },
        dynamic: {
          postpaint: function(parameters) {
            if (!hover || !hover.properties.ranking) {
              tooltip.style("opacity", 0);
              return;
            }

            parameters.context.beginPath();
            parameters.context.lineWidth = 1 / parameters.scale;
            parameters.path(hover);
            parameters.context.stroke();

            tooltip
              .style("opacity", 1)
              .html(
                "<div class='g-place'>" +
                  "<span class='g-headline'>" +
                  hover.properties.name +
                  "</span><br />" +
                  "</div>" +
                  "<span>World Press Freedom Index</span>" +
                  "<span class='g-value'>" +
                  hover.properties.ranking +
                  "</span>"
              );
          }
        },
        events: {
          hover: function(parameters, d) {
            hover = d;

            parameters.map.paint();
          }
        }
      }
    ]
  });

  map.init();
});
</script>