Skip to content

Instantly share code, notes, and snippets.

@jgaffuri

jgaffuri/.block

Last active December 24, 2019 09:19
Show Gist options
  • Save jgaffuri/2bac83d3b0bab856066a7bd949ff6234 to your computer and use it in GitHub Desktop.
Save jgaffuri/2bac83d3b0bab856066a7bd949ff6234 to your computer and use it in GitHub Desktop.
Download ZIP
Coastal margin with JSTS buffer 1
Raw
.block
license: EUPL-1.2
height: 800
scrolling: no
border: no
Raw
README.md

This is an example of Nuts2json API showing European Union countries with D3.js with a coastal margin computed from JSTS buffer function.

Raw
index.html
<!DOCTYPE html>
<svg></svg>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://d3js.org/d3-request.v1.min.js"></script>
<script src="https://d3js.org/topojson.v3.min.js"></script>
<script src="https://d3js.org/d3-color.v1.min.js"></script>
<script src="https://d3js.org/d3-interpolate.v1.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script src="https://unpkg.com/jsts@1.6.1/dist/jsts.min.js"></script>
<script>
d3.json("https://raw.githubusercontent.com/eurostat/Nuts2json/master/2016/3035/60M/0.json",
function (error, nuts) {
if (error) throw error;
//prepare SVG element
var width = 900, height = width * (nuts.bbox[3] - nuts.bbox[1]) / (nuts.bbox[2] - nuts.bbox[0]),
svg = d3.select("svg").attr("width", width).attr("height", height),
path = d3.geoPath().projection(d3.geoIdentity()
.reflectY(true).fitSize([width, height], topojson.feature(nuts, nuts.objects.gra)));
//some jsts functions
var reader = new jsts.io.GeoJSONReader();
var writer = new jsts.io.GeoJSONWriter();
var buffer = function (geom, dist) {
var buffer = reader.read(geom).buffer(dist);
return writer.write(buffer);
};
//prepare country data
var cnts = topojson.feature(nuts, nuts.objects.cntrg).features;
var nutsrg = topojson.feature(nuts, nuts.objects.nutsrg).features;
//draw coastal margin as country buffers computed with JSTS
for (var i = 1; i >= 0; i -= 0.2) {
var dist = i * 200000;
var col = d3.interpolateBlues(1 - Math.sqrt(i));
svg.append("g").selectAll("path").data(cnts)
.enter().append("path").attr("d", function (cnt) {
return path(buffer(cnt.geometry, dist));
}).style("fill", col);
svg.append("g").selectAll("path").data(nutsrg)
.enter().append("path").attr("d", function (cnt) {
return path(buffer(cnt.geometry, dist));
}).style("fill", col);
}
//draw countries
svg.append("g").selectAll("path").data(cnts)
.enter().append("path").attr("d", path).attr("class", "cntrg");
svg.append("g").selectAll("path").data(nutsrg)
.enter().append("path").attr("d", path).attr("class", "nutsrg");
//draw boundaries
svg.append("g").selectAll("path").data(topojson.feature(nuts, nuts.objects.cntbn).features)
.enter().append("path").attr("d", path)
.attr("class", function (bn) { return "cntbn" + (bn.properties.co === "T" ? " coastal" : ""); });
svg.append("g").selectAll("path").data(topojson.feature(nuts, nuts.objects.nutsbn).features)
.enter().append("path").attr("d", path)
.attr("class", function (bn) { return "cntbn" + (bn.properties.co === "T" ? " coastal" : ""); });
});
</script>
Raw
style.css
.cntrg {
fill: lightgray;
}
.cntrg:hover {
fill: #ffc890;
}
.nutsrg {
fill: #e9e9e9;
}
.nutsrg:hover {
fill: #ff7f00;
}
.cntbn {
fill: none;
stroke-width: 1px;
stroke: rgb(75, 75, 75);
}
.nutsbn {
fill: none;
stroke-width: 1px;
stroke: rgb(75, 75, 75);
}
.coastal { stroke: #1f78b4; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment