Bandersnatch-Ticket2-Guide.md

Sprint 2: Dynamic Visualizations Guide

Overview

This guide covers the second ticket of the BandersnatchStarter project, focused on creating interactive visualizations using the Altair library, as outlined in BandersnatchStarter/tickets/secondTicket.md. The objective of Sprint 2 is to query the monster data stored in MongoDB (from Sprint 1) and create dynamic visualizations (e.g., bar charts, scatter plots) to display in a Flask-based web application. This guide is tailored for a junior JavaScript/TypeScript developer familiar with web development and visualization libraries like Chart.js or D3.js but new to Python and Altair. By relating Python and Altair to JavaScript concepts, this guide will help you build visualizations while learning new tools.

Ticket Objectives

The second ticket focuses on:

1. Querying Monster Data: Retrieve monster data from MongoDB to use for visualizations.
2. Creating Visualizations with Altair: Generate interactive charts (e.g., bar charts, scatter plots) to display monster attributes like strength, speed, or type.
3. Integrating Visualizations into Flask: Embed the visualizations in the Flask web app using Jinja2 templates.
4. Ensuring Interactivity: Make the visualizations dynamic, allowing users to interact (e.g., hover, click) to explore the data.

This is similar to fetching data in a JavaScript app (e.g., via fetch or axios) and rendering charts with Chart.js or D3.js in a React or Express.js application.

Prerequisites

Before starting, ensure you’ve completed Sprint 1 and have:

• A working MongoDB database with monster data (e.g., documents with fields like name, strength, type, speed).
• The BandersnatchStarter repository set up:
  • Cloned: git clone https://github.com/your-username/BandersnatchStarter.git.
  • Virtual environment activated:
    • Windows: venv\Scripts\activate.
    • macOS/Linux: source venv/bin/activate.
  • Dependencies installed: python -m pip install -r requirements.txt.
• A running Flask app: python -m app.main (Windows) or python3 -m app.main (macOS/Linux).
• Familiarity with Sprint 1 concepts (MongoDB connection, Flask routes, Jinja2 templates).

You’ll also need Altair installed (included in requirements.txt) and a basic understanding of Python dictionaries and lists, which are similar to JavaScript objects and arrays.

Step-by-Step Guide

Below are the steps to complete Sprint 2, with explanations and JavaScript analogies to help you understand the process.

Step 1: Understand Altair and Its Role

Goal: Learn how Altair works and how it compares to JavaScript visualization libraries.

What to Do: 1.