Module 03
← Previous Next Module →
← Back to Curriculum
Duration: 1.5 Hours • Difficulty: Intermediate

Interactive Intelligence

Building "Mission Control" screens with web-based data visualization.

The Narrative

The static dashboards from the previous module are helping Nova Capital partners make decisions. But Sarah has a new request: "I want to put a live monitor in the lobby. I want it to look like SpaceX's mission control. I don't want to log into PowerBI—I want a single webpage that anyone in the office can see."

This is where we jump from being "Data Analysts" to "Intelligence Engineers." We are going to build a lightweight web-app that pulls orbital data and visualizes it using open standards.

Geographic Inquiry: Live Tracking

Why do we use web-apps for tracking? Because space isn't static. A satellite over Saudi Arabia now will be over the Atlantic in 45 minutes. Web viz (using JavaScript) allows us to animate these paths in real-time, which static BI tools struggle with.

Step 1: Choose Your Data Source

Before we build, we need to know where the data is coming from.

Hardcoded Intelligence (Local JSON)

For high-speed dashboards without external dependencies, we keep our data local inside the code. We convert our CSV data into a structured JSON (JavaScript Object Notation) array. This is how web browsers read data natively.

  1. Create a new file on your computer and name it index.html.
  2. Open the file in VS Code.
  3. Inside a <script> tag, type out a small sample of your data like this:
const launches = [
  { "vehicle": "Falcon 9", "status": "Active", "cost_kg": 2900 },
  { "vehicle": "Electron", "status": "Active", "cost_kg": 25000 }
];

Google Sheets as a Live Database

Did you know Google Sheets can act as a free web backend? This is the ultimate "low-code" superpower.

  1. Open your Google Sheet from Module 1.
  2. In the top menu, click File > Share > Publish to Web.
  3. Change the dropdown from "Web page" to "Comma-separated values (.csv)".
  4. Click the green Publish button and copy the long link it gives you.
  5. Now, whenever you update a cell in the Sheet, your Lobby Monitor will update automatically when refreshed! We use JavaScript to "fetch" this link:
// The ultimate low-code bridge
fetch('PASTE_YOUR_GOOGLE_SHEETS_CSV_LINK_HERE')
  .then(res => res.text())
  .then(data => console.log(data)); // This prints the data to your browser console!

Step 2: The Logic Engine (Chart.js)

We use the free library Chart.js to turn arrays of numbers into pixels of insight. We aren't just plotting points; we are plotting Market Efficiency.

  1. Add the Chart.js script to your index.html file inside the <head> tag:
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  2. Create a Canvas element in your HTML body where the chart will be drawn:
    <canvas id="myChart" width="400" height="200"></canvas>

Code Snippet: Dynamic Tooltips

In web-apps, tooltips can be complex. We want Sarah to hover over a dot and see the Provider's Website link. This requires custom JavaScript logic inside the chart configuration (the options: { plugins: { tooltip: {} } } block in Chart.js).

Step 3: The Mission Control Aesthetic

Style is part of the story. Use Glassmorphism to make the dashboard look like it belongs in 2026. High contrast, neon accents, and subtle animations.

Artifact to Deliver

  1. The Lobby Monitor: A full-screen HTML dashboard featuring a real-time (simulated) launch cadence counter.
  2. Dynamic Toggle: A button that switches the view between "Cost Analysis" and "Payload Weight Analysis" without reloading the page.
  3. The "Active" Pulse: Use CSS keyframes to add a pulsing light next to entries where the status is "Active".

Summary of Big Ideas