Built with blockbuilder.org
forked from jrzief's block: World Map &Neighbor Countries
xxxxxxxxxx
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-geo-projection.v1.min.js"></script>
<script src="colorbrewer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.20/topojson.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
path.countries {
stroke-width: 1;
stroke: #75739F;
fill: #5EAFC6;
}
circle.cities {
stroke-width: 1;
stroke: #4F442B;
fill: #FCBC34;
}
circle.centroid {
fill: #75739F;
pointer-events: none;
}
rect.bbox {
fill: none;
stroke-dasharray: 5 5;
stroke: #75739F;
stroke-width: 2;
pointer-events: none;
}
path.graticule {
fill: none;
stroke-width: 1;
stroke: #9A8B7A;
}
path.graticule.outline {
stroke: #9A8B7A;
}
path.merged {
fill: #9A8B7A;
stroke: #4F442B;
stroke-width: 2px;
}
</style>
</head>
<body>
<script>
// Feel free to change or delete any of the code you see in this editor!
var svg = d3.select("body").append("svg")
.attr("width", 960)
.attr("height", 500)
var margin = {
top: 20,
left: 50,
right: 50,
bottom: 100
},
width = 1000 - margin.left - margin.right;
height = 500 - margin.top - margin.bottom;
svg
.attr("height", height + margin.top + margin.bottom)
.attr("width", width + margin.left + margin.right)
.append("g")
.attr("transform", "translate( 100, -50)");
d3
.queue()
.defer(d3.json, "world.topojson") // "https://d3js.org/us-10m.v1.json")
.defer(d3.csv, "cities.csv")
.await(ready);
function ready(error, topoCountries, cities) {
console.log(topoCountries);
//function createMap(topoCountries) {
var countries =
topojson.feature(topoCountries, topoCountries.objects.countries);
var projection = d3.geoMollweide()
.scale(120);
// .translate([250, 250])
// .center([120, 120]);
var geoPath = d3.geoPath().projection(projection);
var featureSize =
d3.extent(countries.features, d => geoPath.area(d));
var countryColor = d3.scaleQuantize()
.domain(featureSize).range(colorbrewer.Reds[7]);
var graticule = d3.geoGraticule();
// d3.select("svg")
svg
.append("path")
.datum(graticule)
.attr("class", "graticule line")
.attr("d", geoPath);
// d3.select("svg").append("path")
svg
.append("path")
.datum(graticule.outline)
.attr("class", "graticule outline")
.attr("d", geoPath);
// d3.select("svg").selectAll("path.countries")
svg
.selectAll("path.countries")
.data(countries.features)
.enter()
.append("path")
.attr("d", geoPath)
.attr("class", "countries")
.style("fill", d => countryColor(geoPath.area(d)))
.style("stroke", "none");
// d3.select("svg").selectAll("circle").data(cities)
svg
.selectAll("circle")
.data(cities)
.enter()
.append("circle")
.attr("class", "cities")
.attr("r", 3)
.attr("cx", d => projection([d.x, d.y])[0])
.attr("cy", d => projection([d.x, d.y])[1]);
var mapZoom = d3.zoom()
.on("zoom", zoomed);
var zoomSettings = d3.zoomIdentity
.translate(250, 250)
.scale(120);
d3.select("svg")
.call(mapZoom)
.call(mapZoom.transform, zoomSettings);
function zoomed() {
var e = d3.event;
projection.translate([e.transform.x, e.transform.y])
.scale(e.transform.k);
d3.selectAll("path.graticule").attr("d", geoPath);
d3.selectAll("path.countries").attr("d", geoPath);
d3.selectAll("circle.cities")
.attr("cx", d => projection([d.x, d.y])[0])
.attr("cy", d => projection([d.x, d.y])[1]);
}
}
</script>
</body>
https://d3js.org/d3.v4.min.js
https://d3js.org/d3-geo-projection.v1.min.js
https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.20/topojson.min.js