Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/bakoe/datacanvas

A proof-of-concept, open-source, MIT-licensed web application for visual, interactive creation and editing of 2D, 2.5D and 3D data visualizations.
https://github.com/bakoe/datacanvas

data-visualization dataflow-programming visual-programming webgl webgl2

Last synced: about 2 months ago
JSON representation

A proof-of-concept, open-source, MIT-licensed web application for visual, interactive creation and editing of 2D, 2.5D and 3D data visualizations.

Host: GitHub
URL: https://github.com/bakoe/datacanvas
Owner: bakoe
License: mit
Created: 2022-01-18T16:00:33.000Z (about 3 years ago)
Default Branch: main
Last Pushed: 2022-04-25T14:48:31.000Z (almost 3 years ago)
Last Synced: 2024-05-05T10:00:28.852Z (9 months ago)
Topics: data-visualization, dataflow-programming, visual-programming, webgl, webgl2
Language: TypeScript
Homepage: https://datacanvas.dev
Size: 858 KB
Stars: 2
Watchers: 3
Forks: 0
Open Issues: 34
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

# **datacanvas**

[Datacanvas](https://datacanvas.dev) is a proof-of-concept, open-source, MIT-licensed web application for visual, interactive creation and editing of 2D, 2.5D and 3D data visualizations.

![A short, looping screencast showing the usage of the datacanvas editor](https://thumbs.gfycat.com/InsignificantDescriptiveGecko-size_restricted.gif)

## Source Structure

This repository is structured as follows:

| Directory | Description |
| ------------------------------------------------- | ------------------------------------------------------------------------------------ |
| `/` | TypeScript and GLSL source code files for the web-based visualization creation tool |
| [`lib/headless-renderer`](/lib/headless-renderer) | Source code files for the headless, server-side rendering of visualizations |

For instructions about the individual components and their setup, view the respective README files of the directories.

![License](https://img.shields.io/github/license/bakoe/datacanvas.svg?logo=coveralls)

---

# **datacanvas** › Web-based visualization editor

This directory contains the TypeScript and GLSL source code files for the web-based visualization creation tool [datacanvas](https://datacanvas.dev).

## Setup Instructions

The web-based tool is written in TypeScript and bundled using Vite/Rollup to allow for static serving of the resulting assets, i.e., the HTML, JS, and image files.

Thus, make sure to have Node.js installed on your system and install the project’s dependencies using the following command:

```bash
npm install
```

## NPM Configuration and Project Setup

`package.json` specifies the following scripts that can be run by `npm run `.

| command | description |
| --------------- | --------------------------------------------------------------------------------------------------------------------- |
| `build` | builds the tool for deployment, creating a bundle with all facilities |
| `dev` | starts a local development server serving the tool on port 3000 |
| `format` | auto-formats the source code using [Prettier](https://prettier.io) |
| `lint` | performs code quality linting using [TypeScript ESLint Rules](https://github.com/typescript-eslint/typescript-eslint) |
| `preview` | locally previews the production build created via `npm run build` |

## Deployment

The tool is deployed using [Vercel](https://vercel.com). You can use the [Vercel CLI](https://vercel.com/docs/cli) to serve an instance of datacanvas, including the redirects set-up via the `vercel.json` file.