forked from jeremycflin's block: world population
for an example of proposed europe-Atlantic projection
xxxxxxxxxx
<meta charset="utf-8">
<style>
.names {
fill: none;
stroke: #fff;
stroke-linejoin: round;
}
/* Tooltip CSS */
.d3-tip {
line-height: 1.5;
font-weight: 400;
font-family:"avenir next", Arial, sans-serif;
padding: 6px;
background: rgba(0, 0, 0, 0.6);
color: #FFA500;
border-radius: 1px;
pointer-events: none;
}
/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
box-sizing: border-box;
display: inline;
font-size: 8px;
width: 100%;
line-height: 1.5;
color: rgba(0, 0, 0, 0.6);
position: absolute;
pointer-events: none;
}
/* Northward tooltips */
.d3-tip.n:after {
content: "\25BC";
margin: -1px 0 0 0;
top: 100%;
left: 0;
text-align: center;
}
/* Eastward tooltips */
.d3-tip.e:after {
content: "\25C0";
margin: -4px 0 0 0;
top: 50%;
left: -8px;
}
/* Southward tooltips */
.d3-tip.s:after {
content: "\25B2";
margin: 0 0 1px 0;
top: -8px;
left: 0;
text-align: center;
}
/* Westward tooltips */
.d3-tip.w:after {
content: "\25B6";
margin: -4px 0 0 -1px;
top: 50%;
left: 100%;
}
/* text{
pointer-events:none;
}*/
.details{
color:white;
}
</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/queue.v1.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script src="d3-tip.js"></script>
<script>
d3.geo.europeAtlantic = function () {
var europeAtlantic, europe, europePoint, atlantic, atlanticPoint, point, pointStream;
europeAtlantic = {};
europe = d3.geo.equirectangular()
.center([3.5, 54]);
atlantic = d3.geo.equirectangular()
.center([-45, 74]);
pointStream = function(x, y) {
point = [x, y];
};
europeAtlantic.stream = function(stream) {
var europeStream = europe.stream(stream), atlanticStream = atlantic.stream(stream);
return {
point: function(x, y) {
europeStream.point(x, y);
atlanticStream.point(x, y);
},
sphere: function() {
europeStream.sphere();
atlanticStream.sphere();
},
lineStart: function() {
europeStream.lineStart();
atlanticStream.lineStart();
},
lineEnd: function() {
europeStream.lineEnd();
atlanticStream.lineEnd();
},
polygonStart: function() {
europeStream.polygonStart();
atlanticStream.polygonStart();
},
polygonEnd: function() {
europeStream.polygonEnd();
atlanticStream.polygonEnd();
}
};
};
europeAtlantic.scale = function(_) {
if (!arguments.length) return europe.scale();
europe.scale(_);
atlantic.scale(_ * 0.45);
return europeAtlantic.translate(europe.translate());
};
europeAtlantic.translate = function(_) {
var k, x, y;
if (!arguments.length) return europe.translate();
k = europe.scale();
x = +_[0];
y = +_[1];
europePoint = europe
.translate(_)
.clipExtent([
[x - 0.29 * k, y - 0.334 * k],
[x + 0.675 * k, y + 0.334 * k]
])
.stream(pointStream).point;
atlanticPoint = atlantic
.translate([x - 0.45 * k, y - 0.25 * k])
.clipExtent([[x - 0.67 * k, 0], [x - 0.17 * k, y - 0.134 * k]])
.stream(pointStream).point;
return europeAtlantic;
};
return europeAtlantic.scale(700);
}
// Set tooltips
var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function(d) {
return "<strong>Country: </strong><span class='details'>" + d.properties.name + "<br></span>" + "<strong>Population: </strong><span class='details'>" + d.population +"</span>";
})
var margin = {top: 20, right: 20, bottom: 30, left: 30},
width = 1200 - margin.left - margin.right,
height = 800 - margin.top - margin.bottom;
var color = d3.scale.threshold()
.domain([10000,100000,500000,1000000,5000000,10000000,50000000,100000000,500000000,1500000000])
.range(["rgb(247,251,255)", "rgb(222,235,247)", "rgb(198,219,239)", "rgb(158,202,225)", "rgb(107,174,214)", "rgb(66,146,198)","rgb(33,113,181)","rgb(8,81,156)","rgb(8,48,107)","rgb(3,19,43)"]);
var path = d3.geo.path();
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height)
.append('g')
.attr('class', 'map');
var projection = d3.geo.europeAtlantic()
// .scale(200)
//.translate( [width / 2, height / 1.5]);
var path = d3.geo.path().projection(projection);
svg.call(tip);
queue()
.defer(d3.json, "world_countries.json")
.defer(d3.tsv, "world_population.tsv")
.await(ready);
function ready(error, data, population) {
var populationById = {};
population.forEach(function(d) { populationById[d.id] = +d.population; });
svg.append("g")
.attr("class", "countries")
.selectAll("path")
.data(data.features)
.enter().append("path")
.attr("d", path)
.style("fill", function(d) { return color(populationById[d.id]); })
.style('stroke', 'white')
.style('stroke-width', 1.5)
.style("opacity",0.8)
// tooltips
.style("stroke","white")
.style('stroke-width', 0.3)
.on('mouseover',function(d){
tip.show(d);
d3.select(this)
.style("opacity", 1)
.style("stroke","white")
.style("stroke-width",3);
})
.on('mouseout', function(d){
tip.hide(d);
d3.select(this)
.style("opacity", 0.8)
.style("stroke","white")
.style("stroke-width",0.3);
});
svg.append("path")
.datum(topojson.mesh(data.features, function(a, b) { return a.id !== b.id; }))
// .datum(topojson.mesh(data.features, function(a, b) { return a !== b; }))
.attr("class", "names")
.attr("d", path);
}
</script>
</body>
</html>
Modified http://d3js.org/d3.v3.min.js to a secure url
Modified http://d3js.org/queue.v1.min.js to a secure url
Modified http://d3js.org/topojson.v1.min.js to a secure url
https://d3js.org/d3.v3.min.js
https://d3js.org/queue.v1.min.js
https://d3js.org/topojson.v1.min.js