Module 3: Build Sprint 2

Understanding Your Second Ticket

Learn how to approach your second ticket in the Labs project and understand the development workflow.

Second Ticket Details

View your second ticket details and requirements on GitHub:

Second Ticket Documentation

Step-by-Step Workflow

  1. Familiarize Yourself with the Repository
    1. Read the documentation thoroughly to understand the repository. This may include API contracts, READMEs, or docs on Google/Notion.
    2. Check the README of the ticket you have been assigned to know what is expected of you.
  2. Understanding the Deliverable
    1. Check the deployed version of the product to see the expected output and match it with what you have to build.
    2. Read the example of the expected output provided in the README.
  3. Code Unit Test (if applicable)
    1. If a relevant test exists, follow the test-driven development approach to guide your development.
    2. Validate your code using the unit test to ensure you've produced the expected outcome.
  4. Code the Component/Feature
    1. Code your deliverable, the feature described in the ticket.
  5. Record a Loom Video
    1. Demonstrate the feature in the video.
    2. Provide a detailed explanation of your thought process while coding.

Approaching Your Second Feature

Learn how to create dynamic visualizations using Altair and integrate them with your monster database.

Implementation Checklist

  • Create a Jupyter notebook for visualization exploration
  • Experiment with different chart types using monster data
  • Implement the chart function with proper typing
  • Configure chart properties for dark theme
  • Add interactive tooltips and encodings
  • Integrate the visualization with the API
  • Test the chart rendering in the web app
  • Ensure proper JSON serialization
# Example Visualization Implementation

from altair import Chart, Tooltip
from pandas import DataFrame


def chart(df: DataFrame, x: str, y: str, target: str) -> Chart:
    """Create an interactive scatter plot visualization.
    
    Args:
        df: DataFrame containing monster data
        x: Column name for x-axis
        y: Column name for y-axis
        target: Column name for color encoding
        
    Returns:
        Altair Chart object
    """
    # Configure chart properties for dark theme
    properties = {
        "width": 600,
        "height": 400,
        "background": "#2a303c",
        "padding": 20
    }
    
    # Create base chart with dark theme configuration
    graph = Chart(
        df,
        title=f"{y} by {x} for {target}",
    ).mark_circle(size=100).encode(
        x=x,
        y=y,
        color=target,
        tooltip=Tooltip(df.columns.to_list())
    ).properties(
        **properties
    ).configure(
        axis={'labelColor': '#ffffff', 'titleColor': '#ffffff'},
        title={'color': '#ffffff'},
        view={'stroke': 'transparent'},
        background='#2a303c'
    )
    
    return graph


# Example usage in FastAPI endpoint
@app.get("/view")
async def get_visualization():
    df = monster_db.dataframe()
    if df is not None:
        chart_obj = chart(df, "strength", "agility", "monster_type")
        return JSONResponse(content=chart_obj.to_dict())

Resources