Welcome back, visualization explorers! In our journey through D3.js and Canvas, we’ve covered the fundamentals of drawing, interacting, and even simulating forces. Now, it’s time to bring all those pieces together into a truly practical and engaging project: a filterable network diagram rendered on an HTML5 Canvas.

This chapter will guide you, step-by-step, through building an interactive network visualization that can dynamically update its displayed data based on user input. You’ll learn how to seamlessly integrate D3’s powerful data-binding and force simulation capabilities with the high-performance drawing of Canvas, creating a smooth and responsive experience even with moderately sized datasets. We’ll focus on making the graph interactive, allowing users to filter nodes and links, providing a hands-on experience that solidifies your understanding.

Before we dive in, make sure you’re comfortable with:

  • Basic HTML, CSS, and JavaScript.
  • Working with the HTML5 Canvas API (drawing lines, circles, clearing the canvas).
  • D3.js selections and data binding (from previous chapters).
  • The concept of D3’s force simulation (d3-force) and its basic parameters (also covered previously).

Ready to build something awesome? Let’s get started!

Core Concepts: Bringing It All Together

Building a filterable network diagram on Canvas involves a few crucial concepts that tie together everything we’ve learned so far.

At its heart, a network diagram (often called a graph, not to be confused with chart types like bar graphs) visualizes relationships between entities.

  • Nodes (or Vertices): These are the individual entities in your network. Think of people in a social network, cities on a map, or concepts in a knowledge graph.
  • Links (or Edges): These represent the connections or relationships between nodes. For example, friendships between people, roads between cities, or hierarchical relationships between concepts.

D3’s d3-force module is our go-to for arranging these nodes and links in an aesthetically pleasing and informative way, simulating physical forces to untangle the graph.

2. Why Canvas for Network Diagrams?

We’ve discussed Canvas vs. SVG before, but it’s worth reiterating for network diagrams:

  • Performance: For graphs with hundreds or thousands of nodes and links, SVG can become sluggish. Each SVG element is part of the DOM, and the browser needs to manage and render all of them. Canvas, on the other hand, draws pixels directly. When you update the graph, you simply redraw the entire scene, which is often much faster for complex, dynamic visualizations.
  • Direct Pixel Control: Canvas gives you fine-grained control over every pixel, allowing for highly custom and performant drawing techniques, especially useful for complex node/link styles or animations.

The trade-off, as you might recall, is that Canvas elements are not part of the DOM, so standard D3 event handling (like .on("click")) directly on drawn shapes isn’t available. We’ll need to implement our own hit-testing logic for interactions like dragging.

3. Interactive Filtering: Updating the Simulation

How do we make our network diagram “filterable”? It means dynamically changing which nodes and links are visible based on some criteria. The key steps for filtering in a D3 force simulation are:

  1. Store Original Data: Always keep a copy of your complete, unfiltered dataset.
  2. Generate Filtered Data: Create new nodes and links arrays containing only the data that meets your filtering criteria.
  3. Update the Simulation: Tell the D3 force simulation about the new nodes and links data using simulation.nodes(filteredNodes) and simulation.links(filteredLinks).
  4. Restart the Simulation: It’s crucial to simulation.alphaTarget(0.3).restart() to make the simulation recalculate with the new data. alphaTarget ensures the simulation has enough “energy” to settle into a new stable state.
  5. Redraw: After the simulation updates, our Canvas drawing function needs to clear the canvas and redraw everything based on the new positions.

4. D3 and Canvas Interaction: Drawing with Context

While D3 helps us manage data and calculations (like force simulation), the actual drawing on Canvas is done using the Canvas 2D rendering context. D3 provides helpers, like d3-path, that can generate Canvas commands, but for simple shapes like lines and circles, directly using context.beginPath(), context.arc(), context.lineTo(), context.stroke(), and context.fill() is often straightforward and performant.

For D3 to “know” about our Canvas elements for dragging, we’ll attach d3.drag() to the Canvas element itself and then use its event data (d3.event.subject) to identify which node is being dragged and update its x and y coordinates.

5. Data Structure for Our Network

Our network data will typically come in a JSON format with two main arrays: nodes and links.

{
  "nodes": [
    {"id": "Alice", "group": "Friends"},
    {"id": "Bob", "group": "Friends"},
    {"id": "Charlie", "group": "Family"},
    {"id": "David", "group": "Colleagues"},
    {"id": "Eve", "group": "Friends"}
  ],
  "links": [
    {"source": "Alice", "target": "Bob", "value": 1},
    {"source": "Alice", "target": "Charlie", "value": 2},
    {"source": "Bob", "target": "Eve", "value": 1},
    {"source": "Charlie", "target": "David", "value": 3}
  ]
}

Notice how links refer to nodes by their id. D3’s d3.forceLink() will automatically resolve these string IDs to the actual node objects, which is super convenient!

Step-by-Step Implementation: Building Our Filterable Network

Let’s build our project piece by piece.

Step 1: Project Setup

First, create a basic HTML file, a JavaScript file, and a simple CSS file to get our environment ready.

Create a folder named filterable-network. Inside it, create:

  • index.html
  • style.css
  • script.js
  • data.json (for our network data)

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Filterable D3 Canvas Network</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Filterable Network Diagram</h1>
    <div class="controls">
        <label for="groupFilter">Filter by Group:</label>
        <select id="groupFilter">
            <option value="all">All Groups</option>
            <!-- Options will be populated by D3 -->
        </select>
    </div>
    <div id="chart-container">
        <canvas id="networkCanvas"></canvas>
    </div>

    <!-- D3.js library (latest stable v7.x.x as of Dec 2025) -->
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

Here, we’ve set up a basic HTML structure: a title, a div for controls (including a dropdown for filtering), a div for our chart, and importantly, our <canvas> element. We’re also loading D3.js v7 from the official CDN and linking our script.js and style.css files.

style.css:

body {
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 20px;
    background-color: #f4f4f4;
}

h1 {
    color: #333;
}

.controls {
    margin-bottom: 20px;
    padding: 15px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

label {
    margin-right: 10px;
    font-weight: bold;
    color: #555;
}

select {
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
}

select:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0,123,255,0.25);
}

#chart-container {
    border: 1px solid #ddd;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    background-color: #fff;
    border-radius: 8px;
}

#networkCanvas {
    display: block; /* Remove extra space below canvas */
    background-color: #fcfcfc;
}

This CSS provides some basic styling to make our page look presentable. Nothing too complex, just enough to frame our visualization nicely.

data.json:

{
  "nodes": [
    {"id": "Node A", "group": "Group 1"},
    {"id": "Node B", "group": "Group 1"},
    {"id": "Node C", "group": "Group 2"},
    {"id": "Node D", "group": "Group 1"},
    {"id": "Node E", "group": "Group 3"},
    {"id": "Node F", "group": "Group 2"},
    {"id": "Node G", "group": "Group 3"},
    {"id": "Node H", "group": "Group 1"},
    {"id": "Node I", "group": "Group 2"},
    {"id": "Node J", "group": "Group 3"}
  ],
  "links": [
    {"source": "Node A", "target": "Node B", "value": 1},
    {"source": "Node A", "target": "Node C", "value": 2},
    {"source": "Node B", "target": "Node D", "value": 1},
    {"source": "Node C", "target": "Node F", "value": 3},
    {"source": "Node D", "target": "Node E", "value": 2},
    {"source": "Node E", "target": "Node G", "value": 1},
    {"source": "Node F", "target": "Node I", "value": 2},
    {"source": "Node G", "target": "Node J", "value": 3},
    {"source": "Node H", "target": "Node A", "value": 1},
    {"source": "Node H", "target": "Node D", "value": 2},
    {"source": "Node I", "target": "Node J", "value": 1},
    {"source": "Node J", "target": "Node C", "value": 2}
  ]
}

This is our sample network data. Each node has an id and a group. Links connect nodes by their id and have a value. We’ll use the group property for filtering.

Step 2: Initialize Canvas and Load Data

Now, let’s start filling script.js. We’ll begin by setting up our Canvas and loading the data.

script.js (Initial Setup):

// Define dimensions for our canvas
const width = 800;
const height = 600;

// Select the canvas element and get its 2D rendering context
const canvas = d3.select("#networkCanvas")
    .attr("width", width)
    .attr("height", height)
    .node(); // .node() gets the raw DOM element

const context = canvas.getContext("2d"); // This is what we'll draw on!

// Global variables to store our data and simulation
let graphData; // Will hold the original, unfiltered data
let simulation; // Our D3 force simulation

// Define color scale for node groups
const colorScale = d3.scaleOrdinal(d3.schemeCategory10);

// Function to load data and start the visualization
async function initialize() {
    // Load our network data from data.json
    graphData = await d3.json("data.json");
    console.log("Data loaded:", graphData);

    // Initialize the force simulation
    // We'll set up forces later, for now just create the simulation object
    simulation = d3.forceSimulation(graphData.nodes)
        .force("link", d3.forceLink(graphData.links).id(d => d.id))
        .force("charge", d3.forceManyBody().strength(-200)) // Nodes repel each other
        .force("center", d3.forceCenter(width / 2, height / 2)); // Centers the entire graph

    // We'll define the drawing function and tick handler next!
    // For now, let's just ensure data loads and simulation is created.

    // Populate the filter dropdown
    populateFilterDropdown();

    // Attach event listener for filter changes
    d3.select("#groupFilter").on("change", applyFilter);

    // Initial draw
    applyFilter(); // Apply initial "all" filter
}

// Function to populate the group filter dropdown
function populateFilterDropdown() {
    // Get unique group names from all nodes
    const groups = Array.from(new Set(graphData.nodes.map(d => d.group)));

    // Select the dropdown
    const select = d3.select("#groupFilter");

    // Add options for each group
    select.selectAll("option.group-option")
        .data(groups)
        .enter()
        .append("option")
        .attr("class", "group-option") // Add a class to easily select these options later
        .attr("value", d => d)
        .text(d => d);
}


// Call the initialization function when the script loads
initialize();

Explanation:

  1. We define width and height for our canvas.
  2. d3.select("#networkCanvas") gets our canvas element. We set its width and height attributes and then use .node() to get the raw HTML <canvas> element.
  3. canvas.getContext("2d") gives us the 2D rendering context, which is the actual API we use to draw shapes.
  4. graphData will store the original data, and simulation will be our D3 force layout.
  5. colorScale is a D3 ordinal scale that will assign a consistent color to each node group.
  6. The initialize() function is async because we’re using await d3.json("data.json") to load our data asynchronously. This is a robust way to handle data loading.
  7. Inside initialize, we set up our d3.forceSimulation. We initialize it with graphData.nodes and add three basic forces:
    • d3.forceLink(): Creates links between nodes. We tell it how to identify nodes by their id.
    • d3.forceManyBody(): Makes nodes repel each other, preventing them from overlapping too much.
    • d3.forceCenter(): Pulls all nodes towards the center of the canvas.
  8. populateFilterDropdown() dynamically creates <option> elements for each unique group found in our nodes data, adding them to the #groupFilter <select> element.
  9. An event listener is attached to the #groupFilter so that applyFilter is called whenever the selection changes.
  10. applyFilter() is called once at the end to display the initial unfiltered graph.
  11. Finally, we call initialize() to kick everything off.

If you open index.html in your browser now, you won’t see anything drawn yet, but if you check your browser’s console, you should see “Data loaded:” followed by your parsed JSON data, and the dropdown should be populated with “All Groups”, “Group 1”, “Group 2”, and “Group 3”. This confirms our data loading and basic setup are working!

Step 3: Drawing on Canvas

Now for the fun part: making our network visible! We need a function to draw the links and nodes using the Canvas context.

script.js (Add drawCanvas function and simulation.on("tick")):

// ... (previous code) ...

// Function to draw everything on the canvas
function drawCanvas() {
    // Clear the entire canvas on each tick
    context.clearRect(0, 0, width, height);

    // Draw links
    context.beginPath(); // Start a new path for links
    graphData.links.forEach(d => {
        context.moveTo(d.source.x, d.source.y); // Move to the start of the link
        context.lineTo(d.target.x, d.target.y); // Draw a line to the end of the link
    });
    context.strokeStyle = "#aaa"; // Light grey color for links
    context.stroke(); // Render the path

    // Draw nodes
    graphData.nodes.forEach(d => {
        context.beginPath(); // Start a new path for each node
        // Draw a circle for each node
        context.arc(d.x, d.y, 5, 0, 2 * Math.PI); // x, y, radius, startAngle, endAngle
        context.fillStyle = colorScale(d.group); // Color based on node group
        context.fill(); // Fill the circle
        context.strokeStyle = "#fff"; // White stroke for visibility
        context.lineWidth = 1;
        context.stroke(); // Draw the stroke

        // Add node labels (optional, but good for understanding)
        context.fillStyle = "#333";
        context.font = "10px sans-serif";
        context.textAlign = "center";
        context.textBaseline = "middle";
        context.fillText(d.id, d.x, d.y + 12); // Position label slightly below node
    });
}

// Tell the simulation to call drawCanvas on each "tick" event
simulation.on("tick", drawCanvas);

// ... (rest of the code, including initialize() call) ...

Explanation:

  1. The drawCanvas() function is responsible for all drawing operations.
  2. context.clearRect(0, 0, width, height) is crucial. On every frame, we completely erase what was drawn before, then redraw everything in its new position. This is how Canvas animation works.
  3. Drawing Links:
    • context.beginPath(): Starts a new drawing path. This groups all subsequent moveTo and lineTo calls into a single path.
    • We iterate through graphData.links. For each link, we moveTo its source node’s coordinates (d.source.x, d.source.y) and lineTo its target node’s coordinates (d.target.x, d.target.y).
    • context.strokeStyle sets the color, and context.stroke() actually draws all the lines defined in the current path.
  4. Drawing Nodes:
    • We iterate through graphData.nodes. For each node, we start a new path (context.beginPath()) because each node is a separate shape (a circle).
    • context.arc() draws a circle. Its parameters are (x, y, radius, startAngle, endAngle). 2 * Math.PI completes a full circle.
    • context.fillStyle sets the fill color using our colorScale, and context.fill() fills the circle.
    • context.strokeStyle and context.lineWidth add a white border, and context.stroke() draws it.
    • We also add context.fillText to draw the node’s ID as a label, positioned just below the node.
  5. simulation.on("tick", drawCanvas): This is the magic! D3’s force simulation dispatches a “tick” event whenever the simulation advances one step. By attaching drawCanvas to this event, our graph will be redrawn constantly as the nodes move towards their stable positions, creating a smooth animation.

Now, if you open index.html, you should see your network diagram animating and then settling into a stable layout! You’ve successfully rendered a D3 force-directed graph on Canvas!

Step 4: Implementing Dragging Interaction

A network diagram isn’t truly interactive without the ability to drag nodes. Since Canvas doesn’t have individual DOM elements for nodes, we need a different approach than with SVG. We’ll attach d3.drag() to the entire canvas and then figure out which node was clicked.

script.js (Add dragging logic):

// ... (previous code, including drawCanvas and simulation.on("tick")) ...

// Define the drag behavior
const drag = d3.drag()
    .container(canvas) // Specify that dragging happens within the canvas
    .subject(findSubject) // Custom function to determine which node is being dragged
    .on("start", dragstarted)
    .on("drag", dragged)
    .on("end", dragended);

// Apply the drag behavior to the canvas
d3.select(canvas).call(drag);

// Function to find the node closest to the mouse pointer
function findSubject(event) {
    // We need to check if the mouse is over any node
    // event.x and event.y are the mouse coordinates relative to the canvas
    for (const node of graphData.nodes) {
        const dx = event.x - node.x;
        const dy = event.y - node.y;
        // If the distance from the mouse to the node's center is less than its radius (5)
        if (dx * dx + dy * dy < 5 * 5) { // Using squared distance for performance
            // Return the node; d3.drag will set it as event.subject
            return node;
        }
    }
    return null; // No node found
}

function dragstarted(event) {
    // If the simulation is stopped, restart it
    if (!event.active) simulation.alphaTarget(0.3).restart();
    // Fix the dragged node's position
    event.subject.fx = event.subject.x;
    event.subject.fy = event.subject.y;
}

function dragged(event) {
    // Update the fixed position of the dragged node
    event.subject.fx = event.x;
    event.subject.fy = event.y;
}

function dragended(event) {
    // If the simulation is still running, cool it down
    if (!event.active) simulation.alphaTarget(0);
    // Unfix the node's position, allowing the forces to take over again
    // If you want the node to stay where you dropped it, comment these two lines out
    event.subject.fx = null;
    event.subject.fy = null;
}

// ... (rest of the code, including initialize() call) ...

Explanation:

  1. d3.drag() creates a drag behavior.
  2. .container(canvas) tells D3 that the dragging events should be listened for on the canvas element itself.
  3. .subject(findSubject) is the crucial part for Canvas. Instead of D3 automatically knowing the dragged element (like with SVG), we provide a custom function findSubject. This function takes the current mouse event and needs to return the data object (node in our case) that is under the mouse.
    • findSubject iterates through all graphData.nodes. For each node, it calculates the distance between the mouse coordinates (event.x, event.y) and the node’s current position (node.x, node.y).
    • If the distance is less than the node’s radius (5 pixels), we consider that node to be “under the mouse” and return it.
  4. .on("start", dragstarted), .on("drag", dragged), and .on("end", dragended) define what happens during different phases of the drag:
    • dragstarted: When dragging begins, we ensure the simulation is active (simulation.alphaTarget(0.3).restart()) and “fix” the node’s position (event.subject.fx = event.subject.x) so it doesn’t immediately fly away due to forces.
    • dragged: As the mouse moves, we update the node’s fixed position (event.subject.fx = event.x).
    • dragended: When dragging stops, we can optionally release the node’s fixed position (event.subject.fx = null) so it can be influenced by the forces again. We also cool down the simulation if it’s no longer active.
  5. d3.select(canvas).call(drag) applies this drag behavior to our canvas element.

Now you can drag nodes around on your network diagram! The other nodes will react dynamically due to the force simulation. This is a big step for interactivity on Canvas!

Step 5: Implementing the Filtering Logic

Now, let’s connect our dropdown filter to the network diagram. This involves updating the nodes and links that the force simulation sees, and then restarting the simulation.

script.js (Add applyFilter function):

// ... (previous code, including drag functions) ...

// Function to apply the selected filter
function applyFilter() {
    const selectedGroup = d3.select("#groupFilter").property("value");
    console.log("Filtering by group:", selectedGroup);

    let filteredNodes;
    let filteredLinks;

    if (selectedGroup === "all") {
        // If "All Groups" is selected, use the original data
        filteredNodes = graphData.nodes;
        filteredLinks = graphData.links;
    } else {
        // Filter nodes based on the selected group
        filteredNodes = graphData.nodes.filter(node => node.group === selectedGroup);

        // Filter links: only keep links where BOTH source and target nodes are in the filteredNodes
        const nodeIdsInFilter = new Set(filteredNodes.map(node => node.id));
        filteredLinks = graphData.links.filter(link =>
            nodeIdsInFilter.has(link.source.id) && nodeIdsInFilter.has(link.target.id)
        );
    }

    // Update the simulation with new data
    simulation.nodes(filteredNodes);
    simulation.force("link").links(filteredLinks); // Update links for the force simulation

    // Restart the simulation to re-layout with the new data
    // alphaTarget(0.3) gives it enough energy to move to a new stable state
    simulation.alphaTarget(0.3).restart();

    // Update the global graphData to reflect the currently displayed data
    // This is important so drawCanvas and findSubject use the correct (filtered) data
    // We need to be careful here: `graphData` is now a *reference* to the filtered arrays.
    // For `findSubject` and `drawCanvas` to work with the *current* state,
    // we modify `graphData.nodes` and `graphData.links` directly.
    // A more robust approach for complex filtering might involve a separate `currentGraph` object.
    // For this example, we'll directly modify the node and link arrays that simulation uses.
    graphData.nodes = filteredNodes;
    graphData.links = filteredLinks;
}

// ... (rest of the code, including initialize() call) ...

Explanation:

  1. applyFilter() retrieves the value from our #groupFilter dropdown.
  2. It then creates two new arrays: filteredNodes and filteredLinks.
    • If selectedGroup is “all”, it uses the original graphData.nodes and graphData.links.
    • Otherwise, it filters graphData.nodes to include only nodes belonging to the selectedGroup.
    • For links, it’s a bit trickier: a link should only be shown if both its source and target nodes are present in the filteredNodes array. We create a Set of nodeIdsInFilter for efficient lookup.
  3. simulation.nodes(filteredNodes) and simulation.force("link").links(filteredLinks) are the key D3 calls. These update the data that the force simulation is working with.
  4. simulation.alphaTarget(0.3).restart() is absolutely vital! After changing the data, the simulation needs to be restarted with enough “energy” (alphaTarget) to find a new stable layout for the filtered nodes and links.
  5. Finally, we update our global graphData.nodes and graphData.links to point to these filteredNodes and filteredLinks. This ensures that our drawCanvas and findSubject functions (which rely on graphData.nodes and graphData.links) always operate on the currently displayed data.

Now, open index.html, and try selecting different groups from the dropdown. You should see the network diagram dynamically re-layout, showing only the nodes and links relevant to the selected group!

Step 6: Customizing Node Appearance (Advanced)

Let’s make our nodes look a bit more interesting by differentiating them. Instead of just circles, we can draw different shapes or add more complex styling. For this example, let’s add a simple border that changes on drag.

We’ll modify the drawCanvas function and the drag event handlers slightly.

script.js (Modifying drawCanvas and drag functions for custom styling):

// ... (previous code, before drawCanvas) ...

// Keep track of the currently dragged node
let draggedNode = null;

// Function to draw everything on the canvas
function drawCanvas() {
    context.clearRect(0, 0, width, height);

    // Draw links
    context.beginPath();
    graphData.links.forEach(d => {
        context.moveTo(d.source.x, d.source.y);
        context.lineTo(d.target.x, d.target.y);
    });
    context.strokeStyle = "#aaa";
    context.stroke();

    // Draw nodes
    graphData.nodes.forEach(d => {
        context.beginPath();
        context.arc(d.x, d.y, 5, 0, 2 * Math.PI);
        context.fillStyle = colorScale(d.group);
        context.fill();

        // Custom styling: Thicker border for dragged node
        if (d === draggedNode) {
            context.strokeStyle = "#007bff"; // Blue border for dragged node
            context.lineWidth = 3;
        } else {
            context.strokeStyle = "#fff";
            context.lineWidth = 1;
        }
        context.stroke();

        context.fillStyle = "#333";
        context.font = "10px sans-serif";
        context.textAlign = "center";
        context.textBaseline = "middle";
        context.fillText(d.id, d.x, d.y + 12);
    });
}

// ... (simulation.on("tick", drawCanvas); and drag definition) ...

function dragstarted(event) {
    if (!event.active) simulation.alphaTarget(0.3).restart();
    event.subject.fx = event.subject.x;
    event.subject.fy = event.subject.y;
    draggedNode = event.subject; // Set the draggedNode
    drawCanvas(); // Immediately redraw to show the border change
}

function dragged(event) {
    event.subject.fx = event.x;
    event.subject.fy = event.y;
    // No need to redraw here, simulation.on("tick") handles it
}

function dragended(event) {
    if (!event.active) simulation.alphaTarget(0);
    event.subject.fx = null;
    event.subject.fy = null;
    draggedNode = null; // Clear the draggedNode
    drawCanvas(); // Immediately redraw to remove the border change
}

// ... (rest of the code, including initialize() call) ...

Explanation:

  1. We introduce a new global variable draggedNode to keep track of which node, if any, is currently being dragged.
  2. In drawCanvas, inside the node drawing loop, we add an if (d === draggedNode) check. If the current node d is the one being dragged, we set its strokeStyle to blue and lineWidth to 3, making it stand out. Otherwise, it gets the default white border.
  3. In dragstarted, we set draggedNode = event.subject to mark the node that just began dragging. We also call drawCanvas() immediately so the border changes before the first tick of the simulation, making the visual feedback instant.
  4. In dragended, we set draggedNode = null to clear the flag, and again call drawCanvas() immediately to revert the border to its default state.

Now, when you drag a node, it will have a prominent blue border, giving the user clear feedback about which node they are interacting with! This demonstrates how to use Canvas’s direct drawing capabilities for custom visual effects.

Mini-Challenge: Add a Reset Button

You’ve built a robust filterable network diagram! Now, let’s add a small but useful feature: a “Reset” button that clears the filter and brings back the entire network.

Challenge:

  1. Add a “Reset Filter” button to your index.html file, next to the dropdown.
  2. In script.js, add an event listener to this new button.
  3. When the button is clicked, programmatically set the #groupFilter dropdown back to “All Groups” and then trigger the applyFilter function.

Hint:

  • You can use d3.select("#groupFilter").property("value", "all"); to set the dropdown’s value.
  • Remember to call applyFilter() after setting the value to make the change take effect.

What to Observe/Learn:

  • How to interact with form elements (buttons and dropdowns) using D3.
  • How to programmatically trigger a filter reset.
  • The importance of having an “unfiltered” state for your data.
<!-- In index.html, inside the .controls div -->
<button id="resetFilter">Reset Filter</button>

// In script.js, inside the initialize() function, after attaching the change listener
d3.select("#resetFilter").on("click", resetFilter);

// Add this new function to script.js
function resetFilter() {
    d3.select("#groupFilter").property("value", "all"); // Set dropdown to "All Groups"
    applyFilter(); // Apply the filter (which will now show all groups)
}

Give it a try! This small addition significantly improves the user experience by providing an easy way to revert to the full dataset.

Common Pitfalls & Troubleshooting

Even with careful steps, you might run into some bumps. Here are a few common issues and how to approach them:

  1. “My graph isn’t moving after filtering!”

    • Cause: You likely updated the simulation.nodes() and simulation.force("link").links() but forgot to restart the simulation.
    • Solution: Make sure you call simulation.alphaTarget(0.3).restart() after updating the data in applyFilter(). The alphaTarget ensures the simulation has enough “energy” to find a new layout.

  2. “Dragging nodes doesn’t work or drags the wrong node.”

    • Cause: Your findSubject function might be incorrect, or the radius check is too small/large.
    • Solution:
      • Double-check the findSubject logic, especially the distance calculation (dx * dx + dy * dy < radius * radius).
      • Ensure graphData.nodes (or whatever array findSubject iterates over) actually contains the currently displayed nodes. If graphData is not updated after filtering, findSubject will check nodes that are not even drawn.
      • Use console.log(event.x, event.y, node.x, node.y) inside findSubject to debug the coordinates.

  3. “Performance is bad with many nodes, even on Canvas.”

    • Cause: While Canvas is generally faster, drawing complex shapes, many text labels, or performing expensive calculations on every tick can still slow it down.
    • Solution:
      • Simplify Drawing: Reduce lineWidth, avoid complex gradients, or only draw labels on hover/click.
      • Optimize drawCanvas: Ensure no unnecessary calculations happen inside the drawing loop.
      • Throttling/Debouncing: For very large graphs, consider throttling the tick event or debouncing user interactions if they trigger expensive re-layouts.
      • Pre-rendering: For static parts of the canvas (e.g., a background grid), you could draw them once on a separate, hidden canvas and then copy that image to the main canvas.

  4. “My dropdown is empty or doesn’t update the graph.”

    • Cause: The populateFilterDropdown() function might not be called, or the event listener for the dropdown is not correctly attached.
    • Solution:
      • Verify populateFilterDropdown() is called in initialize().
      • Check d3.select("#groupFilter").on("change", applyFilter); for typos.
      • Ensure graphData.nodes has the group property as expected.

Summary

Fantastic work! You’ve successfully built a sophisticated interactive network diagram using D3.js and HTML5 Canvas, demonstrating a powerful blend of data visualization and web technologies.

Here are the key takeaways from this chapter:

  • Canvas for Performance: You leveraged Canvas for high-performance rendering of dynamic visualizations, especially beneficial for larger datasets where SVG might struggle.
  • D3 Force Simulation Integration: You integrated D3’s d3-force module to automatically layout nodes and links in an aesthetically pleasing manner.
  • Custom Dragging on Canvas: You implemented custom drag behavior for Canvas elements by using d3.drag().subject() and hit-testing logic, overcoming Canvas’s lack of direct DOM elements.
  • Dynamic Filtering: You learned how to filter data, update the D3 force simulation with new node and link sets, and restart the simulation to achieve dynamic, interactive filtering.
  • Incremental Drawing: You reinforced the Canvas drawing pattern: clearRect, beginPath, moveTo/lineTo/arc, stroke/fill, all performed on every simulation “tick”.
  • Custom Visual Feedback: You added custom styling to provide visual feedback for user interactions, like highlighting a dragged node.

This project serves as a strong foundation for building even more complex and highly interactive Canvas-based visualizations. You’re now equipped to tackle larger datasets and custom rendering needs with confidence.

What’s Next?

In the next chapter, we’ll explore even more advanced Canvas techniques, such as rendering hundreds of thousands of data points, optimizing drawing for extreme performance, and perhaps even delving into WebGL for truly massive visualizations! Stay curious, and keep building!