Data Studio

Data Studio is a modular, browser-based data analysis and visualization prototype. It allows one to load, manipulate, wrangle, and visualize datasets using a variety of modules.

[Look at the Poster 🖼️] | [Read the 2-pager 📜]

Project Structure

index.html                # Main entry point (for vite)
package.json              # Project dependencies and scripts
vite.config.js            # Vite configuration
modules/                  # Module definitions and internal modules
  index.js                # Module registry
  internal/               # Internal Vue-based modules
  iframe/                 # Iframe-based modules
packages/iframe/          # Iframe module packages
public/                   # Static assets and example data
src/                      # Main Vue app, components, and data utilities

Development

I coded up this project a few years ago, so many of the dependencies are a bit outdated. On top of this, many of the libraries themselves come with dependencies to older code, which is the reason that modules are often built separately and loaded as iframes.

Prerequisites

• Node.js (v18+ recommended)
• npm

Installation

npm install

Development

Start the development server:

npm run dev

Open your browser at http://localhost:5173 (default Vite port).

Build

To build for production:

npm run build

Adding New Modules

• Internal modules: Add a new folder under modules/internal/ and register it in modules/index.js.
• Iframe modules: Add your module under public/modules-iframe-prebuilt/ or modules/iframe/ and register its URL in modules/index.js.

License

This work is licensed under the Creative Commons Attribution 4.0 International License.