Overview
InfoVis Framework is an educational project designed to teach Information Visualization concepts through hands-on practice. Built for a university course, it provides students with a complete client-server architecture that demonstrates visualization development across multiple technologies and paradigms.
The framework challenges students to create two distinct visualizations: one using web technologies (HTML/JavaScript/D3) and another using Python's Bokeh library. This dual-approach methodology helps learners understand how different tools approach the same visualization problems.
Architecture
Features
Dual Visualization Framework: Supports both D3.js (client-side) and Bokeh (server-side) implementations
Flask Backend: Lightweight Python server handling routing and data processing
Cross-Platform Support: Setup instructions for Linux, Mac, and Windows environments
Educational Focus: Structured to teach visualization fundamentals and best practices
Local Development: Runs entirely on student machines without external dependencies
Learning Objectives
Web-Based Visualization (D3.js)
Students learn to create interactive visualizations using D3.js, mastering data binding, SVG manipulation, and client-side interactivity. This path teaches how modern web browsers can handle complex visualizations entirely in JavaScript.
Python-Based Visualization (Bokeh)
The Bokeh path demonstrates server-side visualization generation, where Python handles data processing and chart creation before sending results to the browser. Students understand the tradeoffs between client and server rendering approaches.
Full-Stack Architecture
By working with Flask as the backend, students gain experience with web application structure, HTTP routing, and how frontend visualizations communicate with server-side logic.
Getting Started
1. Installation
2. Launch Server
3. Access Visualizations
Educational Impact
Used in university Information Visualization courses, the framework has helped students understand that visualization is not just about choosing the right chart type - it's about understanding data transformation, rendering pipelines, and interaction design.
The dual-path approach (D3.js vs Bokeh) forces students to think critically about when to use client-side versus server-side rendering. Each approach has tradeoffs in performance, complexity, and user experience that become clear through hands-on implementation.
Students and educators forking the repository for their own courses
Use Cases
University Courses: Ready-to-use framework for teaching information visualization concepts
Self-Learning: Students can explore visualization techniques independently
Prototyping: Quick setup for testing visualization ideas across different technologies
Comparative Learning: Direct comparison between D3.js and Bokeh approaches to the same problem