A library for visualization and creative-coding

Overview

Pts

image

Pts is a typescript/javascript library for visualization and creative-coding.

Get started at ptsjs.org.

Please give it a try, file issues, and send feedbacks to @williamngan. Thank you!


Usage

Option 1
Get the latest pts.js or pts.min.js (in dist folder). Alternatively use a CDN service like cdnjs or jsdelivr or unpkg. Then add it to your html page like this:

<script type="text/javascript" src="path/to/pts.js"></script>

Pts is pretty lightweight. Currently at ~90kb minified and 26kb gzipped.

Option 2:
Install via npm install pts. Then you can choose to import some parts of Pts into your project as needed.

import {CanvasSpace, Pt, Group, Line} from 'pts';

To quickly get started, try download or clone these repos:

Get Started
Read the guides and take a look at the demos and their source code.
If you need help, please don't hesitate to file an issue.


For development

Pts is written in typescript. You can clone or fork this project and build it as follows:

Build and test

Clone this repo and install dependencies via npm install.

npm start
npm run build
npm test

Generate documentations

Run this to generate Pts styled documentations. (Requires python 3.6)

npm run docs 

If you prefer to generate default typedocs, run this:

typedoc --readme none --out typedocs src --name Pts

Generate typescript declaration files and minify

npm run typings
npm run minify

Contributing

We appreciate your support and feedbacks!

Please file issues if you find bugs and have feature requests. If you are able to send small PRs to improve Pts or fix bugs, that would be awesome too.

For larger PRs, please ping @williamngan to discuss first.


License

Apache License 2.0. See LICENSE file for details.
Copyright © 2017-2019 by William Ngan and contributors.

Comments
  • only one svgspace possible

    only one svgspace possible

    heyho @williamngan! 🌳 🌾

    you can make a microwaved quick meal, or you can take the full on adventure time travel to dinosaur land. and this for me is pts. wow. what an amazing library! and i am just scratching the surface.. 🤯

    because of performance issues with the canvas element and locomotive-scroll in safari, i had to switch to the svg renderer which works beautifully fine, even though its still marked as experimental.

    there's just one major problem i am facing. i can only get one svg space working at the same time. as soon as i create more than one, it only renders the last one.

    i created a pretty basic pen just to demonstrate. actually we should be able to see two lines here. but we only see one. is it me who's not understanding how to setup the library correctly, or is there something wrong on the other side?

    https://codepen.io/jaro_io/pen/MWjpZxL

    thank you so much for taking a quick look! jaro 🐤

    opened by jaro-io 11
  • failing to load in Gatsby

    failing to load in Gatsby

    Hi, had a great time playing with this beautiful thing on my local develop build of Gatsby and managed to create a cool effect. I was very disappointed to discover that the build failed with the error Error: Constructor Float32Array requires 'new' and nothing I have done has been able to rectify this (including the obvious adding of 'new', playing around with the babel config and even bringing the code inside the project as opposed to being a node module so I had more control over the transpilation.

    Of course this is because this is an ES6 module but I can't figure out exactly what I need to do to get it to work. I guess you may not be familiar with Gatsby but could you tell me specifically what babel config needs to be done in order to get this to compile?

    Many thanks :)

    question 
    opened by ButterBridge 9
  • Memory leak of UIPointerActions 'uidrag'

    Memory leak of UIPointerActions 'uidrag'

    I've been wanting to use pts.js to draw interactive shapes. But the use of the "uidrag" action (i.e. for translating the shape) results in slowing down drastically the performances. Is this behaviour intended ? Or have I misused the "on" method of UIDragger ?

    Fiddle to reproduce:

    https://jsfiddle.net/ygov5x2m/ : click and drag on the shape, and open the console to see the issue.

    pts version: 0.8.6 using Chromium 75.0.3770.90

    opened by cccdupont 8
  • Website not working on mobile

    Website not working on mobile

    Hi

    I did not get into investigate why but website and library is not working on the phones this should not be the case as no technologies are used that modern web browsers on phone do not support or is it?

    Alex

    bug 
    opened by alexgvozden 8
  • Bgcolor with transparent alpha value has strange behavior

    Bgcolor with transparent alpha value has strange behavior

    Pts behaves strangely when the bgcolor is transparent. The canvas slowly darkens and visual artifacts appear. This can be demonstrated with this simple demo. pts_demo.zip

    opened by grant-wilson 7
  • form.fill does not fill entire space

    form.fill does not fill entire space

    Hi there,

    I stumbled upon a peculiar behavior. Filling the space keeps a transparent line on top and on the left of the space. I suspect this is the bgcolor.

    let run = Pts.quickStart( "#pt", "#ff99ee" );
    run( (time, ftime)  => { form.fill("green").rect(space.innerBound); });
    

    Result: image

    Removing the bgcolor ("#ff99ee") when initializing does not help. What's weird is that when resizing the window in your online editor, it snaps to place and everything looks good. But anytime the code is run again, same result with lines at the top and left of page.

    My end-goal includes more than filling the background only once and so the option to only initialize the bgcolor does not work for me although results with the expected behavior.

    bug 
    opened by JulianBroudy 7
  • resize function override not working

    resize function override not working

    space.add custom resize function causing error?

    space.add( { start: (bound, space) => { // code for init }, animate: (time, ftime, space) => { // code for animation }, action: (type, x, y, event) => { // code for interaction }, resize: (size, event) => { // code for resize } } );

    bug 
    opened by vh13294 7
  • Rotation with different axis does not work

    Rotation with different axis does not work

    Hello,

    I am trying to migrate my code from the old Pt to this new library (Pts) and I am having some trouble. More specifically, with the Pt's rotate2D or the Geom's rotate2Dfunctions.

    Good to know: before I illustrate the problem, I would like to add that since I was using the standalone file, in order to eliminate some possibilities I copied the standalone version that is currently public on the old repo and replaced it with my working pt.min.js and the Canvas didn't even load. Conclusion: my version is different also from the currently released old one. Here is a link to a gist with my version: pt.min.js.

    Sample to replicate: (Tested in my own environment as well as in a demo editor)

    (function() {
    
        /* Because I would like to have some more properties that 
           I will be using (not showing the usage here) */
        function MyPoint(thePoint, brightness) {
            this.thePoint = thePoint;
            this.brightness = brightness;
            this.direction = Math.random() < 0.5 ? -1 : 1;
        }
    
        var space = new CanvasSpace("#pt").setup({
            bgcolor: "#99eeff",
            retina: true,
            resize: true
        });
    
        var form = space.getForm();
        var mainPath = [new Pt(), new Pt(-Util.randomInt(20), 0)];
        let points;
        let pts;
    
        space.add({
            start: (bound) => {
                if (!points) {
                    points = [];
                    pts = [];
                    for (let i = 0; i < 100; i++) {
                        var point = new Pt({
                            x: Util.randomInt(20) * i,
                            y: Util.randomInt(20) * i
                            /* The next line is my attemp to add 3rd coordinate */
                            // ,z: Util.randomInt(20) * i 
                        });
    
                        pts.push(point);
                        points[i] = new MyPoint(point, 0.7);
                    }
                }
            },
    
            animate: (time, ftime) => {
    
                /* The following for loop and its alternative "Geom.rot..." work both 
                   with and without the z coordinate, and it gives the same result: points rotate.*/
    
                // for (let i = 0; i < 100; i++) {
                    // points[i].thePoint.rotate2D(Const.one_degree / 12, space.center);
                // }
                /* For's alternative */
                // Geom.rotate2D(pts,Const.one_degree, space.center);
    
    
    
                /* The following for loop and its alternative "Geom.rot..." does not create the 
                   expected result whether I include the z coordinate or not! */
    
                for (let i = 0; i < 100; i++) {
                    points[i].thePoint.rotate2D(Const.one_degree / 12, space.center, Const.xy);
                        /*OR*/
                    //     points[i].thePoint.rotate2D(Const.one_degree / 12, space.center, Const.xz);
                        /*OR*/
                    //     points[i].thePoint.rotate2D(Const.one_degree / 12, space.center, Const.yz);
                }
                // Geom.rotate2D(pts,Const.one_degree, space.center,Const.xy);
                    /*OR*/
                // Geom.rotate2D(pts,Const.one_degree, space.center,Const.xz);
                    /*OR*/
                // Geom.rotate2D(pts,Const.one_degree, space.center,Const.yz);
    
    
                let perpends = pts.map((p) => [p, Line.perpendicularFromPt(mainPath, p)]);
    
                form.strokeOnly("#123", 1).lines(perpends);
                form.fillOnly("#123").points(pts, 5, "circle");
                form.point(space.pointer, 10);
            }
        });
    
        space.bindMouse().bindTouch().play();
    
    })();
    
    

    To be clear, in the previous code, I am only trying to rotate it in 1 plane out of the 3 possibilities.

    Expected result is what I have now with the old code and old pt.min.js:

    Rotation on 2 planes at once 2planes

    Rotation on YZ plane yz

    Here is my current code with the old library and the pt.min.js I mentioned at the beginning.

    I think the Const.xy don't get registered in the new library, possible?

    Thank you.

    bug 
    opened by JulianBroudy 6
  • Set globalCompositeOperation within CanvasForm

    Set globalCompositeOperation within CanvasForm

    It would be a nice addition to add the globalCompositeOperation into the CanvasForm.

    Currently have I have to hold a reference to the Context to get around this issue. I need to be able to set globalCompositeOperation to one of the options and possibly reset it to the default when done.

    enhancement 
    opened by jdbence 6
  • Sound.start and Sound.stop do not account for nodes added with Sound.connect

    Sound.start and Sound.stop do not account for nodes added with Sound.connect

    Currently, Sound.connect is provided to add an AudioNode to the node generated. However, Sound.start and Sound.stop do not account for this, and always connect or disconnect the Sound's _node directly to the AudioContext.destination.

    This can result in adding something simple like a GainNode to a loaded audio track, and banging your head against the desk trying to figure out why its not doing anything. I suggest creating a function that allows you to update the Sound instances 'output node', (last AudioNode in the chain that you've connected), and reference that in the start and stop functions.

    @williamngan would you like me to open a PR for this? It shouldn't be too hard to fix. lmk.

    Code that was failing for reference:

        Sound.load(SONG).then((song) => {
          const ctx = song.ctx
          const gainNode = ctx.createGain()
          song.connect(gainNode)
          gainNode.gain.value = 0.1
          song.start()
        })
    

    Hacky workaround:

        Sound.load(SONG).then((song) => {
          const ctx = song.ctx
          const gainNode = ctx.createGain()
          song.connect(gainNode)
          gainNode.gain.value = 0.1
          ctx.resume().then(() => {
            song.start()
            song.node.disconnect(ctx.destination)
            gainNode.connect(ctx.destination)
          })
        })
    
    opened by prkirby 5
  • Trouble using pts on node server

    Trouble using pts on node server

    Hi, today I was working on some server-side TypeScript code that uses Group and Pt. Unfortunately when I try to run my code, I get a ReferenceError saying window is not defined, which is understandable, since node doesn't have such things

    Here's a simple example that throws that exception:

    import { Group, Pt } from "pts";
    
    let g = new Group();
    

    Is there any way to use pts' classes on a node server, or am I out of luck? Thanks!

    opened by stefa168 5
  • Canvas mouse events coord is wrong on layout change

    Canvas mouse events coord is wrong on layout change

    You calculate local coordinates there based on evt.pageX/evt.pageY and canvas page bounds. Element page bounds variable gets updated on "resize" page event(and manual "resize" calls), but page layout may be changed all the time(some data is loaded and element above chart became bigger for example). Easiest fix is to use evt.offsetX/evt.offsetY, but this also highlight problem with "bounds" variable, better not to use it if possible since there is no performant tracker of element position.

    opened by ProtonGustave 0
  • Crisp 1px lines on HiDPI devices.

    Crisp 1px lines on HiDPI devices.

    I'm using PTS for charts. Sometimes 1px crisp line is needed but with current approach of canvas scaling i'm not sure it's possible. Also i've seen this issue in similar libraries and not sure why everybody doing it. In my local fork i just don't scale canvas and also adjusted few properties(space.width, space.height, mouse events, etc) to be multiplied with pixelScale, works perfect, everything is crisp.

    opened by ProtonGustave 0
  • Bump minimatch and mocha

    Bump minimatch and mocha

    Bumps minimatch to 3.1.2 and updates ancestor dependency mocha. These dependencies need to be updated together.

    Updates minimatch from 3.0.4 to 3.1.2

    Commits

    Updates mocha from 8.4.0 to 10.1.0

    Release notes

    Sourced from mocha's releases.

    v10.1.0

    10.1.0 / 2022-10-16

    :tada: Enhancements

    :nut_and_bolt: Other

    v10.0.0

    10.0.0 / 2022-05-01

    :boom: Breaking Changes

    :nut_and_bolt: Other

    Also thanks to @​ea2305 and @​SukkaW for improvements to our documentation.

    v9.2.2

    9.2.2 / 2022-03-11

    Please also note our announcements.

    :bug: Fixes

    ... (truncated)

    Changelog

    Sourced from mocha's changelog.

    10.1.0 / 2022-10-16

    :tada: Enhancements

    :nut_and_bolt: Other

    10.0.0 / 2022-05-01

    :boom: Breaking Changes

    :nut_and_bolt: Other

    Also thanks to @​ea2305 and @​SukkaW for improvements to our documentation.

    9.2.2 / 2022-03-11

    :bug: Fixes

    :nut_and_bolt: Other

    ... (truncated)

    Commits
    • 5f96d51 build(v10.1.0): release
    • ed74f16 build(v10.1.0): update CHANGELOG
    • 51d4746 chore(devDeps): update 'ESLint' to v8 (#4926)
    • 4e06a6f fix(browser): increase contrast for replay buttons (#4912)
    • 41567df Support prefers-color-scheme: dark (#4896)
    • 61b4b92 fix the regular expression for function clean in utils.js (#4770)
    • 77c18d2 chore: use standard 'Promise.allSettled' instead of polyfill (#4905)
    • 84b2f84 chore(ci): upgrade GH actions to latest versions (#4899)
    • 023f548 build(v10.0.0): release
    • 62b1566 build(v10.0.0): update CHANGELOG
    • Additional commits viewable in compare view

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Safari 15 // Group.moveTo not reflected

    Safari 15 // Group.moveTo not reflected

    I am experiencing some strange problems on macOS Monterey / Safari 15.

    The code looks like:

    this.dragger.onDrag((ui, pt) => {
          const p = this.space.pointer.$subtract(ui.state('offset'))
          ui.group.moveTo(p)
          this.resizer.setCenter(ui.group[2])
        })
    

    But the object is not moved, it just stays where it is. Strangely, after a right click (and context menu being opened) the object suddenly appears where it was (supposed to be) moved. But then again dragging doesn't work. It works in all other browsers that I tested (also other Safari versions). Any clue perhaps?

    opened by miha-stopar 5
  • Documentation is unclear on how to

    Documentation is unclear on how to "unmount" a canvas.

    The doc comment for CanvasSpace#dispose reads:

      Dispose of browser resources held by this space and remove all players. Call this before unmounting the canvas.
    

    However, I've found that simply calling dispose() is not enough to stop the CanvasSpace object's draw loop from being called. I'm using Pts.js in a Preact application, and for my use case I'd like to delete a CanvasSpace object as soon as my Preact component is unmounted. Of course, only the garbage collector can truly "delete" something, but I want to at least stop it from being referenced in places that causes the draw loop to be called. The code I wrote to do that was (simplified version):

    function Component(plot) {
        const canvasRef = useRef(null);
        const [space, setSpace] = useState();
     
        // The callback is called when the component mounts on the DOM
        useEffect(() => {
           const newSpace = new CanvasSpace(canvasRef.current);
           setSpace(newSpace);
           // a clean-up function that is called when the component is unmounted from the DOM.
           return () => { space.dispose(); console.log("space disposed") }
        }, [])
    
       return <canvas ref={canvasRef}> </canvas>
    }
    

    However, I find that even after the clean-up function is run, and space disposed is logged on to the console, the space's draw loop continues to run. It throws an error (this._ctx is undefined) since the canvas element no longer exists after the component has been unmounted.

    Either this is a possible bug, perhaps a stray callback to requestAnimationFrame somewhere in the source, or the documentation should be more clear about how to stop a CanvasSpace from having any visible side effects after it has been disposed.

    Currently, my solution is to add a space.pause() before the call to dispose, so that the non-existent CanvasRenderingContext2D is at least not referenced in a call to the space's draw loop. However, this just means that the space exists in memory, and its draw loop isn't being called.

    Ideally, when a space has been disposed, the Garbage collector should be free to remove it from the heap.

    bug 
    opened by srijan-paul 2
Releases(v0.11.3)
  • v0.11.3(Dec 8, 2022)

    New features

    • Improved Img class API
    • Static and dynamic pattern support in Img class
    • Random seed using Num.random and Num.seed - thanks @carlo-colombo
    • Updated build system using tsup

    Bug fixes

    • Fixed mouse and key event bugs
    • Various minor bug fixes and improvements, with thanks to @doseofted and @rmschindler
    Source code(tar.gz)
    Source code(zip)
  • v0.10.2(Feb 19, 2021)

    New Features

    Bug fixes

    (thanks @tibotiber and @prkirby)

    • Rotational axis bug #106
    • space.dispose #109
    • distanceFromPt bug #118
    • half-pixel bug #119
    • svg id bug #128
    • nodejs bug #132
    • audible output node bug #134
    • semi transparent bug #135
    • add the missing static CanvasForm.point function
    • update webpack and babel to resolve security issues
    Source code(tar.gz)
    Source code(zip)
  • v0.9.1(Mar 7, 2020)

  • v0.8.0(Mar 25, 2019)

    New features

    • new Sound class
    • add ellipse drawing function in CanvasForm
    • add an angle offset parameter inCreate.radialPts

    Bug fixes and changes

    • unit function no longer throws error when magnitude is 0
    • alpha property in Color now has setter as well as getter
    • Move Tempo class to Play module (typescript only)
    • Fix doc links in Animation guide
    Source code(tar.gz)
    Source code(zip)
  • v0.7.0(Feb 4, 2019)

    New features

    • Tempo class for creating animation sequences
    • (Related) New Pts React component ( react-pts-canvas ). Examples in pts-react-example also updated.
    • New posenet demo in /demo/more/tfjs_posenet/js/d.js

    Bug fixes

    • Fix Num.cycle
    • Fix various bugs in Physics
    • Fix resize issues and type parameter
    • Fix documentations and broken links
    Source code(tar.gz)
    Source code(zip)
  • v0.6.0(Aug 24, 2018)

    New features

    • Experimental UI module for creating buttons and drag-drops. See demo here.
    • Add Circle.fromTriangle function (Thanks @AndGem for the suggestion)
    • es2015 build by @bsouthga

    Bug fixes

    • Various bug fixes and docs improvements by our contributors ( @ichabodcole , @amilajack , @bnjm , @thewarpaint )
    • Fix documentation scrolling issue
    • Improve readability for exported html in demo editor
    • Other minor fixes and improvements
    Source code(tar.gz)
    Source code(zip)
  • v0.5.0(Aug 7, 2018)

    Pts has reached 0.5! 🎉This is a milestone release with many updates and improvements.

    New features:

    Breaking changes

    • Pt's cross2D renamed to $cross2D
    • Util.warnLevel property becomes a function Util.warnLevel( ... )
    • Removed Circle.toInnerRect (use Circle.toRect instead)
    • typescript: Bound class moved into Pt module
    • typescript: All type alias moved into Types.ts file
    • typescript: updated version to 2.9.2

    Bug fixes

    • fix IE and mobile css bugs
    • fix devicePixelRatio bug when it's less than 1.
    • demo updates and minor bug fixes
    Source code(tar.gz)
    Source code(zip)
  • v0.4.2(May 15, 2018)

  • v0.4.0(May 7, 2018)

  • 0.3.1(Mar 9, 2018)

  • v0.3.0(Mar 8, 2018)

    • Single-line and multi-line textbox implementation for CanvasSpace
    • Basic UI handling
    • Range and stepper utility
    • Minor improvements and bug fixes
    Source code(tar.gz)
    Source code(zip)
  • v0.2.3(Nov 13, 2017)

  • v0.2.0(Sep 22, 2017)

  • v0.1.6(Aug 21, 2017)

Owner
William Ngan
William Ngan
a graph visualization library using web workers and jQuery

arbor.js -------- Arbor is a graph visualization library built with web workers and jQuery. Rather than trying to be an all-encompassing framework, a

Christian Swinehart 2.6k Dec 19, 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 Jan 3, 2023
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.8k Jan 5, 2023
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

Square 4.9k Jan 3, 2023
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

Epoch 5k Dec 30, 2022
Data visualization library for depicting quantities as animated liquid blobs

liquidity.js A data visualization library for depicting quantities as animated liquid blobs. For a demonstration of what the final product can look li

N Halloran 91 Sep 20, 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 Dec 29, 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 740 Dec 31, 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
Render echarts in obsidian,Apache ECharts,An Open Source JavaScript Visualization Library

obsidian-echarts Render echarts in obsidian,Apache ECharts,An Open Source JavaScript Visualization Library

null 23 Dec 26, 2022
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.9k Dec 31, 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 Jan 2, 2023
A monitoring and visualization tool for Apache Kafka.

An open source monitoring tool for Apache Kafka Table of Contents Features Demo Installation Engineering Team Features User-friendly GUI Insights into

OSLabs Beta 44 Jan 2, 2023
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 Jan 2, 2023
📊 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.5k Dec 30, 2022
A visualization grammar.

Vega: A Visualization Grammar Vega is a visualization grammar, a declarative format for creating, saving, and sharing interactive visualization design

Vega 10.1k Dec 30, 2022
A port of the Processing visualization language to JavaScript.

⚠️ This project has been archived ⚠️ With the development of p5js and the API advances in Processing itself, as well as Processing.js itself having be

Processing.js 3.1k Jan 4, 2023
Dynamic HTML5 visualization

Envision.js Fast interactive HTML5 charts. http://groups.google.com/group/envisionjs/ Features Modern Browsers, IE 6+ Mobile / Touch Support Pre-built

HumbleSoftware 1.6k Dec 3, 2022
vizflow is an ES6 interactive visualization engine

Vizflow vizflow.js - a render-loop library written using EcmaScript.6 (ES6) with no other external dependencies. Vizflow is a relatively small library

Vizflow 332 Oct 27, 2022