{
const margin = { top : 10, right: 40, bottom: 30, left: 40 },
width = 1400 - margin.left - margin.right,
height = 700 - margin.top - margin.bottom;
const monSvg = d3.create("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
const graphiques = monSvg.append("g")
.attr("transform", `translate(${margin.left},${margin.top})`);
const radiusScale = d3.scaleLinear()
.domain([0, d3.max(goatsNames, d => d.CountLanguage)])
.range([0, 40]);
const xScale = d3.scaleLinear()
.domain([0, 10])
.range([0, 900]);
function createCircles(selection, data, yPos, color, className) {
return selection
.selectAll(`.${className}`)
.data(data)
.enter()
.append("circle")
.attr("class", className)
.attr("r",0)
.attr("cx", (d, i) => xScale((i + 1)))
.attr("cy", 0)
.transition()
.duration(2000)
.delay((d,i) => i * 400)
.attr("cy", yPos)
.attr("r", d => radiusScale(d.CountLanguage))
.attr("fill", color)
}
function createLabels(selection, data, yPos, className) {
return selection
.selectAll(`.${className}`)
.data(data)
.enter()
.append("text")
.attr("class", className)
.attr("x", (d, i) => xScale((i + 1)))
.attr("y", yPos)
.text(d => d.Name)
.attr("text-anchor", "middle")
}
createCircles(graphiques, nomsDE, 80, "#6296BC", "de");
createLabels(graphiques, nomsDE, 150, "de-text")
createCircles(graphiques, nomsFR, 280, "#EB6672", "fr");
createLabels(graphiques, nomsFR, 320, "fr-text")
createCircles(graphiques, nomsIT, 480, "#EDB40D", "it")
createLabels(graphiques, nomsIT, 530, "it-text")
yield monSvg.node();
}