{ const width = 200; const height = 320; const radius = 20; // Yield ranges from bottom to top const yieldLabels = [ "60<= y < 70", "50<= y < 60", "40<= y < 50", "30<= y < 40", "20<= y < 30", "10<= y < 20", "yield <10", ]; const circleData = [ { color: "orange", x: width / 2, y: 50 }, { color: "yellow", x: width / 2 + 20, y: 90 }, { color: "yellow", x: width / 2 - 20, y: 120 }, { color: "green", x: width / 2 + 20, y: 150 }, { color: "green", x: width / 2 - 20, y: 180 }, { color: "blue", x: width / 2 + 20, y: 210 }, { color: "blue", x: width / 2 - 20, y: 240 } ]; // Function to decide how many circles to show const n = numCircle(value); // assume `value` is defined const circlesToDraw = circleData.slice(-n); const labelsToDraw = yieldLabels.slice(-n); // Create SVG container const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .style("overflow", "visible"); // Add title svg.append("text") .attr("x", width / 2) .attr("y", 20) .attr("text-anchor", "middle") .attr("font-size", "14px") .attr("font-weight", "bold") .text("Barley yield legend"); // Add vertical line svg.append("line") .attr("x1", width / 2) .attr("x2", width / 2) .attr("y1", 40) .attr("y2", 300) .attr("stroke", "black") .attr("stroke-width", 3); // Draw circles svg.selectAll("circle") .data(circlesToDraw) .enter() .append("circle") .attr("cx", d => d.x) .attr("cy", d => d.y) .attr("r", radius) .attr("fill", d => d.color); // Add overlay text svg.selectAll("text.label") .data(circlesToDraw) .enter() .append("text") .attr("class", "label") .attr("x", d => d.x) .attr("y", d => d.y + 5) // vertically center text .attr("text-anchor", "middle") .attr("font-size", "13px") .attr("font-weight", "bold") .attr("fill", "black") .text((d, i) => labelsToDraw[i]); return svg.node(); }