Swipytics

Swipytics is a novel exploratory data analysis interface designed for visual analytics novices. While exploratory data analysis has become pervasive, engaging a broad and diverse audience, the cognitive complexity of choosing data attributes and constructing visualizations remains a significant barrier for novices. To fill the gap, we present a learnable mobile interface, Swipytics. Leveraging the metaphor of short-form video streams, Swipytics offers minimal and familiar user interactions, such as swipe gestures for exploring new visualizations. We alleviate the information overload by recommending visualizations at a linear and controllable pace.

Getting Started

Swipytics runs in two enviornments: Standalone, Server.

Standalone is run within the browser by Pyodide without any additioanl installation or setup. Also Swipytics-stanalone can be installed in device as a Progressive Web App (PWA)

Server runs on top of a Python web server and can be used via an instant Python environment like Binder or Colab, or by following the instructions below to install and use it. Swipytics running in the Server environment generates visualisations faster than Standalone.

Installation 🚧

pip install swipytics
swipytics # Run Swipytics

Development

Setup Development Enviornment

Install node.js, pnpm and Hatch to set up the development environment.

You can manage both TypeScript (Frontend) and Python (Backend) environments with pnpm. Check the package.json.

git clone https://github.com/jiwnchoi/Swipytics.git
cd Swipytics
pnpm install

# Only works with Standalone (Pyodide).
pnpm dev

# Use server option if you want to work with Server.
pnpm dev:server

# Lint and Format
pnpm check # Lint and Format both .py and .ts files

# Test
pnpm test # Test TypeScript with Vitest and Python with pytest

System Architecture

• @hooks call @api with Tanstack Query (with caching), and @stores call @api with Zustand (w.o. caching)
• If Swipytics run as a Stanalone, @api routes async call to @workers which excutes python files with Pyodide and Web Worker. For Swipyytics-server, @api routes to FastAPI server.
• Note that useSessionStore in @stores and sessionState in app.py are always the same
• Event Logger captures the user-triggered Event object from window

Coding Convention 🚧

Common

• Avoid using verbs in boolean variables. (isLoading 🚫, loading ✅)

Client (TypeScript)

• Buisiness logic is placed in @hooks, not @components. Especially, try to avoid use primitive hooks (useState, useEffect, useQuery, useStore, ...) in @component.
• You must reference modules in the direction of the dependency edge in figure above; you must not reference them backwards or skipping the edges.

Engine (Python)

• Objects' name in app.py are written in camelCase, but other python files are written in snake_case. This is a convention to ensure strong adherence to camelCase in JavaScript, but also flexibility to comply with PEP8 (snake_case) in Python.

Acknowledgements

• Pyodide for excuting Swipytics standalone.
• Draco 2 for visualization reocmmendation.