zh_title = md`# Chinese rivers`
zh_intro = md`Here is a simplified hydrographic network`
zhmap_bs = {
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;
layers.attr("transform", t);
});
const layers = svg.append('g').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);
});
const rive = layers.append('g').attr("id", "rivers");
const rivers = function() {
rive
.selectAll('path')
.data(riviere.features)
.enter()
.append("path")
.attr("stroke-width", 0.1)
.attr("class", "rivers")
.attr("stroke", "blue")
.attr("fill", "white")
.attr("d", geoGenerator);
};
rivers();
svg
.append('text')
.attr('x', 20)
.attr('y', height - 10)
.append('tspan')
.attr('id', 'coo')
.attr("font-size", "12");
layers.call(zoom);
return svg.node();
}
projection = d3
.geoOrthographic()
.scale(1200)
.rotate([-105, -35])
.translate([width / 2, height / 2])
.clipAngle(90)
width = 960
height = 860
riviere = topojson.feature(river, river.objects.zhrivers)
import { river } from "@jipexu/underground-library"
d3 = require("https://d3js.org/d3.v6.min.js")
topojson = require("https://unpkg.com/topojson@3.0.2/dist/topojson.js")
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.
