map = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height])
//.attr("width", width * 6).attr("height", height * 6)
.style("font", "16px sans-serif");
svg.append("path")
.datum(land)
.attr("fill", "#ddd")
.attr("d", path);
svg.append("path")
.datum(riversLakesCenterLines)
.attr("fill", "none")
.attr("stroke", "white")
.attr("stroke-linejoin", "round")
.attr("stroke-width", "1.3px")
.attr("d", path)
svg.append("path")
.datum(lakes)
.attr("fill", "white")
.attr("d", path);
svg.append("path")
.datum(lakesEurope)
.attr("fill", "white")
.attr("d", path);
if (dataset==="Allioni") {
const g = svg.append("g")
.attr("stroke-width", 0.7)
.selectAll("g")
.data(dataAllioni
.filter(d => d.position)
.sort((a, b) => d3.descending(a.value, b.value)))
.enter().append("g")
.attr("transform", d => `translate(${d.position})`);
g.append("title")
.text(d => `${d.label} ${d.value}`);
//g.each(multiple);
g.append("circle")
.attr("fill", d => color(0))
.attr("fill-opacity", 0.45)
.attr("stroke", d => "black")
.attr("stroke-width", "0.8")
.attr("r", d => radius(d.value));
}
if (dataset==="Michaelis") {
const g = svg.append("g")
.attr("stroke-width", 0.7)
.selectAll("g")
.data(dataMichaelis
.filter(d => d.position)
.sort((a, b) => d3.descending(a.value, b.value)))
.enter().append("g")
.attr("transform", d => `translate(${d.position})`);
g.append("title")
.text(d => `${d.label} ${d.value}`);
//g.each(multiple);
g.append("circle")
.attr("fill", d => color(1))
.attr("fill-opacity", 0.45)
.attr("stroke", d => "black")
.attr("stroke-width", "0.8")
.attr("r", d => radius(d.value));
}
if (dataset==="Rast de Maupas") {
const g = svg.append("g")
.attr("stroke-width", 0.7)
.selectAll("g")
.data(dataRast
.filter(d => d.position)
.sort((a, b) => d3.descending(a.value, b.value)))
.enter().append("g")
.attr("transform", d => `translate(${d.position})`);
g.append("title")
.text(d => `${d.label} ${d.value}`);
//g.each(multiple);
g.append("circle")
.attr("fill", d => color(2))
.attr("fill-opacity", 0.45)
.attr("stroke", d => "black")
.attr("stroke-width", "0.8")
.attr("r", d => radius(d.value));
}
if (dataset==="Saussure") {
const g = svg.append("g")
.attr("stroke-width", 0.7)
.selectAll("g")
.data(dataSaussure
.filter(d => d.position)
.sort((a, b) => d3.descending(a.value, b.value)))
.enter().append("g")
.attr("transform", d => `translate(${d.position})`);
g.append("title")
.text(d => `${d.label} ${d.value}`);
//g.each(multiple);
g.append("circle")
.attr("fill", d => color(3))
.attr("fill-opacity", 0.45)
.attr("stroke", d => "black")
.attr("stroke-width", "0.8")
.attr("r", d => radius(d.value));
}
if (dataset==="Wargentin") {
const g = svg.append("g")
.attr("stroke-width", 0.7)
.selectAll("g")
.data(dataWargentin
.filter(d => d.position)
.sort((a, b) => d3.descending(a.value, b.value)))
.enter().append("g")
.attr("transform", d => `translate(${d.position})`);
g.append("title")
.text(d => `${d.label} ${d.value}`);
//g.each(multiple);
g.append("circle")
.attr("fill", d => color(4))
.attr("fill-opacity", 0.45)
.attr("stroke", d => "black")
.attr("stroke-width", "0.8")
.attr("r", d => radius(d.value));
}
if (dataset==="alle") {
const g = svg.append("g")
.attr("stroke-width", 0.7)
.selectAll("g")
.data(data
.filter(d => d.position)
.sort((a, b) => d3.descending(a.value, b.value)))
.enter().append("g")
.attr("transform", d => `translate(${d.position})`);
g.append("title")
.text(d => `${d.label} ${d.value}
Allioni: ${d.values[0]}
Michaelis: ${d.values[1]}
Rast de Maupas: ${d.values[2]}
Saussure: ${d.values[3]}
Wargentin: ${d.values[4]}`);
g.each(multiple);
g.append("circle")
.attr("fill", d => "white")
.attr("fill-opacity", 0.3)
.attr("stroke", d => "black")
.attr("stroke-width", "0.8")
.attr("r", d => radius(d.value));
}
// Color legend
/* const legend2 = svg.append("g")
.selectAll("g")
.data(color.domain())
.join("g")
.attr("transform", (d, i) => `translate(${15},${(i - (color.domain().length - 1) / 2) * 25 + 50 + radius(300) * 2})`);
legend2.append("rect")
.attr("width", 18)
.attr("height", 18)
.attr("stroke", "black")
.attr("stroke-width", 1)
.attr("fill", color)
.attr("fill-opacity", 0.7)
.attr("x", 140)
.attr("y", -40)
;
legend2.append("text")
.attr("fill", "#333")
.attr("x", 164)
.attr("y", -30)
.attr("dy", "0.35em")
.text((d,i) => correspondentsBeide[i]);
*/
function multiple(d) {
const r = radius(d.value),
g = d3.select(this);
g.selectAll("path")
.data(d => d3.pie().sort(null)(d.values))
.enter().append("path")
.attr("d", d3.arc().innerRadius(0).outerRadius(r))
.attr("stroke", "none")
.attr("fill", (d,i) => color(i)) //Hier die Farbe bestimmen...
.attr("fill-opacity", 0.7);
}
// Bubble legend
/*const legend = svg.append("g")
.attr("fill", "#333")
.attr("transform", `translate(${30 + radius(500)},${30 + radius(1000) * 2})`)
.attr("text-anchor", "middle")
.selectAll("g")
.data([250, 500, 1000])
.join("g");
legend.append("circle")
.attr("fill", "none")
.attr("stroke", "black")
.attr("stroke-width", 1)
.attr("cy", d => -radius(d))
.attr("r", radius);
legend.append("text")
.attr("y", d => -2 * radius(d))
.attr("dy", "-0.3em")
.text(radius.tickFormat(4, "s"));*/
svg.append("g")
.call(radiusLegend);
return svg.node();
}
radiusLegend = g => {
const gap = 10
const ticks = 3;
const legend = g.append("g")
.attr("fill", "#000")
.attr("transform", `translate(${radius.range()[1] + 10},${radius.range()[1] * 2 + 30})`)
.style("font", "10px sans-serif");
const circle = legend.selectAll("g")
.data([100, ...radius.ticks(ticks)])
.enter().append("g");
circle.append("circle")
.attr("fill", "none")
.attr("stroke", "#000")
.attr("stroke-width", 0.5)
.attr("cy", d => -radius(d))
.attr("r", radius);
/*circle.append("text")
.attr("x", (radius.range()[1]) + gap)
.attr("y", d => -2 * radius(d))
.attr("dy", "0.34em")
.attr("text-anchor", "start")
.text(d => d);*/
circle.append("line")
.attr("x1", 2)
.attr("y1", d => -radius(d) * 2)
.attr("x2", radius.range()[1] + gap)
.attr("y2", d => -radius(d) * 2)
.attr("stroke", "#666")
.attr("stroke-width", 0.5)
.attr("stroke-dasharray", "2 1")
/* legend.append("text")
.attr("y", d => -2 * radius(radius.domain()[1]))
.attr("dy", "-0.67em")
.attr("font-weight", "bold")
.attr("text-anchor", "middle")
.text("Kumulierte Orte"); */
legend.append("text")
.attr("y", d => 1 * radius(radius.domain()[1]))
.attr("dy", "-1.34em")
.attr("text-anchor", "middle")
//.text("n=" + d3.sum(data, d => d.total))
;
}
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.
