2025-03-10 04:40:52 -07:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
2025-03-12 20:47:11 -07:00
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
<title>Render Members</title>
|
|
|
|
|
<!-- Include D3.js -->
|
2025-03-10 04:40:52 -07:00
|
|
|
<script src="https://d3js.org/d3.v7.min.js"></script>
|
|
|
|
|
<style>
|
2025-03-12 20:47:11 -07:00
|
|
|
/* Optional: Add some basic styling */
|
|
|
|
|
#chart {
|
|
|
|
|
border: 1px solid black;
|
|
|
|
|
margin: 20px auto;
|
|
|
|
|
display: block;
|
2025-03-10 04:40:52 -07:00
|
|
|
}
|
2025-03-12 20:47:11 -07:00
|
|
|
text {
|
|
|
|
|
dominant-baseline: middle;
|
|
|
|
|
text-anchor: middle;
|
2025-03-10 04:40:52 -07:00
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
2025-03-12 20:47:11 -07:00
|
|
|
<div id="chart"></div>
|
2025-03-10 04:40:52 -07:00
|
|
|
|
2025-03-12 20:47:11 -07:00
|
|
|
<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);
|
2025-03-10 04:40:52 -07:00
|
|
|
|
2025-03-12 20:47:11 -07:00
|
|
|
var svg = d3.select("#chart")
|
2025-03-10 04:40:52 -07:00
|
|
|
.append("svg")
|
2025-03-12 20:47:11 -07:00
|
|
|
.attr("width", 1000)
|
|
|
|
|
.attr("height", 1000);
|
2025-03-10 04:40:52 -07:00
|
|
|
|
2025-03-12 20:47:11 -07:00
|
|
|
// 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
|
2025-03-10 04:40:52 -07:00
|
|
|
}
|
|
|
|
|
|
2025-03-12 20:47:11 -07:00
|
|
|
// 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
|
2025-03-10 04:40:52 -07:00
|
|
|
|
2025-03-12 20:47:11 -07:00
|
|
|
// 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);
|
|
|
|
|
});
|
2025-03-10 04:40:52 -07:00
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
