Description
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:
liquidity.js alternatives and similar libraries
Based on the "Data Visualization" category.
Alternatively, view liquidity.js alternatives based on common mentions on social networks and blogs.
-
d3
Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada: -
echarts
Apache ECharts is a powerful, interactive charting and data visualization library for browser -
-
fabric.js
Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser -
BabylonJS
Babylon.js is a powerful, beautiful, simple, and open game and rendering engine packed into a friendly JavaScript framework. -
p5.js
p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Processing. http://twitter.com/p5xjs — -
-
#<Sawyer::Resource:0x00007f1b609038f0>
Open-source JavaScript charting library behind Plotly and Dash -
Highcharts JS
Highcharts JS, the JavaScript charting framework -
-
paper.js
The Swiss Army Knife of Vector Graphics Scripting – Scriptographer ported to JavaScript and the browser, using HTML5 Canvas. Created by @lehni & @puckey -
Frappe Charts
Simple, responsive, modern SVG Charts with zero dependencies -
-
-
sigma.js
A JavaScript library aimed at visualizing graphs of thousands of nodes and edges -
-
GoJS, a JavaScript Library for HTML Diagrams
JavaScript diagramming library for interactive flowcharts, org charts, design tools, planning tools, visual languages. -
-
Cytoscape.js
Graph theory (network) library for visualisation and analysis -
-
-
dc.js
Multi-Dimensional charting built to work natively with crossfilter rendered with d3.js -
-
mxGraph
Diagramming library that enables interactive graph and charting applications to be quickly created that run natively in any major browser that is supported by its vendor. -
-
two.js
A renderer agnostic two-dimensional drawing api for the web. -
heatmap.js
🔥 JavaScript Library for HTML5 canvas based heatmaps -
rickshaw
JavaScript toolkit for creating interactive real-time graphs -
metrics-graphics
A library optimized for concise and principled data graphics and layouts. -
cubism
Cubism.js: A JavaScript library for time series visualization. -
-
jointjs
A proven SVG-based JavaScript diagramming library powering exceptional UIs -
-
processing.js
Processing.js makes your data visualizations work using web standards and without any plug-ins -
-
-
react-simple-maps
Beautiful React SVG maps with d3-geo and topojson using a declarative api. -
-
d3plus
A javascript library that extends D3.js to enable fast and beautiful visualizations. -
Bezier.js
A nodejs and client-side library for (cubic) Bezier curve work -
jquery.sparkline
A plugin for the jQuery javascript library to generate small sparkline charts directly in the browser -
Chartkick.js
Create beautiful charts with one line of JavaScript
Appwrite - The Open Source Firebase alternative introduces iOS support
* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest.
Do you think we are missing an alternative of liquidity.js or a related project?
|
Extensible JavaScript Form Builder Libraries
sponsored
surveyjs.io
|
Popular Comparisons
-
liquidity.jsvstrianglify
-
liquidity.jsvsvizflow
-
liquidity.jsvsChartkick.js
-
liquidity.jsvsd4
-
liquidity.jsvsp5.js
|
Access the most powerful time series database as a service
sponsored
www.influxdata.com
|
README
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:
- Ensure that you have Node & NPM installed by running
npm -v- if not, install it. git clone https://github.com/nhalloran/liquidity.js.gitcd liquidity.jsnpm installnpm run dev- Open your browser and go to http://localhost:8080.