Skip to content

Instantly share code, notes, and snippets.

@espinielli
Last active February 19, 2016 16:32
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save espinielli/75209760a6d8f8922e9c to your computer and use it in GitHub Desktop.
SES RP2 FABs
<!DOCTYPE html>
<meta charset="utf-8">
<style>
svg {
background: #00FFFF;
}
.graticule {
fill: none;
stroke: #777;
stroke-width: .5px;
stroke-opacity: .5;
}
.land {
fill: #ddd;
opacity: 0.4;
stroke: #aaa;
}
.countryboundary {
fill: none;
stroke: #aaa;
stroke-width: .5px;
}
.firboundary {
stroke: black;
fill: none;
stroke-width: .5px;
}
.fabboundary {
stroke: rgb(206,0,18);
fill: none;
stroke-width: .5px;
}
.SWFAB {
fill: rgb(247,243,38);
}
.NEFAB {
fill: rgb(13,24,73);
}
.FABEC {
fill: rgb(238,138,27);
}
.FABCE {
fill: rgb(169,0,25);
}
.UKEI {
fill: rgb(125,59,148);
}
.BALTIC {
fill: rgb(238,234,49);
}
.DKSE {
fill: orange;
}
.DANUBE {
fill: rgb(179,179,179);
}
.BLUEMED {
fill: rgb(30,37,108);
}
.fab {
opacity: 0.3;
pointer-events: none;
}
.fir {
opacity: 0.1;
}
#tooltip {
position: absolute;
width: auto;
height: auto;
padding: 2px 2px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
pointer-events: none;
background-color: #bbb;
}
#tooltip.hidden {
display: none;
}
#tooltip p {
margin: 0 0 0 0;
padding: 2px 2px;
font-family: sans-serif;
font-size: 11px;
}
.hidden{
display: none;
}
</style>
<body>
<div id="tooltip" class="hidden">
<p id="info"></p>
</div>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js"></script>
<script>
var width = 960,
height = 630;
var scale = 570,
cLat = 52.4,
cLon = 0;
var color = d3.scale.category10();
var tooltip = d3.select("#tooltip").classed("hidden", true);
var info = d3.select("#info");
var projection = d3.geo.albers()
.center([cLon, cLat])
.rotate([4.4, 0])
.parallels([50, 60])
.scale(scale)
.translate([width / 2, height / 2]);
var path = d3.geo.path()
.projection(projection);
var graticule = d3.geo.graticule()
.majorStep([5, 5])
.precision(2.5);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
svg.append("path")
.datum(graticule)
.attr("class", "graticule")
.attr("d", path);
svg.on("mousemove", function () {
// update tooltip position
tooltip.style("top", (event.pageY + 8) + "px").style("left", (event.pageX + 8) + "px");
return true;
});
queue()
.defer(d3.json, "rp2.json")
.defer(d3.json, "world-50m.json")
.await(ready);
function ready(error, rp2, world) {
if (error) return console.error(error);
var firs = topojson.feature(rp2, rp2.objects.firs);
var firborders = topojson.mesh(rp2, rp2.objects.firs, function (a, b) { return (a !== b) || (a === b); });
var fabs = topojson.feature(rp2, rp2.objects.fabs);
// FAB borders (interior [a !== b] and exterior [a === b])
var fabborders = topojson.mesh(rp2, rp2.objects.fabs, function (a, b) { return (a !== b) || (a === b); });
var land = topojson.feature(world, world.objects.land);
var countryborders = topojson.mesh(world, world.objects.countries, function (a, b) { return (a !== b) || (a === b); });
svg.insert("path", ".graticule")
.datum(topojson.feature(world, world.objects.land))
.attr("class", "land")
.attr("d", path);
svg.insert("path", ".graticule")
.datum(countryborders)
.attr("class", "countryboundary")
.attr("d", path);
svg.selectAll(".fir")
.data(firs.features)
.enter().insert("path", ".graticule")
.attr("class", function(d) { return "fir " + d.id + " " + d.properties.fab; })
.attr("d", path)
.on("mouseover", function (d, i) {
d3.select(this).style({'stroke-opacity': 1, 'stroke': '#F00'});
// http://stackoverflow.com/questions/17917072/#answer-17917341
tooltip.classed("hidden", false);
info.text("FIR: " + d.id + ". " + d.properties.fab);
})
.on("mouseout", function () {
this.style.stroke = "none";
tooltip.classed("hidden", true);
});
svg.insert("path", ".graticule")
.datum(firborders)
.attr("class", "firboundary")
.attr("d", path);
svg.selectAll(".fab")
.data(fabs.features)
.enter().insert("path", ".graticule")
.attr("class", function(d) { return "fab " + d.properties.id; })
.attr("d", path);
svg.insert("path", ".graticule")
.datum(fabborders)
.attr("class", "fabboundary")
.attr("d", path);
}
</script>
Display the source blob
Display the rendered blob
Raw
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Display the source blob
Display the rendered blob
Raw
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment