martgnz/.block

## .block
license: mit
border: none

## README.md

      
    Raw
  

              README.md
            
          
    Source: RSF.
Get the data.

  
## 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>

## thumbnail.png

      
    Raw
  

              thumbnail.png
            
          
## world.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              world.json
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
	<!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>