Data Visualization Components

Overview

version build build downloads

react-vis | Demos | Docs

A COMPOSABLE VISUALIZATION SYSTEM

demo

Overview

A collection of react components to render common data visualization charts, such as line/area/bar charts, heat maps, scatterplots, contour plots, hexagon heatmaps, pie and donut charts, sunbursts, radar charts, parallel coordinates, and tree maps.

Some notable features:

  • Simplicity. react-vis doesn't require any deep knowledge of data visualization libraries to start building your first visualizations.
  • Flexibility. react-vis provides a set of basic building blocks for different charts. For instance, separate X and Y axis components. This provides a high level of control of chart layout for applications that need it.
  • Ease of use. The library provides a set of defaults which can be overridden by the custom user's settings.
  • Integration with React. react-vis supports the React's lifecycle and doesn't create unnecessary nodes.

Usage

Install react-vis via npm.

npm install react-vis --save

Include the built main CSS file in your HTML page or via SASS:

@import "~react-vis/dist/style";

You can also select only the styles you want to use. This helps minimize the size of the outputted CSS. Here's an example of importing only the legends styles:

@import "~react-vis/dist/styles/legends";

Import the necessary components from the library...

import {XYPlot, XAxis, YAxis, HorizontalGridLines, LineSeries} from 'react-vis';

… and add the following code to your render function:

<XYPlot
  width={300}
  height={300}>
  <HorizontalGridLines />
  <LineSeries
    data={[
      {x: 1, y: 10},
      {x: 2, y: 5},
      {x: 3, y: 15}
    ]}/>
  <XAxis />
  <YAxis />
</XYPlot>

If you're working in a non-node environment, you can also directly include the bundle and compiled style using basic html tags.

<link rel="stylesheet" href="https://unpkg.com/react-vis/dist/style.css">
<script type="text/javascript" src="https://unpkg.com/react-vis/dist/dist.min.js"></script>

The global reactVis object will now be available for you to play around.

You can checkout these example CodePens: #1, #2, #3 or #4

More information

Take a look at the folder with examples or check out some docs:

Development

To develop on this component, install the dependencies and then build and watch the static files:

npm install && npm run start

Once complete, you can view the component's example in your browser (will open automatically). Any changes you make to the example code will run the compiler to build the files again.

To lint your code, run the tests, and create code coverage reports:

npm run full-test

Requirements

react-vis makes use of ES6 array methods such as Array.prototype.find. If you make use of react-vis, in an environment without these methods, you'll see errors like TypeError: Server rendering error: Object x,y,radius,angle,color,fill,stroke,opacity,size has no method 'find'. You can use babel-polyfill to polyfill these methods.

Issues
  • Typescript definition file generator

    Typescript definition file generator

    Tool consist of too scripts:

    generate-types.js creates typescript definition file index.d.ts in root folder for whole library based on specified prop-types.

    generate-modules.js creates *.d.ts files in es and dist folders. Each file just re-exports declaration from index.d.ts for individual component. This covers case with partial imports like import XAxis from 'react-vis/es/plot/axis/x-axis';

    opened by evgsil 28
  • Brush Component

    Brush Component

    Did you consider to add a brush component to the Charts ?. I think it's would be useful for filter the data through the selection or made some kind of zoom into. Thanks

    enhancement 
    opened by k010 23
  • Build examples separately with own dependencies

    Build examples separately with own dependencies

    • [x] Build main.js docs with webpack
    • [x] Fix build steps don't conflicts with new directory structure (recommendation by @Apercu)
    • [x] Added support for eslint-plugin-import for better refactoring safety
    • [x] Make sure examples work with styles, add webpack rule for sass
    • [x] Ensure examples are 0.14.0 and 0.15.0 compatible
    • [x] Add build step for each set of examples
    • [x] Change directory structure (pluralize example dir, move examples and tests to root dir)
    opened by amilajack 22
  • Added inital complex-chart example

    Added inital complex-chart example

    This PR was made as a follow up to https://github.com/uber/react-vis/pull/233, which was too large of a PR to be reviewed. This is an example of what other following examples should look like. Comments on the example in this PR will be reflected in examples that will be written later.

    Here's a summary of what this PR adds for the complex-chart example:

    • [x] Creates a ./examples directory for where the current and future examples will be located
    • [x] babel-loader integration. https://github.com/uber/react-vis/pull/233 used buble-loader. I was having module loader issues with this today so I used babel-loader as a (temporary?) replacement.
    • [x] Aliased react-vis to '../../dist'. babel-plugin-module-resolver was preventing webpack from resolving the index alias created by babel-plugin-module-resolver
    • [x] Created a ./examples/examples.scss, borrowed from the original ./src/example/main.scss
    • [x] Borrowed ./examples/complex-chart/complex-chart-example.js from ./showcase/plot/complex-chart.js
    • [x] Add react-addons-shallow-compare to ./examples/complex-chart/package.json's dependencies
    • [x] Add react to ./examples/complex-chart/package.json's dependencies
    docs 
    opened by amilajack 21
  • Responsive graphs (question)

    Responsive graphs (question)

    What would be the preferred/best practice way to make the graphs dynamic in width/height for a responsive design?

    docs 
    opened by bytewiz 19
  • Unknown plugin

    Unknown plugin "module-resolver"

    I'm getting this error:

    .../node_modules/react-vis/dist/index.js: Unknown plugin "module-resolver" specified in 
    ".../node_modules/react-vis/package.json" at 0
    

    Versions: npm: 5.5.1 react-vis: 1.8.0 react: 16.2.0 parcel-bundler: 1.2.0

    opened by Olian04 18
  • Added stylelint and stylefmt support

    Added stylelint and stylefmt support

    • [x] Added stylelint and stylefmt support
    • [x] Conformed all styles to convention
    style tests 
    opened by amilajack 17
  • Stateless function components cannot be given refs. Attempts to access this ref will fail

    Stateless function components cannot be given refs. Attempts to access this ref will fail

    Following errors thrown while trying to render a Line Chart from the demo here.

    Image

    Steps to reproduce

    • Create a new react app using CRA
    • Add react-vis to dependencies
    • Create a Component with following content
    
    import React from 'react';
    
    import {
      XYPlot,
      XAxis,
      YAxis,
      HorizontalGridLines,
      VerticalGridLines,
      LineSeries
    } from 'react-vis';
    
    export default class Example extends React.Component {
      render() {
        return (
          <XYPlot
            width={300}
            height={300}>
            <HorizontalGridLines />
            <VerticalGridLines />
            <XAxis title="X Axis" position="start"/>
            <YAxis title="Y Axis"/>
            <LineSeries
              className="first-series"
              data={[
                {x: 1, y: 3},
                {x: 2, y: 5},
                {x: 3, y: 15},
                {x: 4, y: 12}
              ]}/>
            <LineSeries
              className="second-series"
              data={null}/>
            <LineSeries
              className="third-series"
              curve={'curveMonotoneX'}
              style={{
                strokeDasharray: '2 2'
              }}
              data={[
                {x: 1, y: 10},
                {x: 2, y: 4},
                {x: 3, y: 2},
                {x: 4, y: 15}
              ]}
              strokeDasharray="7, 3"
              />
            <LineSeries
              className="fourth-series"
              data={[
                {x: 1, y: 7},
                {x: 2, y: 11},
                {x: 3, y: 9},
                {x: 4, y: 2}
              ]}/>
          </XYPlot>
        );
      }
    }
    
    • Import it to App.js
    import React, { Component } from 'react';
    import LineChart from './LineChart';
    import './App.css';
    
    class App extends Component {
      render() {
        return (
          <LineChart />
        );
      }
    }
    
    export default App;
    
    • Do a yarn start and see the console.

    • package.json

    {
      "name": "my-app",
      "version": "0.1.0",
      "private": true,
      "dependencies": {
        "react": "^16.4.1",
        "react-dom": "^16.4.1",
        "react-scripts": "1.1.4",
        "react-vis": "^1.10.1"
      },
      "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test --env=jsdom",
        "eject": "react-scripts eject"
      }
    }
    

    My guess is that the XYPlot component in function _getClonedChildComponents is adding ref to the props of the child components, while the children can easily be SFCs (In the example above the components HorizontalGridLines,VerticalGridLines,XAxis,YAxis are all SFC inside XYPlot component, hence the 4 exceptions) and in that case the exception is thrown.

    opened by nabinked 17
  • React Error:

    React Error: "Element ref was specified as a string (series0) but no owner was set."

    I'm noticing an error when I use react-vis in an npm package that I then import into another product.

    In my project, the parent package is the "App" and the child package contains re-usable components including the XYPlot from the Getting Started section of the documentation

    The plot renders fine when I view it in the child project but shows the following error when imported into the parent:

    Element ref was specified as a string (series0) but no owner was set. You may have multiple copies of React loaded. (details: https://fb.me/react-refs-must-have-owner).

    I'm really new react so I'm not 100% sure I haven't done something wrong but I thought others might have seen this already.

    Update:

    I realize this isn't much to go on but there are too many moving pieces for a really good repro description so I made a simple repo using create-react-app with two linked projects that "seems" to reproduce this error.

    https://github.com/MattReimer/react-vis-repro-736

    Repo steps:

    1. Clone the repo
    2. yarn install in both child and parent
    3. Link the child to the parent and boot up the parent:
    cd child
    yarn link
    cd ../parent
    yarn link child
    
    yarn start
    

    I'm really hoping this is something I'm doing wrong.

    try to replicate 
    opened by MattReimer 16
  • zoomable chart

    zoomable chart

    hey I'm new for react chart I face a problem I only want zoomable chart to work can someone told me the steps or the files I need to use it thank you

    opened by azmahmad 16
  • Bump shelljs from 0.8.4 to 0.8.5

    Bump shelljs from 0.8.4 to 0.8.5

    Bumps shelljs from 0.8.4 to 0.8.5.

    Release notes

    Sourced from shelljs's releases.

    v0.8.5

    This was a small security fix for #1058.

    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
  • Stroke color in CSS

    Stroke color in CSS

    Is there a way to provide the stroke color in CSS. I tried overriding .rv-xy-plot__series--line, but it still uses the default color. Basically, I want to be able provide default colors (themes) for my app instead of passing style properties for every component. Is there a way to "theme" react-vis?

    Thanks Anand

    opened by nanandn 0
  • X-Axis shows rgb values instead of actual label

    X-Axis shows rgb values instead of actual label

    Hello, i encountered a problem which leads to react-vis displaying rgb values instead of the actual label. This happens when the lable is a CSS color name like "Black". I encountered the Problem when displaying statistics about different countries, that's where the "Peru" is coming from. I reproduced it by manually setting a X-Value of my data to "Black".

    Reproduce the issue: Use a dataset like

    const myData = [
      {x: 'Black', y: 10},
      {x: 'Peru', y: 5}
    ]
    

    with a XYPlot and VertiacalBarSeries or LineSeries

    Expected behavior: The tick labels on the X-Axis show Black and Peru

    Actual behavior: The tick labels on the X-Axis show rgb(0, 0, 0) and rgb(205, 133, 63)

    Example Here an example, it can be seen that the "Peru" label is displayed as the CSS rgb value, while the others are displayed correctly. image

    opened by WilliBoelke 0
  • npm ERR! peer react@

    npm ERR! peer [email protected]"15.3.0 - 16.x" from [email protected] with NPM 7 or above install

    Please update & test to latest react version, although it can be ignored by -- force with NPM or downgrade to NPM 6*, but a bit annoying to see it print out in my console. peer [email protected]"15.3.0 - 16.x" from [email protected]

    The complete error below:

    npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: [email protected] // this my project name, ignore it. npm ERR! Found: [email protected]
    npm ERR! node_modules/react npm ERR! [email protected]"^17.0.2" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer [email protected]"15.3.0 - 16.x" from [email protected] // does not work with NPM 7, unless --force npm ERR! node_modules/react-vis npm ERR! [email protected]"^1.11.7" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force, or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution. npm ERR! npm ERR! See C:\Users\Steven.bi\AppData\Local\npm-cache\eresolve-report.txt for a full report.

    npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\Steven.bi\AppData\Local\npm-cache_logs\2021-10-28T02_42_43_485Z-debug.log

    opened by Chen-BBe 0
  • FlexibleXYPlot Warning: componentWillReceiveProps has been renamed, and is not recommended for use

    FlexibleXYPlot Warning: componentWillReceiveProps has been renamed, and is not recommended for use

    Hi, Using FlexibleXYPlot I'm getting this warning:

    VM34227 react_devtools_backend.js:2526 Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://reactjs.org/link/unsafe-component-lifecycles for details.
    
    * Move data fetching code or side effects to componentDidUpdate.
    * If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://reactjs.org/link/derived-state
    * Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 18.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.
    
    Please update the following components: FlexibleXYPlot
    

    Should the component be updated with latest React 18 specs?

    opened by gygabyte017 0
  • Chart not accurate

    Chart not accurate

    Cannot figure out why chart with react-vis differ so much from same chart with recharts. Why it is so wrong? And different curves didn't help... This is a price chart. I compared it to an external program - Tradingview and the recharts is pretty accurate. Cannot understand what is wrong. Pictures are attached

    time is in ms

                <XYPlot getX={(d: any) => d.time} getY={(d: any) => d.price} width={1900} height={880}>
                    <Line
                        data={dataSnap.data as any[]}
                        size={3}
                        fill='blue'
                        // curve='curveLinear'
                    />
                    <XAxis
                        // tickValues={data.map((d) => d.timestamp)}
                        tickTotal={10}
                        tickFormat={(v) => {
                            return dayjs(v).format('mm')
                            // return dayjs(v).format('HH-mm-ss-sss')
                        }}
    
                        // tickTotal={100}
                    />
                    <YAxis width={70} tickTotal={10} />
                </XYPlot>
    
    opened by lishine 3
  • HorizontalBarSeries y can't be string

    HorizontalBarSeries y can't be string

    In the documentation, the y field says: "Type: (Horizontal Bar Series): string | number". But in practice, the y field can only be a number. Example:

    <XYPlot width={300} height={300}>
      <HorizontalBarSeries
        data={[
          { y: "APPLE", x: 7 },
          { y: "BANANA", x: 10 }
        ]}
      />
    </XYPlot>
    

    That code throws many errors on the console. But if we put an int in the y field, then everything will work.

    opened by NEsanya 2
  • Fix broken link for examples

    Fix broken link for examples

    null

    opened by jkklapp 2
  • Treemap onLeafClick only returns event

    Treemap onLeafClick only returns event

    Documentation here https://github.com/uber/react-vis/blob/master/docs/treemap.md says that onLeafClick "Should accept arguments (leafNode, domEvent)" but when I console.log the values returned in the callback, I only get the event.

    How can I get the actual leafNode ?

    opened by bdegraf 0
Releases(v1.11.7)
  • v1.11.7(Apr 19, 2019)

    • Missing colon on series.md (#1087)
    • Docs: simplify usage (#1094)
    • Alphabetize imports (#1105)
    • Add className functionality to Hint and GridLines (#1008)
    • Fix a misnamed prop in colors doc (#1127)
    • Fix a typo (#1133)
    • Fix/inconsistent proptypes of discrete color legend (#1147)
    • Fix webpack windows build issue(#940) (#1144)
    • Update LabelSeries doc with a link that has more info on svg-text (#1150)
    • Fix stacking together different series types (#1037) (#1145)
    Source code(tar.gz)
    Source code(zip)
  • v1.11.6(Jan 14, 2019)

    • Update treemap docs (#1044)
    • Adding invert method to ordinal scale (#1046)
    • Update Hint and Crosshair to display Dates (#1077)
    • Update CustomSVGSeries to use getX / getY (#1051)
    • Fixes undefined X and Y of onNearestXY (#1000)
    • Add hovering example for heatmap series (#1078)
    Source code(tar.gz)
    Source code(zip)
  • 1.11.5(Nov 21, 2018)

    • Fixing BarSeries overlapped (#944)
    • Remove bad npm refs (#1025)
    • Install a pre-push hook for removing bad npm refs (#1026)
    • Fix showcase duplicate props (#1030)
    • More flexibility when rendering tick labels with tickFormat (#1019)
    • Remove unnecessary columns (#1035)
    • Use dominant baseline instead of alignment for consistent rendering (#1034)
    • Construct Chart Label (#1038)
    Source code(tar.gz)
    Source code(zip)
  • v1.11.4(Oct 24, 2018)

  • 1.11.3(Oct 15, 2018)

    • Run sort-comp Codemod (#964)
    • Docs fixes (#974)
    • Gitignore Showcase bundles (#969)
    • Fix markdown formatting. (#982)
    • Update doc routes, center all the docs examples (#979)
    • Add iris dashboard (#976)
    • Delete history example (#975)
    • Add example of difference bar chart (#990)
    • Fix lint errors (#977)
    • Add stroke properties to discrete color legend (#860) (#994)
    • Make props in documentation easier to parse (#984) (#993)
    • Propagate props for discrete color legend (#998)
    • Update HotizontalDiscreteColor example to show off stroke styles (#1001)
    • Run create-element-to-jsx Codemod (#961)
    • Run pure-component Codemod (#965)
    • Run manual-bind-to-arrow Codemod (#963)
    • Radar chart tooltips (#992)
    Source code(tar.gz)
    Source code(zip)
  • 1.11.2(Sep 21, 2018)

  • v1.11.1(Sep 10, 2018)

    • Add Brushing Functionality (#939)
    • Add Hexbin Series (#926)
    • Update Highlight Component (#938)
    • Fix Problematic Dependencies (#948)
    • Fix Showcase Links (#946)
    • Move flare to the correct spot (#955)
    • Fix LineSeriesCanvas - onNearestXY not called (#931)
    Source code(tar.gz)
    Source code(zip)
  • v1.11.0(Sep 7, 2018)

  • 1.10.7(Aug 26, 2018)

  • 1.10.6(Aug 23, 2018)

    • Include option for padAngle on RadialChart (#920)
    • Enable per label rotation on sankey (#918)
    • Make voronoi component automatically infer scales and extent (#917)
    • Fix horizontal position for sankey chart labels (#916)
    • Center sankey chart labels (#915)
    Source code(tar.gz)
    Source code(zip)
  • 1.10.5(Aug 20, 2018)

    • Enable rotation of sankey labels (#905)
    • Add curves to LineSeriesCanvas (#880)
    • Reorder out-of-order canvas arguments (#904)
    • Fix typo in color series (#912)
    Source code(tar.gz)
    Source code(zip)
  • v1.10.4(Jul 18, 2018)

  • v1.10.3(Jul 11, 2018)

  • v1.10.2(Jul 11, 2018)

    • Fix documentation links (#844)
    • Align onParentEventType callbacks across XYPlot (#857)
    • Add an example of using gradients in radial charts (#864)
    • Stop Setting Refs On Stateless Components (#867)
    Source code(tar.gz)
    Source code(zip)
  • v1.10.1(Jul 2, 2018)

  • v1.10.0(Jun 28, 2018)

    • Allow setting scale and tickTotal on axis tickFormat #791
    • Fix build error from hoek #819
    • Center Sankey label #824
    • Improve docs #820 #831 #829 #827 #832
    • Duplicate style cleanup #841
    • Update ref="string" to ref={fn} #840
    • Fix hint alignment in example site #741
    • Fix RadarChart axes #842
    Source code(tar.gz)
    Source code(zip)
  • v1.9.4(May 28, 2018)

  • 1.9.3(May 4, 2018)

    • docs website now uses storybook (#753, #756, #760, #763, #766, #773, #777)

    • a number of typos fixes either in docs or code (#764, #767, #772, #783, #784, #793, #794)

    • some library upgrades (#748, #799, #800)

    • Touch behaviors (#754 )

    • google analytics tracker on website (#761 )

    • Better PropType validation for data in AbstractSeries; Tests for using Accessors (#765 )

    • Add ability to manually set label text alignment for label-series (#768)

    Source code(tar.gz)
    Source code(zip)
  • v1.9.1(Mar 2, 2018)

  • v1.9.0(Mar 2, 2018)

  • v1.7.6(Sep 19, 2017)

  • v1.7.3(Aug 28, 2017)

    Features: Right-click handling on series, Mouse up and mouse down events on Voronoi, Label rotation on sunburst, SVG mode on Treemap,

    Fixes: Component name as fallback for display name, Broken link in github pages Arc listeners respect event order during animation,

    Documentation: New candlestick example, Sunburst and reverse docs, Orientation on DiscreteColorLegend

    Source code(tar.gz)
    Source code(zip)
  • v1.7.1(Aug 14, 2017)

    Feature: Add labels to sunburst nodes Feature: New series, custom svg series. For placing custom SVG in coordinate space Example: Added example based on git history of project

    Source code(tar.gz)
    Source code(zip)
  • v1.7.2(Aug 14, 2017)

    Feature: New series Whisker plots, for all your variance encoding needs Feature: add mouse events to discrete legend Feature: Export flexible plots

    Docs cleanup

    Source code(tar.gz)
    Source code(zip)
  • v1.6.7(Jul 7, 2017)

  • v1.6.1(Jun 21, 2017)

  • v1.6.0(Jun 19, 2017)

  • v1.4.0(Apr 10, 2017)

    This release adds a new top level chart type 🎉🎉🎉🎉🎉 the sunburst chart! Checkout the docs for more information

    http://uber.github.io/react-vis/#/documentation/other-charts/sunburst-diagram

    Source code(tar.gz)
    Source code(zip)
  • v1.3.0(Apr 5, 2017)

    • Feature: Polygon Series, this series type allows users to draw polygons in svg space, check out the docs here.

    • Feature: Arc series, this series allows users to create radial arcs centered anywhere in xy space. check out the docs here

    • Feature: The animation controls for every component in the library have been pretty radically expanded, docs

    • Feature: Added a new grid line type, circular gridlines!

    • Example: Added a demo describing how to make force direct graph in react-vis

    • Example: Added a demo showing off the concept of responsive-vis

    Source code(tar.gz)
    Source code(zip)
Owner
Uber Open Source
Open Source Software at Uber
Uber Open Source
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.1k Jan 13, 2022
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 478 Dec 9, 2021
📊 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 525 Jan 18, 2022
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.2k Jan 20, 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 54 Jan 13, 2022
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 Oct 25, 2021
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 5.8k Jan 13, 2022
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 324 Jan 17, 2022
🐯 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 14.7k Jan 21, 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 14.6k Jan 13, 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.1k Jan 14, 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 12 Nov 28, 2021
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.1k Jan 11, 2022
js2flowchart - a visualization library to convert any JavaScript code into beautiful SVG flowchart

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 a

Bohdan Liashenko 6.3k Jan 14, 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
Shinning - React JS based Starlink Trajectory Visualization

Starlink Project Description Ready for a space adventure? Starlink is a React.js

Rui Zhang 2 Jan 12, 2022