zhmap = {
var active = d3.select(null);
var k=1;
var gra_lon = 20;
var gra_la = 20;
const geoGenerator = d3.geoPath()
.projection(projection);
const svg = d3.select(DOM.svg(width, height))
.attr('id','ditu')
//this give responsive map ??
.style("width", "100%")
.style("height", "auto");
//projection.fitExtent([[0, 0], [960, 600]], provg);
const layers = svg.append('g')
.attr('class', 'layers');
const zoom = d3.zoom()
.scaleExtent([1, 100])
.translateExtent([[0, 0], [width, height]])
.on("zoom", () => {
k = d3.event.transform.k;
//console.log(k);
if(k<=2) {gra_lon = 20;gra_la = 20;};
if((k > 2) && (k <= 5)){gra_lon = 10;gra_la = 10;};
if((k > 5) && (k <= 20)){gra_lon = 5;gra_la = 5;};
if((k > 20) && (k <= 50)){gra_lon = 2;gra_la = 2;};
if((k > 50) && (k <= 100)){gra_lon = 1;gra_la = 1;};
gro.selectAll("path").attr('d',geoGenerator.pointRadius(1/k));
d3.select("body").selectAll(".graticule").remove();
layers.attr("transform", d3.event.transform);
makescalegra();
d3.select("body").selectAll(".graticule").style("stroke-width", 0.2 / k);
return k;
});
const locator = function(d,t) {
t===this;
var latlon = projection.invert(d3.mouse(t));
d3.select("#coo").text(latlon[1].toFixed(4)+" ° N "+latlon[0].toFixed(4)+" ° E ");
}
function particle(x,y) {
svg.append("circle")
.attr("transform", d3.event.transform)
.attr("cx", x-10)
.attr("cy", y-10)
.attr("r", 1e-3)
.style("stroke", "red")
.style("stroke-opacity", 1)
.transition()
.duration(3000)
.ease(Math.sqrt)
.attr("r", 100)
.style("stroke-opacity", 1e-6)
.remove();
}
function viewcounties(d) {
//if (active.node() === this) return reset();
//active.classed("active", false);
//active = d3.select(this).classed("active", true);// error on console can not read properties ??
var bounds = geoGenerator.bounds(d),
dx = bounds[1][0] - bounds[0][0],
dy = bounds[1][1] - bounds[0][1],
x = (bounds[0][0] + bounds[1][0]) / 2,
y = (bounds[0][1] + bounds[1][1]) / 2,
scale = .9 / Math.max(dx / width, dy / height),
translate = [width / 2 - scale * x, height / 2 - scale * y];
layers.transition()
.duration(2050)
.style("stroke-width", 1.5 / scale + "px")
.attr("transform", "translate(" + translate + ")scale(" + scale + ")" );
var ooo='';
// so dirty ... but for now i dont know how to do
switch(d.id) {
case 'ah':ooo='0'; break;
case 'bj':ooo='1'; break;
case 'cq':ooo='2'; break;
case 'fj':ooo='3'; break;
case 'gd':ooo='5'; break;
case 'gs':ooo='4'; break;
case 'gx':ooo='6'; break;
case 'gz':ooo='7'; break;
case 'hb':ooo='8'; break;
case 'heb':ooo='9'; break;
case 'hen':ooo='10'; break;
case 'hi':ooo='11'; break;
case 'hl':ooo='12'; break;
case 'hn':ooo='13'; break;
case 'ji':ooo='14'; break;
case 'js':ooo='15'; break;
case 'jx':ooo='16'; break;
case 'ln':ooo='17'; break;
case 'nm':ooo='18'; break;
case 'nx':ooo='19'; break;
case 'qh':ooo='20'; break;
case 'sc':ooo='21'; break;
case 'sd':ooo='22'; break;
case 'sh':ooo='23'; break;
case 'sn':ooo='24'; break;
case 'sx':ooo='25'; break;
case 'tj':ooo='26'; break;
case 'xj':ooo='27'; break;
case 'xz':ooo='28'; break;
case 'yn':ooo='29'; break;
case 'zj':ooo='30'; break;
default:ooo='';
}
d3.select("body").selectAll(".district").remove();
layers.append('g').selectAll('path')
.data(datasets[ooo].features)
.enter()
.append("path")
.attr("class", "district")
.attr("d", geoGenerator)
.attr('fill', '#fff')
.attr('stroke','#fff')
.attr("stroke-linejoin", "round")
.attr("stroke-width", 0.05)
.style("fill-opacity", 0.3)
.on("mousemove",
function(d) {locator(d,this)})
.on('mouseenter', function(d) {
d3.select(this).style('fill','red').style('fill-opacity', 0.2);
d3.select('#infos').text(d.properties.Name)
})
.on('mouseleave', function() {
d3.select(this).style('fill', 'grey').style('fill-opacity', 0.7).attr('stroke','#fff');
d3.select('#infos').text('');
d3.select("#coo").text('');
})
.on('click', function(d) {
var bounds = geoGenerator.bounds(d),
dx = bounds[1][0] - bounds[0][0],
dy = bounds[1][1] - bounds[0][1],
x = (bounds[0][0] + bounds[1][0]) / 2,
y = (bounds[0][1] + bounds[1][1]) / 2,
scale = .9 / Math.max(dx / width, dy / height),
translate = [width / 2 - scale * x, height / 2 - scale * y];
layers.transition()
.duration(2050)
.style("stroke-width", 1.5 / scale + "px")
.attr("transform", "translate(" + translate + ")scale(" + scale + ")" );
})
;
grotte();
}
var mond = layers.append("g").attr("id", "mond");
var monde = function() {
mond.append("path")
.datum(topojson.feature(gaia, gaia.objects.land))
.attr("class", "land")
.attr("d", geoGenerator)
.on("mousemove", function(d) {locator(d,this)})
}
monde();
layers.append('g').selectAll('path')
.data(provg.features)
.enter()
.append("path")
.attr("class", "province")
.attr("stroke-linejoin", "round")
.attr("d", geoGenerator)
.on("mousemove", function(d) {
locator(d,this);
d3.select(this).style("fill", "rgb(80,80,80)");
var mouse = d3.mouse(layers.node()).map( function(d) { return parseInt(d); } );
d3.select("#tooltip").classed("hidden", false)
//.attr("style", "left:"+(mouse[0]+offsetL)+"px;top:"+(mouse[1]+offsetT)+"px")
.html(d.properties.NAME_PY + " " + d.properties.NAME_HZ);
d3.select("#infogeo_prov").html(d.properties.NAME_PY + " " + d.properties.NAME_HZ);
})
.on("mouseout", function(d) {
d3.select("#infogeo_prov").html('');
d3.select("#coo").text('');
//d3.select("#tooltip").classed("hidden", true);
d3.select(this)
.transition()
.duration(2000)
.delay(100)
.style("fill", "grey");
})
.on("click", viewcounties);
const gro = layers.append('g').attr("id", "gro");
const grotte = function(){
gro.selectAll('path')
.data(cave.features)
.enter()
.append('path')
.attr('class', 'cave')
.attr('d', geoGenerator.pointRadius(0.05))
.on('mouseover', function(d) {
var x = d3.event.pageX - document.getElementById("ditu").getBoundingClientRect().x;
var y = d3.event.pageY - document.getElementById("ditu").getBoundingClientRect().y;
particle(x,y);
})
.on('mouseenter', function(d) {
d3.select(this).attr('d', geoGenerator.pointRadius(3));
d3.select(this).style('fill', 'none').style("fill-opacity", 0.1);
d3.select('#infos').text(`Info : `+d.properties.Name);
})
.on('mouseleave', function() {
d3.select(this).attr('d', geoGenerator.pointRadius(0.05));
d3.select(this).attr('class', 'cave').style("fill-opacity", 1);
});
}
grotte();
var gra = layers.append('g').attr("id", "gra");
var makescalegra = function () {
gra.append("path")
.datum(d3.geoGraticule().step([gra_la, gra_lon]))
.attr("class", "graticule")
.attr("d", geoGenerator);
}
makescalegra();
var equa = layers.append('g').attr("id", "equa");
var equator = function() {
equa.append("path")
.datum({type: "LineString", coordinates: [[-180, 0], [-90, 0], [0, 0], [90, 0], [180, 0]]})
.attr("class", "equator")
.attr("d", geoGenerator);
}
equator();
// info text
svg.append('text')
.attr('x', 20)
.attr('y', 20)
.append('tspan')
.attr('id','infos')
svg.append('text')
.attr('x', 20)
.attr('y', (height-10))
.append('tspan')
.attr('id','coo')
.attr("font-size", "11")
layers.call(zoom);
function reset() {
active.classed("active", false);
active = d3.select(null);
layers.transition()
.duration(750)
.style("stroke-width", "1.5px")
.attr("transform", "");
}
return svg.node()
}
style = html`
[CSS style declaration]
<style>
svg {
/*
background-color: #blue;
*/
border: 0px solid #dddddd;
}
.boundary {
fill: none;
stroke: black;
stroke-width: 1px;
}
.land {
fill: grey;
opacity:0.05;
}
.province {
stroke: white;
stroke-width: .2px;
fill: grey;
fill-opacity:0.2;
cursor: pointer;
}
.district {
stroke: white;
fill: grey;
fill-opacity:0.2;
}
.cave {
fill: red;
stroke: red;
stroke-width: 0.1px;
}
.graticule {
fill: none;
stroke: black;
stroke-width: 0.1px;
stroke-opacity: 0.5;
}
.equator {
stroke: red;
stroke-width: 0.5px;
fill:none;
}
circle {
fill: none;
stroke-width: 1.5px;
}
</style>
`
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
