chartArea = {
const width = 350,
height = 350,
margin = { top: 20, right: 100, bottom: 30, left: 40 };
const svg = d3.create("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom);
const g = svg.append("g")
.attr("transform", `translate(${margin.left},${margin.top})`);
g.append("g").call(d3.axisLeft(y));
g.append("g")
.attr("transform", `translate(0,${height})`)
.call(d3.axisBottom(x));
g.selectAll("circle")
.data(data)
.join("circle")
.attr("cx", d => x(d.longitud_sepalo))
.attr("cy", d => y(d.longitud_petalo))
.attr("r", d => r(d.area_petalo))
.attr("fill", d => colorArea(d.area_petalo))
.attr("opacity", 0.8);
const legendValues = d3.ticks(...d3.extent(data, d=>d.area_petalo), 5);
const legend = svg.append("g")
.attr("transform", `translate(${width + margin.left + 20},${margin.top})`);
legend.append("text")
.attr("y", -10)
.attr("font-weight", "bold")
.text("area_petalo");
legend.selectAll("circle")
.data(legendValues)
.join("circle")
.attr("cy", (d,i) => i * 25)
.attr("r", d => r(d))
.attr("fill", d => colorArea(d));
legend.selectAll("text.value")
.data(legendValues)
.join("text")
.attr("class", "value")
.attr("x", r(d3.max(legendValues)) + 5)
.attr("dy", "0.35em")
.attr("y", (d,i) => i * 25)
.text(d => d.toFixed(1));
return svg.node();
}