js2flowchart - a visualization library to convert any JavaScript code into beautiful SVG flowchart

Overview

Why? While I've been working on Under-the-hood-ReactJS I spent enormous amount of time on creating schemes. Each change in code or flowchart affects all entire scheme instantly, forcing you to move and align 'broken pieces'. Just repeated manual work...

For multiple files support (and other cool features to simplify codebase learning and documentation) checkout Codecrumbs project I am building right now.

Imagine a library which takes any JS code and generate SVG flowchart from it, works on client and server. Allows you easily adjust styles scheme for your context or demonstrate your code logic from different abstractions levels. Highlighting, destructing whole blocks, custom modifiers for your needs etc.

js2flowchart.js Tweet

MIT Licence npm version

js2flowchart is a tool for generating beautiful SVG flowcharts™ from JavaScript code.

To get started install package from NPM

yarn add js2flowchart

or try it right away at codepen sample, or play with the demo below.

Demo

Check out live code editor, paste your code and download SVG file of flowchart!

What does js2flowchart do?

js2flowchart takes your JS code and returns SVG flowchart, works on client/server, support ES6.

Main features:

  • defined abstractions levels to render only import/exports, classes/function names, function dependencies to learn/explain the code step by step.
  • custom abstractions levels support create your own one
  • presentation generator to generate list of SVGs in order to different abstractions levels
  • defined flow tree modifiers to map well-known APIs like i.e. [].map, [].forEach, [].filter to Loop structure on scheme etc.
  • destruction modifier to replace block of code with one shape on scheme
  • custom flow tree modifiers support create your own one
  • flow tree ignore filter to omit some code nodes completely i.e. log lines
  • focus node or entire code logic branch to highlight important section on scheme
  • blur node or entire code logic branch to hide less-important stuff
  • defined styles themes supports choose one you like
  • custom themes support create your own one which fits your context colors better
  • custom colors and styles support provides handy API to change specific styles without boilerplate

Use cases:

  • explain/document your code by flowcharts
  • learn other's code by visual understanding
  • create flowcharts for any process simply described by valid JS syntax

CLI

You can simply generate SVG files from your local JS files using CLI tool. Install js2flowchart globally by running:

yarn global add js2flowchart

Or in a project by running:

yarn add js2flowchart --dev

Open terminal and navigate to needed directory with JS file you want to visualize (e.g. './my-project/main.js'). Run the command (if you installed it globally)

js2flowchart main.js

Or add this to your package.json file:

{
  "scripts": {
    "js2flowchart": "js2flowchart"
  }
}

And run (with either npm or yarn):

yarn run js2flowchart main.js

After script is executed observe log SVG file was created: ./js2flowchart/main.js.svg. SVG file will be placed in new directory '/js2flowchart' near your JS file.

API and examples

You can find sources for examples explained below in docs directory.

In examples only js2flowchart library included explicitly, by

Comments
  • JSX recognition -  is in the plans?

    JSX recognition - is in the plans?

    captura de tela 2017-11-08 as 23 57 10 Hey guys, jsx is on the roadmap for the tool? If it is I want to make. Just made a visual studio extension with this, but for really be useful I need the jsx be parsed together with the js.

    opened by LucasBadico 10
  • API for bigger boxes

    API for bigger boxes

    This is a similar issue to #16

    We use this for documentation of what some people write in their tools (Similar to Google Tag Manager). Is there a way to allow bigger boxes? The code is always very simple, but the variable names are quite long…

    opened by jonnitto 6
  • Error parsing react component

    Error parsing react component

    When I tried to parse my first jsx, I got this error but I see no reference to classProperties in github documentation. Am I missing something?

    Error at parseCodeToAST: This experimental syntax requires enabling the parser plugin: 'classProperties' (29:21)
    <user-home>/.config/yarn/global/node_modules/js2flowchart/dist/js2flowchart.js:40029
            throw e;
            ^
    
    SyntaxError: This experimental syntax requires enabling the parser plugin: 'classProperties' (29:21)
        at _class.raise (/Users/bkarumuri/.config/yarn/global/node_modules/js2flowchart/dist/js2flowchart.js:15623:15)
        at _class.expectPlugin (/Users/bkarumuri/.config/yarn/global/node_modules/js2flowchart/dist/js2flowchart.js:16913:18)
        at _class.parseClassProperty (/Users/bkarumuri/.config/yarn/global/node_modules/js2flowchart/dist/js2flowchart.js:19716:12)
        at _class.parseClassProperty (/Users/bkarumuri/.config/yarn/global/node_modules/js2flowchart/dist/js2flowchart.js:24483:55)
        at _class.pushClassProperty (/Users/bkarumuri/.config/yarn/global/node_modules/js2flowchart/dist/js2flowchart.js:19683:30)
        at _class.parseClassMemberWithIsStatic (/Users/bkarumuri/.config/yarn/global/node_modules/js2flowchart/dist/js2flowchart.js:19616:14)
        at _class.parseClassMemberWithIsStatic (/Users/bkarumuri/.config/yarn/global/node_modules/js2flowchart/dist/js2flowchart.js:24389:58)
        at _class.parseClassMember (/Users/bkarumuri/.config/yarn/global/node_modules/js2flowchart/dist/js2flowchart.js:19553:10)
        at _class.parseClassMember (/Users/bkarumuri/.config/yarn/global/node_modules/js2flowchart/dist/js2flowchart.js:24346:46)
        at _class.parseClassBody (/Users/bkarumuri/.config/yarn/global/node_modules/js2flowchart/dist/js2flowchart.js:19508:12)
    
    opened by KBPratap 5
  • Unresolved theme

    Unresolved theme

    What happened

    After modifying index.cli.js (to add the features the non-CLI part has) and adding prettier as a dev dependency as this project would need to explicitly list what it needs for the development and I didn't had prettier before running npm run pretty (to prettify index.cli.js which wasn't included in the list of scripts to prettify (I assume it's intentional?).

    Then when I tried to run

    npm run dev
    

    To test my changes (I've only added the abstraction level support for the CLI app for now). I then had the following output:

    > [email protected] dev /home/maxie/Dropbox/Contribs/js-code-to-svg-flowchart
    > webpack --progress --colors --watch --env dev
    
      0% compiling
    Webpack is watching the files…
    
    Hash: 899081726ffba20abcdf                                                              
    Version: webpack 3.1.0
    Time: 2688ms
                  Asset     Size  Chunks                    Chunk Names
        js2flowchart.js   1.2 MB       0  [emitted]  [big]  main
    js2flowchart.js.map  1.53 MB       0  [emitted]         main
       [4] ./src/shared/constants.js 2.86 kB {0} [built]
      [68] ./src/builder/entryDefinitionsMap.js 11.2 kB {0} [built]
     [110] ./src/shared/utils/logger.js 175 bytes {0} [built]
     [111] ./src/shared/utils/traversal.js 1.52 kB {0} [built]
     [114] ./src/builder/FlowTreeBuilder.js 4.8 kB {0} [built]
     [180] ./src/builder/astBuilder.js 4.84 kB {0} [built]
     [183] ./src/render/svg/SVGRender.js 5.44 kB {0} [built]
     [184] ./src/shared/utils/flatten.js 583 bytes {0} [built]
     [187] ./index.js 2.4 kB {0} [built]
     [447] ./src/builder/abstractionLevelsConfigurator.js 2.37 kB {0} [built]
     [449] ./src/builder/FlowTreeModifier.js 2.14 kB {0} [built]
     [450] ./src/builder/modifiers/modifiersFactory.js 4.14 kB {0} [built]
     [451] ./src/render/svg/appearance/StyleThemeFactory.js 2.69 kB {0} [built]
     [454] ./src/render/svg/svgObjectsBuilder.js 6.48 kB {0} [built]
     [483] ./src/presentation-generator/PresentationGenerator.js 2.94 kB {0} [built]
        + 469 hidden modules
    
    ERROR in ./src/render/svg/appearance/StyleThemeFactory.js
    Module not found: Error: Can't resolve './themes/LIGHT' in '/home/maxie/Dropbox/Contribs/js-code-to-svg-flowchart/src/render/svg/appearance'
     @ ./src/render/svg/appearance/StyleThemeFactory.js 24:13-38
     @ ./src/render/svg/SVGRender.js
     @ ./index.js
    Hash: c49ab773c1535172d5a7                                                         
    Version: webpack 3.1.0
    Time: 545ms
                  Asset     Size  Chunks                    Chunk Names
        js2flowchart.js   1.2 MB       0  [emitted]  [big]  main
    js2flowchart.js.map  1.53 MB       0  [emitted]         main
     [451] ./src/render/svg/appearance/StyleThemeFactory.js 2.69 kB {0} [built]
     [484] ./src/render/svg/appearance/themes/Light.js 867 bytes {0} [built]
        + 483 hidden modules
    

    What I tried

    I then modified the StyleThemeFactory.js file to fix that issue

    Environment

    OS: Linux 4.13 64-bit ArchLinux Terminal: xfce4-terminal (that uses bash)

    opened by Berkmann18 4
  • Project support

    Project support

    I've seen that the multi-file support was on the TODO list but as that could mean supporting * ops (e.g: *.js) as well as projects, I was wondering which one it was and if it was the latter, then my question would be: Will it know about the data-structures that a module (e.g: main.js) uses from another one (regardless of whether it's NodeJS/ES6 modules? Example in NodeJS (the same could be said for ES6 modules): main.js

    let aModule = require('./aModule');
    
    // some code here
    aModule.doSomething();
    

    I'm aware that the latter would possibly require a filter to prevent this generator to go deep in the (yarn|node)_modules or any library files that aren't really part of the project so I'm willing to help (if there's need).

    opened by Berkmann18 4
  • Integration of the abstraction support in the CLI app and more

    Integration of the abstraction support in the CLI app and more

    Essentially, the CLI script can now generate abstracted SVG files off js files passed as arguments (including the possibility to use several layers). I also added content and improved the README.md file; prettified most sources files (including the index.cli.js script). The project also has more accurate dependency list.

    opened by Berkmann18 3
  • For in Failure

    For in Failure

    function test () { let demo = {'A': 1, 'B': 2} for (let key in demo) { } }

    The diagram on the online demo fails to change unless change condition declaration:

    function test2 () { let demo = {'A': 1, 'B': 2} let key for (key in demo) { } }

    opened by R42O 3
  • missing code at the end

    missing code at the end

    return React.createElement(
          ApolloProvider,
          { client: client },
          React.createElement(
    MyNews, null)
        );
    

    throws something like:

    image without error.

    I tested it with online editor and got the same behavior.

    opened by j2l 3
  • Width problem of multibyte characters

    Width problem of multibyte characters

    The width of multibyte characters text like emoji, Japanese, Chinese over the width of background shape.

    image

    Reproduce code:

    while("♥♥♥♥♥♥♥♥♥♥"){
      
    }
    
    opened by azu 3
  • `for(;;)` is not handled.

    `for(;;)` is not handled.

    function q() {
        for(;;) {
        	console.log("dsfsdf"); 
        }
    }
    

    The diagram on the online demo fails to change unless I add loop condition.

    opened by vi 3
  • feat: support optionalChaining & nullishCoalscingOperator

    feat: support optionalChaining & nullishCoalscingOperator

    WHAT

    • Support optionalChaining & nullishCoalscingOperator

    WHY

    • Try to resolve this error
    SyntaxError: This experimental syntax requires enabling the parser plugin: 'optionalChaining' (10:46)
        at Object.raise (/Users/huynhducdung/.config/yarn/global/node_modules/js2flowchart/dist/js2flowchart.js:1:210466)
    

    HOW

    • Add to AST Parser
    'optionalChaining',
    'nullishCoalescingOperator'
    

    Screenshots (if appropriate):

    Types of changes

    • [x] Bug fix (non-breaking change which fixes an issue)
    • [ ] New feature (non-breaking change which adds functionality)
    • [ ] Breaking change (fix or feature that would cause existing functionality to change)

    Checklist:

    • [x] Linter
    • [x] Tests
    • [ ] Review comments
    • [ ] Security
    opened by jellydn 2
  • Upgrade CodeSee workflow to version 2

    Upgrade CodeSee workflow to version 2

    CodeSee is a code visibility platform.

    This change updates the CodeSee workflow file to the latest version for security, maintenance, and support improvements (see changelog below).

    That workflow file:

    • runs CodeSee's code analysis on every PR push and merge
    • uploads that analysis to CodeSee.
    • It does not transmit your code.

    The code analysis is used to generate maps and insights about this codebase.

    CodeSee workflow changelog:

    • Improved security: Updates permission to be read-only.
    • Improved future maintenance: Replaces the body of the workflow with a single github action: codesee-action. This makes it significantly easier for CodeSee to introduce future improvements and fixes without requiring another PR like this.
    • Improved Python support: The action now properly supports Python 3.11, and will continue to support new Python versions as they are released.
    opened by codesee-maps[bot] 0
  • Bump decode-uri-component from 0.2.0 to 0.2.2

    Bump decode-uri-component from 0.2.0 to 0.2.2

    Bumps decode-uri-component from 0.2.0 to 0.2.2.

    Release notes

    Sourced from decode-uri-component's releases.

    v0.2.2

    • Prevent overwriting previously decoded tokens 980e0bf

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.1...v0.2.2

    v0.2.1

    • Switch to GitHub workflows 76abc93
    • Fix issue where decode throws - fixes #6 746ca5d
    • Update license (#1) 486d7e2
    • Tidelift tasks a650457
    • Meta tweaks 66e1c28

    https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.0...v0.2.1

    Commits

    Dependabot compatibility score

    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
  • Bump minimatch from 3.0.4 to 3.1.2

    Bump minimatch from 3.0.4 to 3.1.2

    Bumps minimatch from 3.0.4 to 3.1.2.

    Commits

    Dependabot compatibility score

    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
  • Bump loader-utils from 1.1.0 to 1.4.2

    Bump loader-utils from 1.1.0 to 1.4.2

    Bumps loader-utils from 1.1.0 to 1.4.2.

    Release notes

    Sourced from loader-utils's releases.

    v1.4.2

    1.4.2 (2022-11-11)

    Bug Fixes

    v1.4.1

    1.4.1 (2022-11-07)

    Bug Fixes

    v1.4.0

    1.4.0 (2020-02-19)

    Features

    • the resourceQuery is passed to the interpolateName method (#163) (cd0e428)

    v1.3.0

    1.3.0 (2020-02-19)

    Features

    • support the [query] template for the interpolatedName method (#162) (469eeba)

    v1.2.3

    1.2.3 (2018-12-27)

    Bug Fixes

    • interpolateName: don't interpolated hashType without hash or contenthash (#140) (3528fd9)

    v1.2.2

    1.2.2 (2018-12-27)

    Bug Fixes

    ... (truncated)

    Changelog

    Sourced from loader-utils's changelog.

    1.4.2 (2022-11-11)

    Bug Fixes

    1.4.1 (2022-11-07)

    Bug Fixes

    1.4.0 (2020-02-19)

    Features

    • the resourceQuery is passed to the interpolateName method (#163) (cd0e428)

    1.3.0 (2020-02-19)

    Features

    • support the [query] template for the interpolatedName method (#162) (469eeba)

    1.2.3 (2018-12-27)

    Bug Fixes

    • interpolateName: don't interpolated hashType without hash or contenthash (#140) (3528fd9)

    1.2.2 (2018-12-27)

    Bug Fixes

    ... (truncated)

    Commits
    Maintainer changes

    This version was pushed to npm by evilebottnawi, a new releaser for loader-utils since your current version.


    Dependabot compatibility score

    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
  • Internal Binding Error:  this.input.charCodeAt is not a function

    Internal Binding Error: this.input.charCodeAt is not a function

    Error at parseCodeToAST: this.input.charCodeAt is not a function node:internal/process/esm_loader:108 internalBinding('errors').triggerUncaughtException( ^

    TypeError: this.input.charCodeAt is not a function


    TypeError: this.input.charCodeAt is not a function at at.skipSpace (~\js2flowchart\dist\js2flowchart.js:1:214760) at at.nextToken (~\js2flowchart\dist\js2flowchart.js:1:213390) at at.parse (~\js2flowchart\dist\js2flowchart.js:1:298151) at t.parse (~\js2flowchart\dist\js2flowchart.js:1:299385) at Y (~\js2flowchart\dist\js2flowchart.js:8:131355) at Object.buildAst (~\js2flowchart\dist\js2flowchart.js:8:140579) at Object.build (~\js2flowchart\dist\js2flowchart.js:8:140502) at file:///~/js2Flowchart.js:37:34 at ModuleJob.run (node:internal/modules/esm/module_job:193:25) at async Promise.all (index 0)

    opened by gitmeto 0
  • Bump mixin-deep from 1.3.1 to 1.3.2

    Bump mixin-deep from 1.3.1 to 1.3.2

    Bumps mixin-deep from 1.3.1 to 1.3.2.

    Commits
    Maintainer changes

    This version was pushed to npm by doowb, a new releaser for mixin-deep since your current version.


    Dependabot compatibility score

    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
Owner
Bohdan Liashenko
Solving problems around learning and maintaining code within complex codebase. Founder at codecrumbs.io. Follow me on twitter @bliashenko.
Bohdan Liashenko
Muze is a free data visualization library for creating exploratory data visualizations (like Tableau) in browser

Composable data visualisation library for web with a data-first approach now powered by WebAssembly

Charts.com 1.2k Jan 5, 2023
Reactochart is a library of React components for creating data visualization charts and graphs.

Reactochart is a library of React components for creating data visualization charts and graphs. Components include line chart, bar chart, area chart, heat maps, scatterplot, histogram, pie chart, sankey diagram, and tree map.

Spotify 530 Dec 26, 2022
BizCharts - Powerful data visualization library based on G2 and React.

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

Alibaba 6k Dec 28, 2022
Create beautiful JavaScript charts with one line of React

React Chartkick Create beautiful JavaScript charts with one line of React See it in action Supports Chart.js, Google Charts, and Highcharts Quick Star

Andrew Kane 1.2k Dec 28, 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 Jan 5, 2023
🐯 visx | visualization components

visx visx is a collection of reusable low-level visualization components. visx combines the power of d3 to generate your visualization with the benefi

Airbnb 16.5k Jan 7, 2023
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

nteract 2.3k Dec 29, 2022
Data Visualization Component

react-charty This component was born from the Telegram programming contest where I took one of the prize places. A big thanks to the Telegram team and

Aleksandr Telegin 64 Oct 20, 2022
A thin, typed, React wrapper over Google Charts Visualization and Charts API.

React Google Charts A thin, typed, React wrapper for Google Charts. Docs and examples. React Google Charts Docs and examples. Installation Quick Start

Rakan Nimer 1.4k Jan 4, 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 Dec 27, 2022
visx is a collection of reusable low-level visualization components.

visx is a collection of reusable low-level visualization components. visx combines the power of d3 to generate your visualization with the benefits of react for updating the DOM.

Airbnb 16.5k Jan 9, 2023
Reactive Polyomino Packing for Interactive Data visualization

Reactive Polymino Packing (RPP) Reactive Polymino Packing algorithm is developed to introduced interactivity within a packed layout of arbitrarily sha

Sarah Abdelkhalek 7 Apr 9, 2022
This is a visualization tool for sorting algorithms made using React JS

This is a visualization tool for sorting algorithms made using React JS. I made this project to help me comprehend the working of the sorting algorithms.

Harsh 20 Dec 15, 2022
Tanyoung Kim 27 Nov 12, 2021
A thin, typed, React wrapper over Google Charts Visualization and Charts API.

A thin, typed, React wrapper for Google Charts. Docs and examples. React Google Charts Docs and examples. Installation Quick Start

Rakan Nimer 1.4k Jan 6, 2023
This is React Signals Plot component for geophysical data visualization.

React Signals Plot This is React Signals Plot component for geophysical data visualization. The component supports 'on the fly' data compression. That

Roman Guseinov 0 Jun 27, 2020
Casual data visualization framework, built on top of D3.js

d3 wrapper for casual data visualization Status v0.1.0 (alpha release), the npm package is available. The static bundle file is not supplied at now. I

Suzume Nomura 2 Dec 9, 2021
React component for Globe Data Visualization using ThreeJS/WebGL

react-globe.gl React bindings for the globe.gl UI component. A React component to represent data visualization layers on a 3-dimensional globe in a sp

Vasco Asturiano 521 Dec 30, 2022
A simple Covid 19 dashboard analytics visualization developed with React and Ant Design

A simple Covid 19 dashboard analytics visualization developed with React and Ant Design

null 1 Jan 6, 2022