Lab 11 — Data Visualization for the Smart Wastebin

Deadlines:

For this lab there is no submission required. However you are expected to use this knowledge on your project.

Intro to what you need to do

Your system produces data. Your API serves it. Your virtual sensors enrich it. Your Home Assistant dashboard shows it. But “shows it” is not the same as “communicates it effectively.”

In Lab 07 you created a basic Home Assistant dashboard (entity cards, a counter, maybe a history graph). It works, but it was built to prove the integration, not to help someone make decisions. A facilities manager looking at it would see a list of entities with raw values and no visual hierarchy. Everything looks equally important. Nothing says “this needs your attention.”

In this lab you will redesign your dashboard with the principles from the lecture in mind. You will also build a set of analytical visualizations using Python and Seaborn, because some questions (“what are the busiest hours this week?” “is usage trending up or down?”) are better answered by static charts than real-time dashboards.

Create the following structure:

/
├── README.md
├── labs/
│   ├── lab01/
│   ├── ...
│   └── lab11/
│       ├── README.md
│       ├── requirements.txt
│       ├── analyze.py
│       ├── charts/
│       │   └── (generated chart images go here)

Part 1 — Audit your current dashboard

Before redesigning, look critically at what you have. Open your Home Assistant dashboard from Lab 07 and take a look.

Note: You can check how to edit a home-assistant dashboard by revisiting lab07 part 7.

Now answer these questions honestly:

Can a first-time viewer tell which bin needs attention within 3 seconds?
Is there a visual hierarchy, does the most important information stand out?
Are the cards organized by relevance, or just in the order you added them?
If a sensor goes offline, is that visible immediately or hidden?
Would this dashboard be usable on a phone? In sunlight?
Apply RUSTIC: is it Readable? Understandable? Supportive? Truthful? Insightful? Communicative?

Think about all of this. The Lab 07 dashboard was built to test the integration but this lab is about making it useful.

Part 2 — Redesign the Home Assistant dashboard

Now rebuild your dashboard with intention. You are designing for a specific user: a facilities manager who checks the dashboard at the start of their shift to decide which bins to service.

Design principles to follow

Information hierarchy: the most critical information goes at the top and is visually prominent. Bins that need attention should scream. Bins that are fine should be quiet.

Overview first the top of the dashboard should show the overall system status at a glance, how many bins are active, how many need attention, are any sensors offline?

Visibility of system status Every sensor and every bin should have a clear, unambiguous status. “Clear” and “offline” must look different. Use colors consistently — green for OK, orange for warning, red for urgent.

Recognition over recall Show bin names and locations, not just IDs. The manager should never have to remember that bin-01 is the one near the cafeteria.

Build it

You are free to design it as you see fit but here are some nice things to implement.

System overview section (top of dashboard):

Create a section at the top that answers “how is the system doing?” at a glance. You can use:

A Markdown card with a summary: “3 bins active, 0 alerts, all sensors online”
Badge cards showing key counts (total events today, bins needing attention)
Conditional cards that only appear when something is wrong (e.g., a red alert card that shows only when a sensor is offline or usage is “high”)

Bin status section:

For each bin, create a group of cards that shows:

Current status with appropriate color coding
Usage level from your virtual sensor (idle/low/medium/high) with a gauge or badge
The motion counter from Lab 07
Last motion time
A history graph showing the motion sensor state over the past few hours

Use a Horizontal Stack or Grid card to arrange related information together rather than having cards scattered randomly.

Sensor health section:

Add visibility for sensor status:

A binary sensor showing online/offline for each sensor
If your producer publishes a status retained message, create a card that shows it
Consider a Conditional card that only appears when a sensor is unavailable, so the dashboard is clean when everything works, but alerts you when something fails

Styling and layout:

Use sections or vertical stacks to group related cards under headers
Choose a consistent color scheme (Home Assistant themes or custom card colors)
Make sure the dashboard works on a narrow screen (simulate a phone by resizing your browser window)
Remove any default cards that show raw data without context (e.g., entity cards that just say motion: clear with no label or color)

Apply RUSTIC

As you build, check each card against RUSTIC:

Readable: can you read the text at arm’s length?
Understandable: does the card make sense without explanation?
Supportive: does it help the manager decide what to do?
Truthful: do the colors and gauges accurately represent the data?
Insightful: does it reveal something that raw data would not?
Communicative: could someone else understand this dashboard without you explaining it?

Part 3 — Generate analytical charts with Seaborn

The Home Assistant dashboard shows what is happening now. But some questions need historical analysis:

What are the busiest hours of the day?
Is activity increasing or decreasing over time?
What does the distribution of pipeline latency look like?
Are there differences between weekdays and weekends?
How do motion event counts correlate with time of day?

These are questions for a static analytical visualization, not a live dashboard. You will write a Python script that reads your JSONL event log and generates charts using Seaborn.

Set up

Add to your ‘requirements’

seaborn
matplotlib
pandas

Install:

pip install seaborn matplotlib pandas

Build the analysis script

Create analyze.py. This script reads your JSONL events, loads them into a pandas DataFrame, and generates a set of charts.

Start with loading the data (this is an example in pseudocode, adapt to your own data):

IMPORT json library
IMPORT pandas library as pd
IMPORT seaborn library as sns
IMPORT matplotlib pyplot as plt
IMPORT os library
IMPORT datetime from datetime library

SET seaborn chart theme to "whitegrid"

SET CHARTS_DIR to "charts"

CREATE directory CHARTS_DIR if it does not already exist


DEFINE FUNCTION load_events(filepath):

    CREATE empty list called records

    OPEN file at filepath in read mode

    FOR each line in the file:

        REMOVE leading and trailing whitespace from line

        IF line is empty:
            SKIP to next line

        TRY:
            PARSE line as JSON
            STORE parsed JSON as record
            ADD record to records

        IF JSON parsing fails:
            SKIP to next line

    CREATE DataFrame df from records

    IF df contains column "resultTime":
        CONVERT df["resultTime"] to datetime values
        STORE result in df["timestamp"]

    ELSE IF df contains column "event_time":
        CONVERT df["event_time"] to datetime values
        STORE result in df["timestamp"]

    IF df contains column "timestamp":
        EXTRACT hour from df["timestamp"]
        STORE result in df["hour"]

        EXTRACT day name from df["timestamp"]
        STORE result in df["day_of_week"]

        EXTRACT date from df["timestamp"]
        STORE result in df["date"]

        EXTRACT minute from df["timestamp"]
        STORE result in df["minute"]

    RETURN df

Now generate charts. You should create at least five visualizations. Here are examples to get you started, adapt them to your actual data and add your own:

Chart 1: Events per hour (bar chart)

When is the bin busiest during the day?

DEFINE FUNCTION plot_events_per_hour(df):

    GROUP df by "hour"
    COUNT the number of rows in each hour group
    RESET the grouped result into a table
    NAME the count column "event_count"
    STORE the result as hourly

    CREATE a figure and axes with size 10 by 5

    CREATE a bar chart using hourly data:
        SET x-axis to "hour"
        SET y-axis to "event_count"
        SET bar color to blue
        DRAW chart on ax

    SET x-axis label to "Hour of Day"

    SET y-axis label to "Number of Events"

    SET chart title to "Motion Events by Hour of Day"

    ADJUST figure layout so elements fit properly

    SAVE figure to CHARTS_DIR with filename "events_per_hour.png"
    SET image resolution to 150 dpi

    CLOSE the figure to free memory

    PRINT message confirming that "events_per_hour.png" was saved

Chart 2: Latency distribution (histogram + KDE)

How fast is the pipeline? Are there outliers?

DEFINE FUNCTION plot_latency_distribution(df):

    IF df does not contain column "pipeline_latency_ms":
        PRINT message saying latency chart is being skipped because the column was not found
        EXIT function

    CREATE a figure and axes with size 10 by 5

    CREATE a histogram using df:
        SET x-axis to "pipeline_latency_ms"
        ENABLE KDE curve
        SET chart color to green
        DRAW chart on ax

    SET x-axis label to "Pipeline Latency (ms)"

    SET y-axis label to "Frequency"

    SET chart title to "Distribution of Pipeline Latency"

    ADJUST figure layout so elements fit properly

    SAVE figure to CHARTS_DIR with filename "latency_distribution.png"
    SET image resolution to 150 dpi

    CLOSE the figure to free memory

    PRINT message confirming that "latency_distribution.png" was saved

Chart 3: Events over time (line chart)

Is activity trending up or down?

DEFINE FUNCTION plot_events_over_time(df):

    GROUP df by "date"
    COUNT the number of rows in each date group
    RESET the grouped result into a table
    NAME the count column "event_count"
    STORE the result as daily

    CREATE a figure and axes with size 10 by 5

    CREATE a line chart using daily data:
        SET x-axis to "date"
        SET y-axis to "event_count"
        ADD circular markers to each data point
        SET line color to orange-red
        DRAW chart on ax

    SET x-axis label to "Date"

    SET y-axis label to "Number of Events"

    SET chart title to "Daily Motion Events Over Time"

    ROTATE x-axis tick labels by 45 degrees

    ADJUST figure layout so elements fit properly

    SAVE figure to CHARTS_DIR with filename "events_over_time.png"
    SET image resolution to 150 dpi

    CLOSE the figure to free memory

    PRINT message confirming that "events_over_time.png" was saved

Chart 4: Heatmap, hour vs day of week

Where are the busy windows?

DEFINE FUNCTION plot_heatmap(df):

    CREATE list day_order containing:
        "Monday"
        "Tuesday"
        "Wednesday"
        "Thursday"
        "Friday"
        "Saturday"
        "Sunday"

    GROUP df by "day_of_week" and "hour"
    COUNT the number of rows in each day-and-hour group
    RESET the grouped result into a table
    NAME the count column "count"
    STORE the result as pivot

    CREATE a pivot table from pivot:
        SET row index to "day_of_week"
        SET columns to "hour"
        SET values to "count"

    REPLACE missing values in the pivot table with 0

    REORDER the pivot table rows using day_order

    CREATE a figure and axes with size 12 by 5

    CREATE a heatmap using the pivot table:
        SET color map to "YlOrRd"
        DISPLAY count values inside each cell
        FORMAT annotations as whole numbers
        SET grid line width to 0.5
        DRAW heatmap on ax

    SET x-axis label to "Hour of Day"

    SET y-axis label to an empty string

    SET chart title to "Motion Events: Hour × Day of Week"

    ADJUST figure layout so elements fit properly

    SAVE figure to CHARTS_DIR with filename "heatmap_hour_day.png"
    SET image resolution to 150 dpi

    CLOSE the figure to free memory

    PRINT message confirming that "heatmap_hour_day.png" was saved

Chart 5: Latency over time (scatter plot)

Is the pipeline getting slower?

DEFINE FUNCTION plot_latency_over_time(df):

    IF df does not contain column "pipeline_latency_ms"
    OR df does not contain column "timestamp":
        PRINT message saying latency-over-time chart is being skipped because required columns were not found
        EXIT function

    CREATE a figure and axes with size 10 by 5

    CREATE a scatter plot using df:
        SET x-axis to "timestamp"
        SET y-axis to "pipeline_latency_ms"
        SET point transparency to 0.5
        SET point size to 15
        SET point color to purple
        DRAW chart on ax

    SET x-axis label to "Time"

    SET y-axis label to "Pipeline Latency (ms)"

    SET chart title to "Pipeline Latency Over Time"

    ROTATE x-axis tick labels by 45 degrees

    ADJUST figure layout so elements fit properly

    SAVE figure to CHARTS_DIR with filename "latency_over_time.png"
    SET image resolution to 150 dpi

    CLOSE the figure to free memory

    PRINT message confirming that "latency_over_time.png" was saved

Wire it together

IF this file is being run directly:

    IMPORT sys library

    IF the number of command-line arguments is greater than 1:
        SET filepath to the first command-line argument
    ELSE:
        SET filepath to "data/motion_events.jsonl"

    PRINT message showing which filepath will be loaded

    CALL load_events(filepath)
    STORE the returned DataFrame as df

    PRINT message showing how many events were loaded

    IF df is empty:
        PRINT message saying there is no data and the pipeline should be run first
        EXIT program with status code 1

    CALL plot_events_per_hour(df)

    CALL plot_latency_distribution(df)

    CALL plot_events_over_time(df)

    CALL plot_heatmap(df)

    CALL plot_latency_over_time(df)

    PRINT message showing that all charts were saved to CHARTS_DIR

Run it:

python analyze.py data/motion_events.jsonl

The charts/ directory should now contain five PNG files. Open them and look at what the data tells you.

Add your own charts

The five charts above are a starting point. Think about what other questions your data can answer and add at least two more charts of your own. Some ideas:

Box plot: latency distribution per hour — is the pipeline slower at busy times?
Count plot: events by motion state (detected vs clear) — are they balanced?
Violin plot: event inter-arrival times — how regular is the motion pattern?
Pair plot or joint plot: explore relationships between multiple numerical fields
Cumulative line chart: total events over time — shows the growth rate

For each chart, think about:

What question does this answer?
What chart type is appropriate for this data and question?
Would the lecture’s RUSTIC criteria approve of this visualization?

Apply what you learned

After generating the charts, go back and apply the visualization principles:

Are your axis labels clear and descriptive (not just column names)?
Do the titles explain what the chart shows?
Are the colors meaningful and accessible?
Is there unnecessary clutter (gridlines, legends, borders) that could be removed?
Would Tufte approve of your data-ink ratio?

Clean up your charts based on these checks. Good visualization is an iterative process as the first version is rarely the best.

Part 4 — Compare the two approaches

You now have two kinds of visualization for the same system:

Home Assistant — live status dashboard, updates in real time, designed for quick operational decisions
Seaborn charts — static analytical charts, generated from historical data, designed for understanding patterns and trends

Try to compare them. When would you use each? Could you combine them? (For example: a Home Assistant dashboard for daily operations, and a weekly Seaborn report emailed to management.) How do they serve different users and different questions?

Why this lab is structured this way

The lecture made a clear distinction between status dashboards and analytical dashboards. They serve different audiences, different questions, and different time horizons. Building both in one lab makes that distinction concrete.

The Home Assistant redesign is about applying HCI and visualization principles to a tool you have been using all semester. Going back to something you built earlier and improving it with new knowledge is a valuable exercise. It is also how real design works. Nobody gets the dashboard right on the first try.

The Seaborn charts are about the analytical side, the kind of visualization you would put in a report, a presentation, or a weekly email to management. They require a different mindset: instead of “what is happening now,” you ask “what has been happening, and what does the pattern tell us?” This is where the DIKW pyramid reaches the top, data becomes wisdom when you can see the trend and act on it.

Report questions

You should be able to answer the following questions (if asked during your project ptresentation).

Dashboard audit and redesign

RQ1: Include a screenshot of your Lab 07 dashboard and your redesigned dashboard side by side. What are the three biggest improvements?
RQ2: How did you implement information hierarchy? What is at the top of your dashboard and why?
RQ3: How does your dashboard handle a sensor going offline? Show what the user sees. RQ4: Does your dashboard show overview first, zoom and filter, details on demand? Describe each level.
RQ5: Test your dashboard on a narrow screen (resize the browser to phone width). Does it still work? What breaks?

Seaborn charts

RQ6: For all your charts. For each chart, state: (a) what question it answers, (b) why you chose that chart type, (c) one insight the chart reveals.
RQ7: Which two additional charts did you create beyond the five provided? Why did you choose those visualizations?
RQ8: Look at your heatmap (hour × day of week). What patterns do you see? Do they match what you expected?
RQ9: Look at your latency distribution. Is it symmetric or skewed? Are there outliers? What could cause them?
RQ10: Apply RUSTIC to one of your Seaborn charts. Rate it on each criterion and identify one thing you would improve.

Comparison

RQ11: Compare your Home Assistant dashboard and your Seaborn charts. Give one question that each answers better than the other.
RQ12: A facilities manager and a data analyst both need information from your system. Which visualization tool would you give each, and why?
RQ13: Could you embed your Seaborn charts into Home Assistant? How? Would it make sense to do so?

Design reflection

RQ14: Which RUSTIC criterion was hardest to achieve in your Home Assistant dashboard? Why?
RQ15: You showed your redesigned dashboard to a classmate who has never seen the system. Could they understand it without explanation? What did they find confusing (if anything)?
RQ16: In your own words, what is the difference between a dashboard that shows data and a dashboard that supports decisions?

Project hint: Smart Wastebin

Your final project presentation will include a live demo. What the audience sees first is your dashboard, and first impressions matter. A well-designed Home Assistant dashboard that immediately communicates system status will make a stronger impression than a wall of raw entity cards.

Think about preparing a set of Seaborn charts for your presentation too. A heatmap showing usage patterns across the week, a trend line showing fill-level predictions vs actuals (even if you do not have this information/data feel free to emulate it), a latency distribution showing your pipeline is fast, these tell the story of a system that works and a team that understands their data.

The combination of a live operational dashboard and a set of polished analytical charts is what a real IoT deployment would present to stakeholders. You are practicing that now.

What should be finished with this lab

Before the end of the session you should have: audited your Lab 07 dashboard, redesigned the Home Assistant dashboard with information hierarchy, color coding, conditional cards, and system overview, applied RUSTIC principles and intelligent design, written analyze.py that loads JSONL data and generates at least seven Seaborn charts, reviewed and cleaned up the charts for readability and accuracy.

We hope you enjoyed the labs. Have a great summer!

What follows is a greek version of the same lab

Lab 11 — Οπτικοποίηση Δεδομένων για το Smart Wastebin

Προθεσμίες:

Για αυτό το εργαστήριο δεν απαιτείται υποβολή. Ωστόσο, αναμένεται να χρησιμοποιήσετε αυτές τις γνώσεις στο project σας.

Εισαγωγή στο τι πρέπει να κάνετε

Το σύστημά σας παράγει δεδομένα. Το API σας τα σερβίρει. Οι virtual sensors σας τα εμπλουτίζουν. Το Home Assistant dashboard σας τα εμφανίζει. Αλλά “τα εμφανίζει” δεν είναι το ίδιο με “τα επικοινωνεί αποτελεσματικά.”

Στο Lab 07 δημιουργήσατε ένα βασικό Home Assistant dashboard (entity cards, counter, ίσως history graph). Λειτουργεί, αλλά φτιάχτηκε για να αποδείξει την integration, όχι για να βοηθήσει κάποιον να πάρει αποφάσεις. Ένας υπεύθυνος εγκαταστάσεων που το βλέπει θα έβλεπε μια λίστα entities με raw τιμές και καμία οπτική ιεραρχία. Όλα φαίνονται εξίσου σημαντικά. Τίποτα δεν λέει “αυτό χρειάζεται την προσοχή σας.”

Σε αυτό το εργαστήριο θα ανασχεδιάσετε το dashboard σας με τις αρχές από τη διάλεξη. Θα φτιάξετε επίσης ένα σύνολο αναλυτικών visualizations χρησιμοποιώντας Python και Seaborn, γιατί μερικές ερωτήσεις (“ποιες είναι οι πιο πολυσύχναστες ώρες αυτή την εβδομάδα;” “ανεβαίνει ή κατεβαίνει η χρήση;”) απαντώνται καλύτερα με στατικά charts παρά με real-time dashboards.

Δημιουργήστε την παρακάτω δομή:

/
├── README.md
├── labs/
│   ├── lab01/
│   ├── ...
│   └── lab11/
│       ├── README.md
│       ├── requirements.txt
│       ├── analyze.py
│       ├── charts/
│       │   └── (τα παραγόμενα chart αρχεία πηγαίνουν εδώ)

Μέρος 1 — Αξιολόγηση του τρέχοντος dashboard

Πριν ανασχεδιάσετε, κοιτάξτε κριτικά αυτό που έχετε. Ανοίξτε το Home Assistant dashboard από το Lab 07 και ρίξτε μια ματιά.

Σημείωση: Μπορείτε να δείτε πώς να επεξεργαστείτε ένα Home Assistant dashboard επισκεπτόμενοι το Lab 07, Μέρος 7.

Τώρα απαντήστε τις παρακάτω ερωτήσεις ειλικρινά:

Μπορεί ένας πρωτοεμφανιζόμενος να καταλάβει ποιος κάδος χρειάζεται προσοχή μέσα σε 3 δευτερόλεπτα;
Υπάρχει οπτική ιεραρχία — ξεχωρίζει η πιο σημαντική πληροφορία;
Είναι οι cards οργανωμένες ανά συνάφεια ή απλώς στη σειρά που τις προσθέσατε;
Αν ένας sensor πάει offline, είναι αυτό ορατό αμέσως ή κρυμμένο;
Θα ήταν χρήσιμο αυτό το dashboard σε κινητό; Στον ήλιο;
Εφαρμόστε RUSTIC: είναι Readable (Αναγνώσιμο); Understandable (Κατανοητό); Supportive (Υποστηρικτικό); Truthful (Αληθινό); Insightful (Διορατικό); Communicative (Επικοινωνιακό);

Σκεφτείτε όλα αυτά. Το Lab 07 dashboard φτιάχτηκε για να δοκιμάσει την integration, αλλά αυτό το εργαστήριο αφορά το να το κάνετε χρήσιμο.

Μέρος 2 — Ανασχεδιασμός του Home Assistant dashboard

Τώρα φτιάξτε ξανά το dashboard με πρόθεση. Σχεδιάζετε για συγκεκριμένο χρήστη: έναν υπεύθυνο εγκαταστάσεων που ελέγχει το dashboard στην αρχή της βάρδιάς του για να αποφασίσει ποιους κάδους να εξυπηρετήσει.

Αρχές σχεδιασμού που πρέπει να ακολουθήσετε

Ιεραρχία πληροφοριών: οι πιο κρίσιμες πληροφορίες πηγαίνουν στην κορυφή και είναι οπτικά εμφανείς. Οι κάδοι που χρειάζονται προσοχή πρέπει να “φωνάζουν”. Οι κάδοι που είναι εντάξει πρέπει να είναι διακριτικοί.

Overview πρώτα: η κορυφή του dashboard πρέπει να εμφανίζει τη συνολική κατάσταση συστήματος με μια ματιά — πόσοι κάδοι είναι ενεργοί, πόσοι χρειάζονται προσοχή, είναι κάποιοι sensors offline;

Ορατότητα κατάστασης συστήματος: κάθε sensor και κάθε κάδος πρέπει να έχει σαφή, αδιαμφισβήτητη κατάσταση. Το “Clear” και το “offline” πρέπει να φαίνονται διαφορετικά. Χρησιμοποιήστε χρώματα με συνέπεια — πράσινο για OK, πορτοκαλί για προειδοποίηση, κόκκινο για επείγον.

Αναγνώριση αντί για ανάκληση: εμφανίστε ονόματα και τοποθεσίες κάδων, όχι μόνο IDs. Ο υπεύθυνος δεν πρέπει ποτέ να χρειάζεται να θυμάται ότι ο bin-01 είναι αυτός κοντά στην καφετέρια.

Φτιάξτε το

Είστε ελεύθεροι να σχεδιάσετε όπως κρίνετε, αλλά ορίστε μερικά καλά πράγματα να υλοποιήσετε:

Ενότητα system overview (κορυφή dashboard):

Δημιουργήστε ενότητα στην κορυφή που απαντά “πώς πάει το σύστημα;” με μια ματιά. Μπορείτε να χρησιμοποιήσετε:

Markdown card με σύνοψη: “3 bins active, 0 alerts, all sensors online”
Badge cards που εμφανίζουν βασικούς αριθμούς (συνολικά events σήμερα, κάδοι που χρειάζονται προσοχή)
Conditional cards που εμφανίζονται μόνο όταν κάτι πάει στραβά (π.χ. κόκκινη alert card που εμφανίζεται μόνο όταν ένας sensor είναι offline ή η χρήση είναι “high”)

Ενότητα κατάστασης κάδου:

Για κάθε κάδο, δημιουργήστε ομάδα cards που εμφανίζει:

Τρέχουσα κατάσταση με κατάλληλο color coding
Επίπεδο χρήσης από τον virtual sensor σας (idle/low/medium/high) με gauge ή badge
Τον motion counter από το Lab 07
Τελευταία ώρα κίνησης
History graph που εμφανίζει την κατάσταση motion sensor τις τελευταίες ώρες

Χρησιμοποιήστε Horizontal Stack ή Grid card για να τακτοποιήσετε σχετικές πληροφορίες μαζί αντί να έχετε cards σκορπισμένες τυχαία.

Ενότητα υγείας sensor:

Προσθέστε ορατότητα για την κατάσταση sensor:

Binary sensor που εμφανίζει online/offline για κάθε sensor
Αν ο producer σας κάνει publish retained status message, δημιουργήστε card που το εμφανίζει
Σκεφτείτε Conditional card που εμφανίζεται μόνο όταν ένας sensor είναι unavailable, ώστε το dashboard να είναι καθαρό όταν όλα λειτουργούν, αλλά να σας ειδοποιεί όταν κάτι αποτυγχάνει

Styling και layout:

Χρησιμοποιήστε sections ή vertical stacks για να ομαδοποιείτε σχετικές cards κάτω από headers
Επιλέξτε συνεπές color scheme (Home Assistant themes ή custom card colors)
Βεβαιωθείτε ότι το dashboard λειτουργεί σε στενή οθόνη (προσομοιώστε κινητό αλλάζοντας το μέγεθος του browser window)
Αφαιρέστε τυχόν default cards που εμφανίζουν raw data χωρίς context (π.χ. entity cards που λένε απλώς motion: clear χωρίς label ή χρώμα)

Εφαρμόστε RUSTIC

Καθώς χτίζετε, ελέγξτε κάθε card με βάση το RUSTIC:

Readable: μπορείτε να διαβάσετε το κείμενο από απόσταση;
Understandable: είναι η card κατανοητή χωρίς εξήγηση;
Supportive: βοηθά τον υπεύθυνο να αποφασίσει τι να κάνει;
Truthful: αντιπροσωπεύουν τα χρώματα και τα gauges με ακρίβεια τα δεδομένα;
Insightful: αποκαλύπτει κάτι που δεν θα αποκάλυπταν τα raw data;
Communicative: θα καταλάβαινε κάποιος άλλος αυτό το dashboard χωρίς να το εξηγήσετε;

Μέρος 3 — Δημιουργία αναλυτικών charts με Seaborn

Το Home Assistant dashboard εμφανίζει τι συμβαίνει τώρα. Αλλά μερικές ερωτήσεις χρειάζονται ιστορική ανάλυση:

Ποιες είναι οι πιο πολυσύχναστες ώρες της ημέρας;
Αυξάνεται ή μειώνεται η δραστηριότητα με την πάροδο του χρόνου;
Πώς μοιάζει η κατανομή pipeline latency;
Υπάρχουν διαφορές μεταξύ καθημερινών και Σαββατοκύριακου;
Πώς συσχετίζονται οι αριθμοί motion events με την ώρα της ημέρας;

Αυτές είναι ερωτήσεις για στατική αναλυτική visualization, όχι για live dashboard. Θα γράψετε Python script που διαβάζει το JSONL event log σας και δημιουργεί charts χρησιμοποιώντας Seaborn.

Ρύθμιση

Προσθέστε στο requirements.txt σας:

seaborn
matplotlib
pandas

Εγκατάσταση:

pip install seaborn matplotlib pandas

Φτιάξτε το analysis script

Δημιουργήστε το analyze.py. Αυτό το script διαβάζει τα JSONL events σας, τα φορτώνει σε pandas DataFrame, και δημιουργεί ένα σύνολο charts.

Ξεκινήστε με τη φόρτωση δεδομένων (αυτό είναι παράδειγμα σε pseudocode — προσαρμόστε στα δικά σας δεδομένα):

IMPORT json library
IMPORT pandas library as pd
IMPORT seaborn library as sns
IMPORT matplotlib pyplot as plt
IMPORT os library
IMPORT datetime from datetime library

SET seaborn chart theme to "whitegrid"

SET CHARTS_DIR to "charts"

CREATE directory CHARTS_DIR if it does not already exist


DEFINE FUNCTION load_events(filepath):

    CREATE empty list records

    OPEN file at filepath in read mode

    FOR each line in file:

        REMOVE leading and trailing whitespace from line

        IF line is empty:
            SKIP to next line

        TRY:
            PARSE line as JSON
            STORE parsed JSON as record
            ADD record to records

        IF JSON parsing fails:
            SKIP to next line

    CREATE DataFrame df from records

    IF df contains column "resultTime":
        CONVERT df["resultTime"] to datetime values
        STORE result in df["timestamp"]

    ELSE IF df contains column "event_time":
        CONVERT df["event_time"] to datetime values
        STORE result in df["timestamp"]

    IF df contains column "timestamp":
        EXTRACT hour from df["timestamp"]
        STORE result in df["hour"]

        EXTRACT day name from df["timestamp"]
        STORE result in df["day_of_week"]

        EXTRACT date from df["timestamp"]
        STORE result in df["date"]

        EXTRACT minute from df["timestamp"]
        STORE result in df["minute"]

    RETURN df

Τώρα δημιουργήστε charts. Πρέπει να φτιάξετε τουλάχιστον πέντε visualizations. Ορίστε παραδείγματα για να ξεκινήσετε — προσαρμόστε τα στα πραγματικά σας δεδομένα και προσθέστε δικά σας:

Chart 1: Events ανά ώρα (bar chart)

Πότε είναι ο κάδος πιο πολυσύχναστος κατά τη διάρκεια της ημέρας;

DEFINE FUNCTION plot_events_per_hour(df):

    GROUP df by "hour"
    COUNT number of rows in each hour group
    RESET grouped result into table
    NAME count column "event_count"
    STORE result as hourly

    CREATE figure and axes with size 10 by 5

    CREATE bar chart using hourly data:
        SET x-axis to "hour"
        SET y-axis to "event_count"
        SET bar color to blue
        DRAW chart on ax

    SET x-axis label to "Hour of Day"

    SET y-axis label to "Number of Events"

    SET chart title to "Motion Events by Hour of Day"

    ADJUST figure layout so elements fit properly

    SAVE figure to CHARTS_DIR with filename "events_per_hour.png"
    SET image resolution to 150 dpi

    CLOSE figure to free memory

    PRINT message confirming "events_per_hour.png" was saved

Chart 2: Κατανομή latency (histogram + KDE)

Πόσο γρήγορο είναι το pipeline; Υπάρχουν outliers;

DEFINE FUNCTION plot_latency_distribution(df):

    IF df does not contain column "pipeline_latency_ms":
        PRINT message saying latency chart is being skipped because column was not found
        EXIT function

    CREATE figure and axes with size 10 by 5

    CREATE histogram using df:
        SET x-axis to "pipeline_latency_ms"
        ENABLE KDE curve
        SET chart color to green
        DRAW chart on ax

    SET x-axis label to "Pipeline Latency (ms)"

    SET y-axis label to "Frequency"

    SET chart title to "Distribution of Pipeline Latency"

    ADJUST figure layout so elements fit properly

    SAVE figure to CHARTS_DIR with filename "latency_distribution.png"
    SET image resolution to 150 dpi

    CLOSE figure to free memory

    PRINT message confirming "latency_distribution.png" was saved

Chart 3: Events με την πάροδο του χρόνου (line chart)

Ανεβαίνει ή κατεβαίνει η δραστηριότητα;

DEFINE FUNCTION plot_events_over_time(df):

    GROUP df by "date"
    COUNT number of rows in each date group
    RESET grouped result into table
    NAME count column "event_count"
    STORE result as daily

    CREATE figure and axes with size 10 by 5

    CREATE line chart using daily data:
        SET x-axis to "date"
        SET y-axis to "event_count"
        ADD circular markers to each data point
        SET line color to orange-red
        DRAW chart on ax

    SET x-axis label to "Date"

    SET y-axis label to "Number of Events"

    SET chart title to "Daily Motion Events Over Time"

    ROTATE x-axis tick labels by 45 degrees

    ADJUST figure layout so elements fit properly

    SAVE figure to CHARTS_DIR with filename "events_over_time.png"
    SET image resolution to 150 dpi

    CLOSE figure to free memory

    PRINT message confirming "events_over_time.png" was saved

Chart 4: Heatmap, ώρα vs ημέρα εβδομάδας

Πού βρίσκονται τα πολυσύχναστα time windows;

DEFINE FUNCTION plot_heatmap(df):

    CREATE list day_order containing:
        "Monday"
        "Tuesday"
        "Wednesday"
        "Thursday"
        "Friday"
        "Saturday"
        "Sunday"

    GROUP df by "day_of_week" and "hour"
    COUNT number of rows in each day-and-hour group
    RESET grouped result into table
    NAME count column "count"
    STORE result as pivot

    CREATE pivot table from pivot:
        SET row index to "day_of_week"
        SET columns to "hour"
        SET values to "count"

    REPLACE missing values in pivot table with 0

    REORDER pivot table rows using day_order

    CREATE figure and axes with size 12 by 5

    CREATE heatmap using pivot table:
        SET color map to "YlOrRd"
        DISPLAY count values inside each cell
        FORMAT annotations as whole numbers
        SET grid line width to 0.5
        DRAW heatmap on ax

    SET x-axis label to "Hour of Day"

    SET y-axis label to empty string

    SET chart title to "Motion Events: Hour × Day of Week"

    ADJUST figure layout so elements fit properly

    SAVE figure to CHARTS_DIR with filename "heatmap_hour_day.png"
    SET image resolution to 150 dpi

    CLOSE figure to free memory

    PRINT message confirming "heatmap_hour_day.png" was saved

Chart 5: Latency με την πάροδο του χρόνου (scatter plot)

Γίνεται αργότερο το pipeline;

DEFINE FUNCTION plot_latency_over_time(df):

    IF df does not contain column "pipeline_latency_ms"
    OR df does not contain column "timestamp":
        PRINT message saying latency-over-time chart is being skipped because required columns were not found
        EXIT function

    CREATE figure and axes with size 10 by 5

    CREATE scatter plot using df:
        SET x-axis to "timestamp"
        SET y-axis to "pipeline_latency_ms"
        SET point transparency to 0.5
        SET point size to 15
        SET point color to purple
        DRAW chart on ax

    SET x-axis label to "Time"

    SET y-axis label to "Pipeline Latency (ms)"

    SET chart title to "Pipeline Latency Over Time"

    ROTATE x-axis tick labels by 45 degrees

    ADJUST figure layout so elements fit properly

    SAVE figure to CHARTS_DIR with filename "latency_over_time.png"
    SET image resolution to 150 dpi

    CLOSE figure to free memory

    PRINT message confirming "latency_over_time.png" was saved

Συνδέστε τα όλα μαζί

IF this file is being run directly:

    IMPORT sys library

    IF number of command-line arguments is greater than 1:
        SET filepath to first command-line argument
    ELSE:
        SET filepath to "data/motion_events.jsonl"

    PRINT message showing which filepath will be loaded

    CALL load_events(filepath)
    STORE returned DataFrame as df

    PRINT message showing how many events were loaded

    IF df is empty:
        PRINT message saying there is no data and pipeline should be run first
        EXIT program with status code 1

    CALL plot_events_per_hour(df)

    CALL plot_latency_distribution(df)

    CALL plot_events_over_time(df)

    CALL plot_heatmap(df)

    CALL plot_latency_over_time(df)

    PRINT message showing all charts were saved to CHARTS_DIR

Τρέξτε το:

python analyze.py data/motion_events.jsonl

Ο κατάλογος charts/ πρέπει τώρα να περιέχει πέντε PNG αρχεία. Ανοίξτε τα και δείτε τι σας λένε τα δεδομένα.

Προσθέστε δικά σας charts

Τα πέντε charts παραπάνω είναι σημείο εκκίνησης. Σκεφτείτε ποιες άλλες ερωτήσεις μπορούν να απαντήσουν τα δεδομένα σας και προσθέστε τουλάχιστον δύο ακόμα charts δικά σας. Μερικές ιδέες:

Box plot: κατανομή latency ανά ώρα — είναι το pipeline πιο αργό σε πολυσύχναστες ώρες;
Count plot: events ανά motion state (detected vs clear) — είναι ισορροπημένα;
Violin plot: χρόνοι μεταξύ διαδοχικών events — πόσο κανονικό είναι το motion pattern;
Pair plot ή joint plot: εξερευνήστε σχέσεις μεταξύ πολλαπλών αριθμητικών πεδίων
Cumulative line chart: συνολικά events με την πάροδο του χρόνου — εμφανίζει τον ρυθμό ανάπτυξης

Για κάθε chart, σκεφτείτε:

Ποια ερώτηση απαντά αυτό;
Ποιος τύπος chart είναι κατάλληλος για αυτά τα δεδομένα και αυτή την ερώτηση;
Θα εγκρίνει το RUSTIC criterion της διάλεξης αυτό το visualization;

Εφαρμόστε όσα μάθατε

Αφού δημιουργήσετε τα charts, επιστρέψτε και εφαρμόστε τις αρχές visualization:

Είναι τα axis labels σας σαφή και περιγραφικά (όχι απλώς ονόματα columns);
Εξηγούν οι τίτλοι τι εμφανίζει το chart;
Είναι τα χρώματα ουσιαστικά και προσβάσιμα;
Υπάρχει άσκοπη ακαταστασία (gridlines, legends, borders) που θα μπορούσε να αφαιρεθεί;
Θα ενέκρινε ο Tufte το data-ink ratio σας;

Καθαρίστε τα charts σας βάσει αυτών των ελέγχων. Το καλό visualization είναι επαναληπτική διαδικασία — η πρώτη έκδοση σπάνια είναι η καλύτερη.

Μέρος 4 — Σύγκριση των δύο προσεγγίσεων

Έχετε τώρα δύο είδη visualization για το ίδιο σύστημα:

Home Assistant — live status dashboard, ενημερώνεται σε πραγματικό χρόνο, σχεδιασμένο για γρήγορες λειτουργικές αποφάσεις
Seaborn charts — στατικά αναλυτικά charts, παραγόμενα από ιστορικά δεδομένα, σχεδιασμένα για κατανόηση patterns και τάσεων

Προσπαθήστε να τα συγκρίνετε. Πότε θα χρησιμοποιούσατε το καθένα; Θα μπορούσατε να τα συνδυάσετε; (Για παράδειγμα: Home Assistant dashboard για ημερήσιες λειτουργίες και εβδομαδιαία Seaborn αναφορά μέσω email στη διοίκηση.) Πώς εξυπηρετούν διαφορετικούς χρήστες και διαφορετικές ερωτήσεις;

Γιατί αυτό το εργαστήριο είναι δομημένο έτσι

Η διάλεξη έκανε σαφή διάκριση μεταξύ status dashboards και analytical dashboards. Εξυπηρετούν διαφορετικό κοινό, διαφορετικές ερωτήσεις, και διαφορετικούς χρονικούς ορίζοντες. Το να φτιάξετε και τα δύο σε ένα εργαστήριο κάνει αυτή τη διάκριση συγκεκριμένη.

Ο ανασχεδιασμός του Home Assistant αφορά την εφαρμογή HCI και αρχών visualization σε ένα εργαλείο που χρησιμοποιείτε όλο το εξάμηνο. Το να επιστρέφετε σε κάτι που φτιάξατε νωρίτερα και να το βελτιώνετε με νέες γνώσεις είναι πολύτιμη άσκηση. Έτσι λειτουργεί και ο πραγματικός σχεδιασμός. Κανείς δεν φτιάχνει σωστά το dashboard με την πρώτη προσπάθεια.

Τα Seaborn charts αφορούν την αναλυτική πλευρά — το είδος visualization που θα βάζατε σε αναφορά, παρουσίαση, ή εβδομαδιαίο email στη διοίκηση. Απαιτούν διαφορετική νοοτροπία: αντί για “τι συμβαίνει τώρα”, ρωτάτε “τι συνέβαινε και τι μας λέει το pattern;” Εδώ η πυραμίδα DIKW φτάνει την κορυφή — τα δεδομένα γίνονται σοφία όταν μπορείτε να δείτε την τάση και να ενεργήσετε βάσει αυτής.

Ερωτήσεις αναφοράς

Θα πρέπει να μπορείτε να απαντήσετε τις παρακάτω ερωτήσεις (αν ερωτηθείτε κατά την παρουσίαση του project σας).

Αξιολόγηση και ανασχεδιασμός dashboard

RQ1: Συμπεριλάβετε screenshot του Lab 07 dashboard σας και του ανασχεδιασμένου dashboard δίπλα δίπλα. Ποιες είναι οι τρεις μεγαλύτερες βελτιώσεις;
RQ2: Πώς υλοποιήσατε την ιεραρχία πληροφοριών; Τι βρίσκεται στην κορυφή του dashboard σας και γιατί;
RQ3: Πώς χειρίζεται το dashboard σας την περίπτωση ενός sensor που πάει offline; Δείξτε τι βλέπει ο χρήστης.
RQ4: Εμφανίζει το dashboard σας overview πρώτα, zoom και filter, λεπτομέρειες κατ’ απαίτηση; Περιγράψτε κάθε επίπεδο.
RQ5: Δοκιμάστε το dashboard σας σε στενή οθόνη (αλλάξτε το μέγεθος του browser σε πλάτος κινητού). Λειτουργεί ακόμα; Τι χαλάει;

Seaborn charts

RQ6: Για όλα τα charts σας. Για κάθε chart, αναφέρετε: (α) ποια ερώτηση απαντά, (β) γιατί επιλέξατε αυτόν τον τύπο chart, (γ) ένα insight που αποκαλύπτει το chart.
RQ7: Ποια δύο επιπλέον charts δημιουργήσατε πέρα από τα πέντε που δόθηκαν; Γιατί επιλέξατε αυτά τα visualizations;
RQ8: Κοιτάξτε το heatmap σας (ώρα × ημέρα εβδομάδας). Ποια patterns βλέπετε; Αντιστοιχούν με αυτό που περιμένατε;
RQ9: Κοιτάξτε την κατανομή latency σας. Είναι συμμετρική ή skewed; Υπάρχουν outliers; Τι θα μπορούσε να τους προκαλέσει;
RQ10: Εφαρμόστε RUSTIC σε ένα από τα Seaborn charts σας. Αξιολογήστε το σε κάθε κριτήριο και προσδιορίστε ένα πράγμα που θα βελτιώνατε.

Σύγκριση

RQ11: Συγκρίνετε το Home Assistant dashboard σας και τα Seaborn charts σας. Δώστε μία ερώτηση που κάθε ένα απαντά καλύτερα από το άλλο.
RQ12: Ένας υπεύθυνος εγκαταστάσεων και ένας data analyst χρειάζονται και οι δύο πληροφορίες από το σύστημά σας. Ποιο visualization tool θα δίνατε στον καθένα, και γιατί;
RQ13: Θα μπορούσατε να ενσωματώσετε τα Seaborn charts σας στο Home Assistant; Πώς; Θα είχε νόημα να το κάνετε;

Αναστοχασμός σχεδιασμού

RQ14: Ποιο RUSTIC criterion ήταν πιο δύσκολο να επιτευχθεί στο Home Assistant dashboard σας; Γιατί;
RQ15: Δείξατε το ανασχεδιασμένο dashboard σας σε συμφοιτητή που δεν έχει δει ποτέ το σύστημα. Μπορούσε να το καταλάβει χωρίς εξήγηση; Τι βρήκε μπερδευτικό (αν βρήκε);
RQ16: Με δικά σας λόγια, ποια είναι η διαφορά μεταξύ ενός dashboard που εμφανίζει δεδομένα και ενός dashboard που υποστηρίζει αποφάσεις;

Υπόδειξη project: Smart Wastebin

Η τελική παρουσίαση του project σας θα περιλαμβάνει live demo. Αυτό που βλέπει πρώτα το κοινό είναι το dashboard σας — και οι πρώτες εντυπώσεις έχουν σημασία. Ένα καλοσχεδιασμένο Home Assistant dashboard που επικοινωνεί αμέσως την κατάσταση συστήματος θα κάνει ισχυρότερη εντύπωση από έναν “τοίχο” raw entity cards.

Σκεφτείτε να ετοιμάσετε επίσης ένα σύνολο Seaborn charts για την παρουσίαση σας. Ένα heatmap που εμφανίζει usage patterns κατά τη διάρκεια της εβδομάδας, ένα trend line που εμφανίζει προβλέψεις fill-level έναντι πραγματικών τιμών (ακόμα και αν δεν έχετε αυτά τα δεδομένα, μπορείτε να τα προσομοιώσετε), μια κατανομή latency που δείχνει ότι το pipeline είναι γρήγορο — αυτά αφηγούνται την ιστορία ενός συστήματος που λειτουργεί και μιας ομάδας που καταλαβαίνει τα δεδομένα της.

Ο συνδυασμός live operational dashboard και ενός συνόλου γυαλιστερών αναλυτικών charts είναι αυτό που θα παρουσίαζε ένα πραγματικό IoT deployment σε stakeholders. Το εξασκείτε τώρα.

Τι πρέπει να έχει ολοκληρωθεί με αυτό το εργαστήριο

Πριν το τέλος της συνεδρίας θα πρέπει να έχετε: αξιολογήσει το Lab 07 dashboard σας, ανασχεδιάσει το Home Assistant dashboard με ιεραρχία πληροφοριών, color coding, conditional cards, και system overview, εφαρμόσει RUSTIC αρχές και intelligent design, γράψει analyze.py που φορτώνει JSONL data και δημιουργεί τουλάχιστον επτά Seaborn charts, και επανεξετάσει και καθαρίσει τα charts για αναγνωσιμότητα και ακρίβεια.

Καλο καλοκαίρι! :)