zhmap_expan = {
const svg = d3
.select(DOM.svg(width, height))
.style("width", "100%")
.style("height", "auto");
svg
.append('image')
.attr(
'xlink:href',
'http://www.grottes-et-karsts-de-chine.org/image/xutitr.gif'
)
.attr('width', '147')
.attr('height', '445')
.attr('opacity', '0.3')
.attr('x', '80')
.attr('y', '240');
svg
.append("g")
.attr("fill", "black")
.attr("fill-opacity", 0.4)
.selectAll("rect")
.data(dataExp)
.join("rect")
.attr("rx", 3)
.attr("x", x(0))
.attr("y", d => y(d.name))
.attr("width", d => x(d.value) - x(0))
.attr("height", y.bandwidth());
svg
.append("g")
.attr("fill", "white")
.attr("text-anchor", "end")
.style("font", "14px sans-serif")
.selectAll("text")
.data(dataExp)
.join("text")
.attr("x", d => x(d.value) - 4)
.attr("y", d => y(d.name) + y.bandwidth() / 2)
.attr("dy", "0.35em")
.text(d => d.value);
svg
.append("g")
//.call(xAxis)
.style("font", "12px sans-serif");
svg
.append("g")
.call(yAxis)
.style("font", "12px sans-serif");
const geoGenerator = d3.geoPath().projection(projection);
const prov = svg.append('g').attr("id", "prov");
const kars = svg.append('g').attr("id", "kars");
var gra = svg.append('g').attr("id", "gra");
var gra_lon = 20;
var gra_la = 20;
const province = function() {
prov
.selectAll('path')
.data(provg.features)
.enter()
.append("path")
.attr("stroke-width", 0.1)
.attr("class", "province")
.attr("stroke-linejoin", "round")
.attr("stroke", "none")
.attr("stroke-width", ".2px")
.attr("fill", "grey")
.attr("fill-opacity", 0.4)
.attr("d", geoGenerator);
};
const karsts = function() {
kars
.selectAll('path')
.data(karst.features)
.enter()
.append("path")
.attr("stroke-width", 0)
.attr("class", "kars")
.attr("stroke", "purple")
.attr("fill", "purple")
.attr("fill-opacity", 0.2)
.attr("stroke-opacity", 0.2)
//.attr("stroke-linejoin", "round")
.attr("d", geoGenerator)
.clone()
.attr("transform", "translate(700,930) scale(0.3,0.3)");
};
const 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("fill", "none")
.attr("stroke", "black")
.attr("stroke-width", "0.1px")
.attr("stroke-opacity", 0.5)
.attr("d", geoGenerator);
gra
.append("path")
.datum(d3.geoGraticule().step([0, 66.33]))
.attr("class", "graticule polar")
.attr("fill", "none")
.attr("stroke", "black")
.attr("stroke-width", "0.1px")
.attr("stroke-opacity", 1)
.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("fill", "none")
.attr("stroke", "red")
.attr("stroke-width", "0.1px")
.attr("stroke-opacity", 1)
.attr("d", geoGenerator);
};
svg
.append('text')
.attr('x', 775)
.attr('y', height - 10)
.attr("fill", "purple")
.attr("stroke", "purple")
.attr("opacity", "0.3")
.append('tspan')
.attr('id', 'infos')
.attr("class", "infos")
.html("Karsts");
province();
karsts();
makescalegra();
return svg.node();
}
provg = FileAttachment("prov.json").json()
karst = FileAttachment("karst.json").json()
projection = d3
.geoOrthographic()
.scale(1200)
.rotate([-105, -36])
.translate([width / 2, height / 2])
.clipAngle(90)
dataExp = d3.csvParse(
await FileAttachment("exp_annee.csv").text(),
({ annee, totalexpe }) => ({ name: annee, value: +totalexpe })
)
x = d3
.scaleLinear()
.domain([0, d3.max(dataExp, d => d.value)])
.range([margin.left, width - margin.right])
y = d3
.scaleBand()
.domain(dataExp.map(d => d.name))
.range([margin.top, height - margin.bottom])
.padding(0.1)
xAxis = g =>
g
.attr("transform", `translate(0,${margin.top})`)
.call(d3.axisTop(x).ticks(width / 80))
.call(g => g.select(".domain").remove())
yAxis = g =>
g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y).tickSizeOuter(0))
height = dataExp.length * 25 + margin.top + margin.bottom
width = 960
margin = ({ top: 30, right: 6, bottom: 10, left: 240 })
d3 = require("d3@5")
style = html`<style>.infos {
font: bold sans-serif;
font-weight:700;
font-size:18px;
sans-serif; }</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.
