{
var width = 800;
var height = 400;
var centerX = width/2;
var centerY = height/2;
const svg = d3
.create("svg")
.attr("width", width)
.attr("height", height)
.style("border", "1px dotted #000");
const g = svg
.append("g")
.attr("transform",
"translate(" + centerX + "," + centerY + ")");
var numPoints = height/9;
var spacing = width*2 / numPoints;
var startX = -centerX*2;
var startY = - centerY*2;
const lineData = d3.range(numPoints).flatMap(i => {
return d3.range(numPoints).map(j => {
return { x: startX + i * spacing, y: startY + j * spacing};
});
});
const radiusScale = d3.scaleSqrt()
.domain([d3.min(selectedElection,
d => {if (d.result === "NA" || isNaN(parseFloat(d.result))) {return undefined;}
else {return +d.result;}}),
d3.max(selectedElection,
d => {if (d.result === "NA" || isNaN(parseFloat(d.result))) {return undefined;}
else {return +d.result;}})])
.range([5, 10]);
function generatepattern(party) {
let angle = []
if (party.party === "CDU/CSU") {
angle = anglecdu
} else if (party.party === "SPD") {
angle = anglespd
} else if (party.party === "FDP") {
angle = anglefdp
} else if (party.party === "AFD") {
angle = angleafd
} else {
angle = angleg
}
var offsetX = Math.random() * 5;
var offsetY = Math.random() * 5;
var color = party.color;
var alpha = party.alpha;
var radius = party.result;
g.append("g")
.selectAll("circle")
.data(lineData)
.join("circle")
.attr('cx', d => d.x + offsetX)
.attr('cy', d => d.y + offsetY)
.attr('r', radiusScale(radius))
.attr("opacity", 1)
.attr("fill", color)
.attr("transform", "rotate(" + angle + ")");
}
selectedElection.forEach(function(selectedElection) {
generatepattern(selectedElection);
});
return svg.node();
}