This framework is designed for jump-starting a single-page Visual Analytics(VA) system. While many VA systems are designed for specific applications, their workflow often share similar data processing methods. Several demos show typical frontend-backend communication, view components' interaction, and visualization rendering. VA-framework employs Python's Flask server as the backend and Javascript's Vue as the frontend. It facilitates fast development with hot-reloads (Vite), UI components (Ant design), state management (Pinia), and type inference (TypeScript).
- A side-by-side comparison of the Composition API demo and the Options API demo with D3.js.
- A simple comprehensive MVVM demo of Composition API, TypeScript, Pinia, and v-for SVG rendering.
- A quick legend component demo with simple props and emits in Composition API, TypeScript, and v-for SVG rendering.
- A basic ad-hoc data processing pipeline demo (Model in MVC) with Pandas.
- An API deisgn demo for data transmission (Controller in MVC) with Pinia, Axios, and Flask.
- A simple demo of bundling the UI components into separate components, such as buttons and tooltip, with Ant Design Vue and Composition API for higher reusability and readability.
- A table with tags and tooltips demo to provide detailed data.
- A basic layout for visual analytics system
- Graph data
- Spatio-temporal data
- Composition and Configuration Patterns in Multiple-View Visualizations
- The periphery plots
The server employs Flask to provide web services. All codes below should be run under the "server" folder. For the first time user, please install the requirements in the requirements.txt. This project is built using Python 3.8.5. Using a version below 3.7 might encounter errors regarding the use of f-string. The default address for the server is http://127.0.0.1:5000/.
python run.py
The client services are provided by Vue 3 and many other packages.
All codes below should be run under the "client" folder.
The packages are handled by npm, and specified in the package.json.
For the first time user, please install the dependencies in the package.json with npm install.
The client is served at http://localhost:3000/.
# Compiles for development
$ npm run dev
# Compiles for production
$ npm run build