<!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>