<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Render Members</title>
<!-- Include D3.js -->
<script src="https://d3js.org/d3.v7.min.js"></script>
<style>
/* Optional: Add some basic styling */
#chart {
border: 1px solid black;
margin: 20px auto;
display: block;
}
text {
dominant-baseline: middle;
text-anchor: middle;
}
</style>
</head>
<body>
<div id="chart"></div>
<script type="text/javascript">
// Fetch data from the Flask endpoint for Person nodes
d3.json('/nodes?type=Person').then(function(data) {
console.log("Fetched Data:", data);
var svg = d3.select("#chart")
.append("svg")
.attr("width", 1000)
.attr("height", 1000);
// Function to generate random position within the SVG canvas
function getRandomPosition() {
return Math.random() * 950 + 25; // Random x or y between 25 and 975 to keep nodes inside the border
}
// Render circles for each node with green color and random positions
svg.selectAll("circle")
.data(data.nodes)
.enter()
.append("circle")
.attr("cx", getRandomPosition) // Random x position
.attr("cy", getRandomPosition) // Random y position
.attr("r", 10)
.style("fill", "green"); // Set node color to green
// Add labels for each node using the 'name' and 'bioguideId' properties
svg.selectAll("text.label")
.data(data.nodes)
.enter()
.append("text")
.attr("class", "label")
.attr("x", function(d) { return d3.select(this.previousSibling).attr("cx"); }) // Position slightly to the right of the circle
.attr("y", function(d) { return d3.select(this.previousSibling).attr("cy") + 15; }) // Position below the circle
.text(function(d) {
return `${d.name || 'Person'}\nID: ${d.bioguideId || 'N/A'}`; // Single line with both name and ID
})
.style("fill", "black")
.style("font-size", "12px");
}).catch(function(error) {
console.error("Error fetching data:", error);
});
</script>
</body>
</html>