Social development practitioner. Trying to understand our world.
active = d3.select(null);
k=1;
gra_lon = 20;
gra_la = 20;
geoGenerator = d3.geoPath()
.projection(projection);
svg = d3.select(DOM.svg(width, height))
.attr('id','ditu')
//this give responsive map
.style("width", "100%")
.style("height", "auto");
layers = svg.append('g').attr('class', 'layers');
mond = layers.append("g").attr("id", "mond");
prov = layers.append('g').attr("id", "prov");
kars = layers.append('g').attr("id", "kars");
dis = layers.append('g').attr("id", "dis");
gra = layers.append('g').attr("id", "gra");
equa = layers.append('g').attr("id", "equa");
canc = layers.append('g').attr("id", "canc");
capr = layers.append('g').attr("id", "canc");
gro = layers.append('g').attr("id", "gro");
zoom = d3.zoom()
.scaleExtent([1, 300])
.translateExtent([[0, 0], [width, height]])
.on("zoom", () => {
k = d3.event.transform.k;
if (k<=2) {
gra_lon = 20;
gra_la = 20;
} else if (k <= 5) {
gra_lon = 10;
gra_la = 10;
} else if (k <= 20) {
gra_lon = 5;
gra_la = 5;
} else if (k <= 50) {
gra_lon = 2;
gra_la = 2;
} else if (k <= 100) {
gra_lon = 1;
gra_la = 1;
}
if (k > 3.25){d3.select("body").selectAll(".kars").remove();}
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);
d3.select("body").selectAll(".district").style("stroke-width", 0.2 / k);
if(k<2) {prov.selectAll("path").attr("stroke-width", 0)} else {prov.selectAll("path").attr("stroke-width", 0.4 / k)};
console.log(k);
return k;
});
locator = function(d,t) {
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)
.attr("cy", y)
.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();
}
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)});
/*
mond.append("path")
.datum(topojson.feature(gaia, gaia.objects.countries))
.attr("class", "boundary")
.attr("stroke", "black")
.attr("stroke-linejoin", "round")
.attr("stroke-width", 0.1)
.attr("d", geoGenerator);
*/
}
karsts = function(){
kars.selectAll('path')
.data(karst.features)
.enter()
.append("path")
.attr("stroke-width", 0)
.attr("class", "kars")
//.attr("stroke-linejoin", "round")
.attr("d", geoGenerator)
}
province = function(){
prov.selectAll('path')
.data(provg.features)
.enter()
.append("path")
.attr("stroke-width", 0)
.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", (d) => {
if (dataMap.has(d.id) || !urlMap.has(d.id))
viewcounties(d);
else {
d3.json(urlMap.get(d.id)).then((val) => {
dataMap.set(d.id,val);
viewcounties(d);
});
}
});
}
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.mouse(svg.node())[0];
var y = d3.mouse(svg.node())[1];
particle(x,y);
})
.on('mouseenter', function(d) {
//d3.select(this).attr('d', geoGenerator.pointRadius(0.2));
//d3.select(this).style('fill', 'none').style("fill-opacity", 0.1);
d3.select('#infos').text(`Ω : `+d.properties.Name);
})
.on('mouseleave', function() {
//d3.select(this).attr('d', geoGenerator.pointRadius(0.2));
//d3.select(this).attr('class', 'cave').style("fill-opacity", 1);
});
}
makescalegra = function () {
gra.append("path")
.datum(d3.geoGraticule().extent([[-180,(-80+1e-6)],[180,(80+1e-6)]]).step([gra_la, gra_lon]))
.attr("class", "graticule")
.attr("d", geoGenerator);
gra.append("path")
.datum(d3.geoGraticule().step([0,66.33]))
.attr("class", "graticule polar")
.attr("d", geoGenerator);
gra.append("path")
.datum(d3.geoGraticule().extent([[-180,-23.4369511],[180,23.4369511]]).step([0,23.436951]))
.attr("class", "graticule tropic")
.attr("d", geoGenerator);
/*
gra.append("path")
.datum(d3.geoGraticule().extent([[-180,-23.4369511],[180,23.4369511]]).outline())
.attr("class", "graticule tropic")
.attr("d", geoGenerator); */
}
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);
}
cancer = function() {
canc.append("path")
.datum({type: "LineString", coordinates: tcanc})
.attr("class", "tropic")
.attr("d", geoGenerator);
}
capricorne = function() {
capr.append("path")
.datum({type: "LineString", coordinates: tcapri})
.attr("class", "tropic")
.attr("d", geoGenerator);
}
zhmap = {
function viewcounties(d) {
d3.select("body").selectAll(".district").remove();
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)
.attr("transform", "translate(" + translate + ")scale(" + scale + ")" );
d3.select("body").selectAll(".graticule").style("stroke-width", 0.02);
const distri = dataMap.has(d.id) ? dataMap.get(d.id).features : [];
dis.append('g').selectAll('path')
.data(distri)
.enter()
.append("path")
.attr("class", "district")
.attr("d", geoGenerator)
//.attr('fill', 'none')
.attr('stroke','#fff')
.attr("stroke-linejoin", "round")
.attr("stroke-width", 0.02)
//.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);
d3.select('#infos').text('');
d3.select("#coo").text('');
d3.select(this)
.transition()
.duration(2000)
.delay(100)
.style("fill", "grey")
.style('fill-opacity', 0.2);
})
.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", 0.1 / scale + "px")
.attr("transform", "translate(" + translate + ")scale(" + scale + ")" );
gro.selectAll("path").attr('d',geoGenerator.pointRadius(0.03));
d3.select("body").selectAll(".district").style("stroke-width", 0.02);
d3.select("body").selectAll(".graticule").style("stroke-width", 0.01);
console.log(scale);//debug
console.log(k, (scale-scale+0.2));//debug
})
gro.selectAll("path").attr('d',geoGenerator.pointRadius(0.03));
}
monde();
province();
karsts()
if ( morelayers[0] == 'Karsts' ) {
kars.selectAll("path").style("fill", 'blue').attr('fill','blue')
//.attr("fill", "none");
};
makescalegra();
//cancer();
//equator();
//capricorne();
grotte();
// info text
svg.append('text')
.attr('x', 24)
.attr('y', 36)
.append('tspan')
.attr('id','infos')
.attr("class", "infos");
svg.append('text')
.attr('x', 20)
.attr('y', (height-10))
.append('tspan')
.attr('id','coo')
.attr("font-size", "11");
svg.call(zoom);
return svg.node()
}
projection = d3.geoOrthographic()
.scale(330)
.rotate([-105, -32])
.translate([width / 2, height / 2])
.clipAngle(90)
style = html`
[CSS style declaration]
<style>
svg {
/*
background-color: #blue;
*/
border: 0px solid #dddddd;
}
.boundary {
fill: none;
stroke: grey;
stroke-width: 0.05px;
}
.land {
fill: grey;
opacity:0.05;
}
.province {
stroke: white;
//stroke-width: .2px;
fill: grey;
fill-opacity:0.3;
cursor: pointer;
}
.district {
stroke: white;
fill: grey;
fill-opacity:0.2;
}
.kars {
stroke: purple;
fill: purple;
fill-opacity:0.2;
stroke-opacity: 0.2;
}
.cave {
fill: red;
stroke: red;
stroke-width: 0px;
}
.graticule {
fill: none;
stroke: black;
stroke-width: 0.1px;
stroke-opacity: 0.5;
}
.polar {
fill: none;
stroke: black;
stroke-width: 0.1px;
stroke-opacity: 1;
}
.equator {
stroke: red;
stroke-width: 0.5px;
fill:none;
}
.tropic {
fill:none;
stroke: red;
stroke-width: 0.1px;
stroke-opacity: 1;
}
.infos {
font: bold sans-serif;
font-weight:700;
font-size:30px;
sans-serif; }
circle {
fill: none;
stroke-width: 1.5px;
}
</style>
`
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.
