liveBook · Manning

D3.js

As explained in Build Financial Software with Generative AI (From Scratch)

D3.js is a JavaScript library for binding data to documents and creating dynamic, interactive data visualizations.

D3.js is a JavaScript library for binding data to documents and creating dynamic, interactive data visualizations. It can provide a practical UI layer when a page needs to turn data into a bar chart or a simple list. section 1.5.4 section 3.4

Start with a clear result in mind, then refine it in small steps. A basic bar chart can gain axis labels, followed by hover behavior that changes a bar’s color and displays its value. Generative AI can help draft these changes, but useful prompts still depend on knowing what the page should do. section 1.5.4

A lightweight API-backed D3.js page follows this workflow:

  • Load D3.js into an HTML page and identify the API endpoint. section 3.4
  • Fetch JSON with d3.json(), then select a page element for the output. section 3.4
  • Bind returned records to list items, append them, and format each record as displayed text. section 3.4
  • Use the externally reachable localhost port for a page outside Docker, rather than an internal container name. section 3.4
  • Check generated dependency versions and correct endpoint configuration before treating generated code as ready. section 3.4

Health-status list from an API

A health-check page loads D3.js v7, calls http://localhost:8000/health/status, and binds the returned data to li elements. Each item displays an id and status. If a page served from localhost:3000 is blocked by CORS, configure the API to allow that origin and the required GET request. section 3.4

Listing 3.7 Updated sample page
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Health Check</title> #1
    <script src="https://d3js.org/d3.v7.min.js"></script>  #2
</head>

<body>
    <h2>Health Check</h2> #2
    <ul id="healthStatus"></ul>   #2
    <script>
        // The URL for the API endpoint
        const apiUrl = 'http://localhost:8000/health/status'; #3

        // Use D3 to fetch the data from the API
        d3.json(apiUrl).then(data => {
            // Once data is fetched, populate the list
            d3.select("#healthStatus")  #4
                .selectAll("li")  #4
                .data(data)  #4
                .enter()  #4
                .append("li")  #4
                .text(d => `${d.id} (${d.status})`);  #4
        }); #4
    </script>
</body>
</html>

This updated page shows the full path from loading D3.js through fetching an external API endpoint and rendering its records as list items. section 3.4

How Build Financial Software with Generative AI (From Scratch) covers it

How deep it goes
Walks through chart refinements and API-list rendering, but defers broader visualization design and advanced D3.js internals.
Examples
Uses a five-value bar chart, axis labels, hover highlighting, and a health-status API list.
What it assumes
Assumes only a desired UI result; accommodates readers unfamiliar with HTML or D3.js.
What you can do after
Apply it via D3.js to fetch JSON and render returned records in an HTML page.
How it connects
Connects D3.js with HTML5, generative AI, REST APIs, Docker, and CORS.
Cover of Build Financial Software with Generative AI (From Scratch)
liveBookmanning.com
Read Build Financial Software with Generative AI (From Scratch) on liveBook Get the book at manning.com

Also explained in

Compare how 3 books explain D3.js →

Related concepts

This explainer was generated by Manning's knowledge graph from the text of Build Financial Software with Generative AI (From Scratch). The section links point to the parts of the book it draws on.