Basic d3 Thailand map with hover info and zoomable when mouse click. Colorize by Population density.
forked from adkdev's block: D3 - Thailand map by population density
xxxxxxxxxx
<meta charset="utf-8">
<style>
text.big-text{
font-size: 40px;
font-weight: 400;
position:absolute;
top: 60px;
left: 20px;
z-index:99;
float:left;
}
.map-layer {
fill: #fff;
stroke: #ddd;
}
</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>
var width = 960,
height = 640,
centered;
// Define color scale
var color = d3.scale.linear()
.domain([1, 35])
.clamp(true)
.range(['#fff', '#4ae']);
var bigText = d3.select("body").append('text')
.classed('big-text', true);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
// Add background
svg.append('rect')
.style("fill", "#fff")
.attr('width', width)
.attr('height', height)
.on('click', clicked);
var g = svg.append('g');
var mapLayer = g.append('g')
.classed('map-layer', true);
var xym = d3.geo.mercator();
var path = d3.geo.path().projection(xym);
// Customize the projection to make the center of Thailand become the center of the map
xym.rotate([-100.6331, -13.2]);
xym.translate([width / 2, height / 2]);
xym.scale(2380);
d3.json("thailandwithdensity.json", function(data) {
mapLayer.selectAll("path").data(data.features)
.enter().append("path")
.attr("d", path)
.attr('vector-effect', 'non-scaling-stroke')
.style("fill", fillFn)
.on("mouseover", mouseover)
.on("mouseout", mouseout)
.on("click", clicked)
});
// Get province name
function nameFn(d){
return d && d.properties ? d.properties.name + ':' + d.properties.p : null;
}
// Get province color
function fillFn(d){
return color(popFn(d));
}
// Get province population
function popFn(d){
density = d && d.properties ? d.properties.p : null;
return density / 10;
}
function mouseover(d){
d3.select(this).style('fill', '#f90');
bigText.text(nameFn(d));
}
function mouseout(d){
d3.select(this).style("fill", fillFn(d));
// Reset province color
mapLayer.selectAll('path')
.style('fill', function(d){return centered && d===centered ? '#D5708B' : fillFn(d);});
//bigText.text('');
if (centered) {
bigText.text(nameFn(centered));
} else {
bigText.text('');
}
}
// When clicked, zoom in
function clicked(d) {
var x, y, k;
// Compute centroid of the selected path
if (d && centered !== d) {
var centroid = path.centroid(d);
x = centroid[0];
y = centroid[1];
k = 4;
centered = d;
} else {
x = width / 2;
y = height / 2;
k = 1;
centered = null;
}
// Highlight the clicked province
mapLayer.selectAll('path')
.style('fill', function(d){return centered && d===centered ? '#D5708B' : fillFn(d);});
// Zoom
g.transition()
.duration(750)
.attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')scale(' + k + ')translate(' + -x + ',' + -y + ')');
}
</script>
Modified http://d3js.org/d3.v3.min.js to a secure url
https://d3js.org/d3.v3.min.js