{
const svg = d3.create("svg")
.attr("viewBox", [-width / 2, -height / 2, width, height]);
const axis = svg.selectAll(".axis")
.data([1,0])
.enter()
.append("g")
.attr("class", "axis");
axis.append("line")
.attr("x1", -width/2)
.attr("y1", 0)
.attr("x2", width/2)
.attr("y2", 0)
.attr("class", "line")
axis.append("line")
.attr("x1", 0)
.attr("y1", -height/2)
.attr("x2", 0)
.attr("y2", height/2)
.attr("class", "line")
var slicedData = desiredData.map(d=>d[regions.indexOf(xxx)]).slice(0,z+1)
svg
.append('g')
.selectAll("ellipse")
.data(slicedData)
.join("ellipse")
.attr("visibility", function (d){
return (hideCheckbox.length ===0 & d.deaths ==0)? "hidden": "visible"
})
.attr("cy", d => rScale(maxDeaths) - rScale(d.deaths))
.attr("ry", d => rScale(d.deaths))
// .attr("rx", d => rScale(d.deaths)/3)
// SPECIAL SCALE TO RESIZE SINGPAORE'S LARGER PETALS
.attr("rx", d => (d.region === "Singapore" & d.deaths > 30)? rScale(d.deaths)/5 : rScale(d.deaths)/3)
// .attr("fill", d => colorByContinent(d.region, 1))
.attr("fill", function (d, i){
return (i < indexOf2021)? colorByContinent(d.region, 1, colors_):colorByContinent(d.region, 1)
})
.attr("stroke", "white")
// .attr("stroke-width", strokeWidth)
.attr("stroke-width", function (d,i) {
// mark for max deaths in 2020 & 2021
return( d.yearWeek === maxYearWeek2021 || d.yearWeek === maxYearWeek2020? 1.5: strokeWidth)
})
.attr('transform', function(d, i) {
var rx = Math.cos(xcos(i)) * outerRadius;
var ry = Math.sin(ysin(i)) * outerRadius;
return `translate(${rx},${ry})
rotate(${xcos(i) * 180 / Math.PI + 90})
scale(${0.8})`;
})
// to add 1st year's ellipse on top of 2nd year's
if(z > indexOf2021){
svg
.append('g')
.selectAll("ellipse")
.data(slicedData.splice(0,indexOf2021))
.join("ellipse")
.attr("visibility", function (d){
return (hideCheckbox.length ===0 & d.deaths ==0)? "hidden": "visible"
})
.attr("cy", d => rScale(maxDeaths) - rScale(d.deaths))
.attr("ry", d => rScale(d.deaths))
.attr("rx", d => rScale(d.deaths) / 3)
.attr("fill", function (d, i){
return (i < indexOf2021)? colorByContinent(d.region, 1, colors_):colorByContinent(d.region, 1)
})
.attr("stroke", "white")
.attr("stroke-width", function (d,i) {
return( d.yearWeek === maxYearWeek2021 || d.yearWeek === maxYearWeek2020? 1.5: strokeWidth)
})
.attr('transform', function(d, i) {
var rx = Math.cos(xcos(i)) * outerRadius;
var ry = Math.sin(ysin(i)) * outerRadius;
return `translate(${rx},${ry})
rotate(${xcos(i) * 180 / Math.PI + 90})
scale(${0.8})`;
})
}
// color the last ellipse
// svg.selectAll(".ellipse:nth-last-child(1)")
// .attr("fill", d => colorByContinent3(d.region, 1))
// .attr("stroke", "white")
// .attr("stroke-width", 1.5)
let displayedYearWeek = desiredData.map(d=>d[regions.indexOf(xxx)])[z]["yearWeek"];
svg.append("text")
.attr("class", "label")
.attr("x", 0)
.attr("y", -15)
.text(formatter(yearWeekLookUp(displayedYearWeek)))
.attr("transform", "rotate(90)");
svg.append("text")
.attr("class", "label")
.attr("x", 0)
.attr("y", 0)
.text(desiredData.map(d=>d[regions.indexOf(xxx)])[0].region)
.attr("transform", "rotate(90)");
svg.append("text")
.attr("class", "label")
.attr("x", 0)
.attr("y", 15)
.text(desiredData.map(d=>d[regions.indexOf(xxx)])[z]["cumuDeaths"])
.attr("transform", "rotate(90)");
svg.append("text")
.attr("class", "label")
.attr("x", 0)
.attr("y", 30)
.text(`+${desiredData.map(d=>d[regions.indexOf(xxx)])[z]["deaths"]}`)
.attr("transform", "rotate(90)");
svg.attr("transform", "rotate(270)");
return svg.node()
}