reactivechart = {
const svg = d3.create("svg")
.attr("width", svgSetting.width)
.attr("height", svgSetting.height);
svg.append("g")
.attr("transform", `translate(0,${svgSetting.height - svgSetting.margin.bottom})`)
.call(d3.axisBottom(flipperScale));
svg.append("g")
.attr("transform", `translate(${svgSetting.margin.left},0)`)
.call(d3.axisLeft(culmenLength));
svg.node().drawData = function(input_state) {
const dataSelected = penguins_data_2.filter((d)=> d.species == input_state)
svg.selectAll('circle')
.data(dataSelected)
.join(enter => enterFunc(enter),
update => updateFunc(update),
exit => exitFunc(exit))
function enterFunc(enterSel){
enterSel.append('circle')
.transition().duration(1000)
.attr("stroke", "steelblue")
.attr("stroke-width", 1.5)
.style('opacity', 0.75)
.attr("fill", (d => (d['sex'] == 'FEMALE') ? 'blue' : "orange"))
.attr("cx", (d => flipperScale(d['flipper_length_mm'])))
.attr("cy", (d => culmenLength(d['culmen_length_mm'])))
.attr("r", (d => massScale(d['body_mass_g'])))
}
function updateFunc(toUpdate) {
toUpdate.transition().duration(1000)
.attr("fill", (d => (d['sex'] == 'FEMALE') ? 'blue' : "orange"))
.attr("cx", (d => flipperScale(d['flipper_length_mm'])))
.attr("cy", (d => culmenLength(d['culmen_length_mm'])))
.attr("r", (d => massScale(d['body_mass_g'])))
}
function exitFunc(dissapearingEls){
dissapearingEls
.transition().duration(1000)
.style("opacity", 0)
.remove()
}
}
return svg.node();
}