shuang_map = {
var k = 1,
projection = d3
.geoOrthographic()
.rotate([-105, -15])
.translate([width / 2, height / 2])
.clipAngle(90)
.fitExtent([[0, 0], [width, height]], sh_ser_s);
const geoGenerator = d3.geoPath().projection(projection);
const svg = d3
.select(DOM.svg(width, height))
.attr('id', 'ditu')
.style("width", "100%")
.style("height", "auto");
const zoom = d3
.zoom()
.scaleExtent([1, 300])
.translateExtent([[0, 0], [width, height]])
.on("zoom", event => {
const t = event.transform;
k = event.transform.k;
layers.attr("transform", t);
scaleBar
.zoomFactor(t.k)
.label(`${Math.round(scaleBar.distance() / t.k)} m`);
echelle.call(scaleBar);
return k;
});
const scaleBar = d3
.geoScaleBar()
.units(d3.geoScaleMeters)
.projection(projection)
.size([width, height])
.left(.02)
.top(.95)
.distance(3000)
.label("3000 m") // The label on top of the scale bar
.labelAnchor("middle")
.tickSize(null)
.tickValues(null);
const locator = function(event, d, t) {
var latlon = projection.invert(d3.pointer(event));
d3.select("#coo").text(
latlon[1].toFixed(4) + " ° N " + latlon[0].toFixed(4) + " ° E "
);
};
var divtooltip = d3
.select("body")
.append("div")
.style("position", "absolute")
//.attr("id", "divtooltip")
.style("visibility", "hidden")
.attr("class", "tooltip bs-tooltip-right")
.style("opacity", 1);
const layers = svg
.append('g')
.attr('id', 'layers')
.attr('class', 'layers');
const fond = layers
.append('rect')
.attr('x', 0)
.attr('y', 0)
.attr('height', height)
.attr('width', width)
.attr('stroke', 'rgba(255,255,255,1)')
.attr('fill', 'rgba(255,255,255,1)')
.on("mousemove", function(event, d) {
locator(event, d, this);
divtooltip.style("visibility", "hidden");
});
const serie = layers
.append('g')
.attr("id", "series")
.attr("class", "serieover");
const station_p = layers
.append('g')
.attr("id", "stations")
.attr("class", "stationover");
const station_0 = layers
.append('g')
.attr("id", "station_0")
.attr("class", "station0over");
const topo_serie = function(d) {
serie
.selectAll('path')
.data(sh_ser_s.features)
.enter()
.append('path')
.attr('class', 'serie')
.attr('fill', 'red')
.attr('stroke', 'red')
.attr('stroke-width', 0.01)
.attr('d', geoGenerator)
.on('mouseover', function(event, d) {
d3.select('#infos')
.text('Série ' + d.properties.SERIE_NR)
.attr('fill', 'black');
divtooltip
.transition()
.duration(200)
.style("visibility", "visible")
.style("opacity", .5);
divtooltip
.html(
`<div class="arrow"></div><div class="tooltip-inner">${d.properties.SERIE_NR}</div>`
)
.style("left", event.pageX + 10 + "px")
.style("top", event.pageY - 10 + "px");
})
.on("mousemove", function(event, d) {
locator(event, d, this);
divtooltip
.style("left", event.pageX + 10 + "px")
.style("top", event.pageY - 10 + "px");
});
};
const topo_sta_p = function(d) {
station_p
.selectAll('path')
.data(sh_sta_p.features)
.enter()
.append('path')
.attr('d', geoGenerator.pointRadius(0.3 / k))
.on('mouseover', function(event, d) {
d3.select('#infos')
.text(
'Station ' +
d.properties.STN_NR +
' / Série ' +
d.properties.SERIE_NR
)
.attr('fill', 'red');
})
.on('mouseleave', function(event, d) {
d3.select('#infos').text('');
})
.on("mousemove", function(event, d) {
locator(event, d, this);
});
};
const topo_sta_0 = function(d) {
station_0
.selectAll('path')
.data(sh_sta_0.features)
.enter()
.append('path')
.attr('d', geoGenerator.pointRadius(0.5 / k))
.attr('fill', "grey")
.on('mouseover', function(event, d) {
d3.select('#infos')
.text(
'Station ' +
d.properties.STN_NR +
' / Série ' +
d.properties.SERIE_NR
)
.attr('fill', 'red');
divtooltip
.transition()
.duration(200)
.style("visibility", "visible")
.style("opacity", .5);
divtooltip
.html(
`<div class="arrow"></div><div class="tooltip-inner">0/${d.properties.SERIE_NR}</div>`
)
.style("left", event.pageX + 8 + "px")
.style("top", event.pageY - 20 + "px");
})
.on('mouseleave', function(event, d) {
d3.select('#infos').text('');
})
.on("mousemove", function(event, d) {
locator(event, d, this);
});
};
topo_serie();
switch (r) {
case 'st0':
topo_sta_0();
break;
case 'stAll':
topo_sta_p();
break;
}
layers.call(zoom);
const echelle = svg.append('g').call(scaleBar);
svg
.append('text')
.attr('x', 20)
.attr('y', 36)
.append('tspan')
.attr('id', 'infos')
.attr("class", "infos");
svg
.append('text')
.attr('x', 20)
.attr('y', height - 5)
.append('tspan')
.attr('id', 'coo')
.attr("font-size", "11");
return svg.node();
}
style = html`
[CSS style declaration]
<style>
.infos {
font: bold sans-serif;
font-weight:700;
font-size:24px;
sans-serif;
}
.serieover path:hover {
fill: black;
stroke:black;
stroke-fill:black;
}
.stationover path:hover {
fill: red;
stroke:none;
}
.station0over path:hover {
fill: black;
stroke:none;
}
.tooltip {
position: absolute;
z-index: 1070;
display: block;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-style: normal;
font-weight: 400;
line-height: 1.5;
text-align: left;
text-align: start;
text-decoration: none;
text-shadow: none;
text-transform: none;
letter-spacing: normal;
word-break: normal;
word-spacing: normal;
white-space: normal;
line-break: auto;
font-size: 0.875rem;
word-wrap: break-word;
opacity: 0;
/*box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
}
.tooltip.show {
opacity: 0.3;
}
.tooltip .arrow {
position: absolute;
display: block;
width: 0.8rem;
height: 0.4rem;
top:0.5rem
}
.tooltip .arrow::before {
position: absolute;
content: "";
border-color: transparent;
border-style: solid;
}
.bs-tooltip-top, .bs-tooltip-auto[x-placement^="top"] {
padding: 0.4rem 0;
}
.bs-tooltip-top .arrow, .bs-tooltip-auto[x-placement^="top"] .arrow {
bottom: 0;
}
.bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before {
top: 0;
border-width: 0.4rem 0.4rem 0;
border-top-color: #000;
}
.bs-tooltip-right, .bs-tooltip-auto[x-placement^="right"] {
padding: 0 0.4rem;
}
.bs-tooltip-right .arrow, .bs-tooltip-auto[x-placement^="right"] .arrow {
left: 0;
width: 0.4rem;
height: 0.8rem;
}
.bs-tooltip-right .arrow::before, .bs-tooltip-auto[x-placement^="right"] .arrow::before {
right: 0;
border-width: 0.4rem 0.4rem 0.4rem 0;
border-right-color: #000;
}
.bs-tooltip-bottom, .bs-tooltip-auto[x-placement^="bottom"] {
padding: 0.4rem 0;
}
.bs-tooltip-bottom .arrow, .bs-tooltip-auto[x-placement^="bottom"] .arrow {
top: 0;
}
.bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
bottom: 0;
border-width: 0 0.4rem 0.4rem;
border-bottom-color: #000;
}
.bs-tooltip-left, .bs-tooltip-auto[x-placement^="left"] {
padding: 0 0.4rem;
}
.bs-tooltip-left .arrow, .bs-tooltip-auto[x-placement^="left"] .arrow {
right: 0;
width: 0.4rem;
height: 0.8rem;
}
.bs-tooltip-left .arrow::before, .bs-tooltip-auto[x-placement^="left"] .arrow::before {
left: 0;
border-width: 0.4rem 0 0.4rem 0.4rem;
border-left-color: #000;
}
.tooltip-inner {
max-width: 200px;
padding: 0.25rem 0.5rem;
color: #fff;
text-align: center;
background-color: #000;
border-radius: 0.25rem;
}
</style>`
import { radio } from "@jashkenas/inputs"
import { sh_sta_p, sh_ser_s, sh_sta_0 } from "@jipexu/underground-library"
width=960;
height = 600
d3 = require("https://d3js.org/d3.v6.min.js", "d3-geo-projection@2", "d3-geo-scale-bar@1.1.1")
topojson = require("topojson-client@3")
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.
