Currently, I am in the process of developing a force-directed graph using D3 for visualization. One of the challenges I encountered was implementing an age filter utilizing radio buttons on my HTML page and incorporating data from an imported JSON file.
The desired outcome is to have nodes within a specified age range (derived from the JSON data) become highlighted when a user selects a radio button. However, I kept encountering an error message that read "Uncaught TypeError: Cannot read property 'age' of undefined" whenever any of the radio buttons were clicked. Despite reviewing my code multiple times, I couldn't pinpoint the exact issue. The error seems to originate from this line of code: "if(d.age >= ageBracket[0] && d.age <= ageBracket[1])". Perhaps I need to implement another loop for 'd.age'?
**Update: I have included additional snippets of both my JavaScript and HTML code below.
JavaScript Code:
function createGraph() {
// Rest of the JavaScript code here...
});
}
HTML Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Visualization - Force Directed Graph</title>
// Remaining HTML code here...
</body>
</html>
A snippet from the JSON file:
"nodes":[
{ "id": "1", "name": "John", "age": "31", "gender": "M"},
{ "id": "2", "name": "Emily", "age": "23", "gender": "F" },
{ "id": "3", "name": "Crystal", "age": "23", "gender": "F" },
{ "id": "4", "name": "Himiko", "age": "23", "gender": "F" }],
"links": [
{ "source": "hospital1", "target": "1", "value": 200 },
{ "source": "hospital2", "target": "2", "value": 200 },
{ "source": "hospital3", "target": "3", "value": 200 },
{ "source": "hospital4", "target": "4", "value": 200 }]