Data visualization library for depicting quantities as animated liquid blobs

Overview

liquidity.js

A data visualization library for depicting quantities as animated liquid blobs.

For a demonstration of what the final product can look like, watch this video.

The animation can be rendered in real-time using circle sprites, or rendered for video output using Marching Cubes (metaballs), which is too computation-heavy to be animated in real-time.

The first in-progress prototype to use the technique is Philly Contracts, but a more stripped down project in planned to serve as a boiler plate. Philly Contracts is supported by the Kight Prototype Fund, and is being produced in collaboration with Amanda Levinson.

This project is in its early stage. Some items on the to-do list include:

  • Provide better documentation and a better stripped down starter project.
  • Optimize performance of the Marching Cubes / metaballs, which are currently highly inneficient.
  • Improve behavior of liquid movement to have more natural characteristics (less isolated circles)
  • Allow for multiple circle / drop size, and more precise quantities.

Getting started

To run the liquidity.js demo:

  1. Ensure that you have Node & NPM installed by running npm -v - if not, install it.
  2. git clone https://github.com/nhalloran/liquidity.js.git
  3. cd liquidity.js
  4. npm install
  5. npm run dev
  6. Open your browser and go to http://localhost:8080.
You might also like...

🍞📊 Beautiful chart for data visualization.

🍞📊  Beautiful chart for data visualization.

🍞 📈 Spread your data on TOAST UI Chart. TOAST UI Chart is Beautiful Statistical Data Visualization library. đŸ“Ļ Packages The functionality of TOAST U

Nov 22, 2022

A data visualization framework combining React & D3

A data visualization framework combining React & D3

Semiotic is a data visualization framework combining React & D3 Interactive Documentation API Docs on the wiki Examples Installation npm i semiotic E

Nov 26, 2022

Location Intelligence & Data Visualization tool

Location Intelligence & Data Visualization tool

What is CARTO? CARTO is an open, powerful, and intuitive platform for discovering and predicting the key insights underlying the location data in our

Nov 17, 2022

🍞📊 Beautiful chart for data visualization.

🍞📊  Beautiful chart for data visualization.

🍞 📈 Spread your data on TOAST UI Chart. TOAST UI Chart is Beautiful Statistical Data Visualization library. đŸ“Ļ Packages The functionality of TOAST U

Nov 22, 2022

Globe.GL - A web component to represent data visualization layers on a 3-dimensional globe in a spherical projection

Globe.GL - A web component to represent data visualization layers on a 3-dimensional globe in a spherical projection

A web component to represent data visualization layers on a 3-dimensional globe in a spherical projection. This library is a convenience wrap

Nov 18, 2022

Timeline/Graph2D is an interactive visualization chart to visualize data in time.

Timeline/Graph2D is an interactive visualization chart to visualize data in time.

vis-timeline The Timeline/Graph2D is an interactive visualization chart to visualize data in time. The data items can take place on a single date, or

Nov 25, 2022

Open source CSS framework for data visualization.

Charts.css Charts.css is an open source CSS framework for data visualization. Visualization help end-users understand data. Charts.css help frontend d

Nov 30, 2022

Cubism.js: A JavaScript library for time series visualization.

Cubism.js Cubism.js is a D3 plugin for visualizing time series. Use Cubism to construct better realtime dashboards, pulling data from Graphite, Cube a

Nov 27, 2022

A general purpose, real-time visualization library.

Epoch By Ryan Sandor Richards Epoch is a general purpose charting library for application developers and visualization designers. It focuses on two di

Nov 17, 2022
Comments
  • Setup instructions + npm scripts

    Setup instructions + npm scripts

    Hi - cool project! Just added a few things - some basic setup instructions and npm scripts which make it easier to run your webpack stuff. I'll take a deeper look at the actual code soon 😃

    -d

    opened by dandelany 3
Owner
N Halloran
N Halloran
Apache Superset is a Data Visualization and Data Exploration Platform

Superset A modern, enterprise-ready business intelligence web application. Why Superset? | Supported Databases | Installation and Configuration | Rele

The Apache Software Foundation 49.3k Nov 26, 2022
DataSphereStudio is a one stop data application development& management portal, covering scenarios including data exchange, desensitization/cleansing, analysis/mining, quality measurement, visualization, and task scheduling.

English | 中文 Introduction DataSphere Studio (DSS for short) is WeDataSphere, a big data platform of WeBank, a self-developed one-stop data application

WeBankFinTech 2.4k Nov 19, 2022
Apache ECharts is a powerful, interactive charting and data visualization library for browser

Apache ECharts Apache ECharts is a free, powerful charting and visualization library offering an easy way of adding intuitive, interactive, and highly

The Apache Software Foundation 53.4k Nov 25, 2022
Powerful data visualization library based on G2 and React.

BizCharts New charting and visualization library has been released: http://bizcharts.net/products/bizCharts. More details about BizCharts Features Rea

Alibaba 6k Nov 19, 2022
🌏 A Declarative 3D Globe Data Visualization Library built with Three.js

Gio.js English | 中文 React Version: react-giojs Wechat minigame: wechat usage Gio.js is an open source library for web 3D globe data visualization buil

syt123450 1.6k Nov 25, 2022
📊 Data visualization library for React based on D3

Data visualization library for React based on D3js REAVIZ is a modular chart component library that leverages React natively for rendering the compone

REAVIZ 729 Nov 17, 2022
Apache ECharts is a powerful, interactive charting and data visualization library for browser

Apache ECharts Apache ECharts is a free, powerful charting and visualization library offering an easy way of adding intuitive, interactive, and highly

The Apache Software Foundation 53.4k Nov 23, 2022
An open-source visualization library specialized for authoring charts that facilitate data storytelling with a high-level action-driven grammar.

Narrative Chart Introduction Narrative Chart is an open-source visualization library specialized for authoring charts that facilitate data storytellin

Narrative Chart 45 Nov 2, 2022
Data Visualization Components

react-vis | Demos | Docs A COMPOSABLE VISUALIZATION SYSTEM Overview A collection of react components to render common data visualization charts, such

Uber Open Source 8.4k Nov 17, 2022
📊 A highly interactive data-driven visualization grammar for statistical charts.

English | įŽ€äŊ“中文 G2 A highly interactive data-driven visualization grammar for statistical charts. Website â€ĸ Tutorial Docs â€ĸ Blog â€ĸ G2Plot G2 is a visua

AntV team 11.4k Nov 23, 2022