tim-react-vis
    Overview
    Reviews
    Code
    Tutorials
    Playground
    Contributors
    Issues
    Documentation
    Chat

tim-react-vis

Data visualization library based on React and d3.

0.3.4  •  Updated 4 years ago  •  by uber  •  MIT License

react-vis Build Status

Demo of XYPlot

See the live demo at http://uber.github.io/react-vis

Overview

A collection of react components to render common data visualization charts, such as line/area/bar charts, heat maps, scatteplots, pie and donut charts, tables with fixed headers 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 overriden 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

Include the CSS from ./node_modules/react-vis/main in your HTML page or via SASS:

@import "./node_modules/react-vis/main";

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>

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 watch

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 test

Change log

0.3.2

  • colorRange, colorDomain, colorType, opacityRange, opacityDomain and opacityType properties are now supported for the Treemap scales (more info about scales is here).
  • Basic mouse interactions for arcs were added to RadialChart: now onSectionClick, onSectionMouseOver and onSectionMouseOut are supported.
  • Several children-related bugs are fixed (see #54 and #47).

0.3.1

  • Fixed the bug when no bars were shown for one point of ordinal data (see #49 for more details).

0.3

Non-breaking changes

  • Travis CI is now supported.
  • Stacking was added to the charts. Please refer to the docs of XYPlot for more information.

0.2

Breaking changes

  • BarSeries component was split into VerticalBarSeries and HorizontalBarSeries; no orientation property is needed anymore.
  • All bar series are aligned to 0 by default. The value can be modified with [scale-name]BaseValue property.
  • Alignment of the Hint component was fixed: now topleft orientation aligns it to the top left corner, but not to the bottom right.

Non-breaking changes:

  • Static getters for displayName were removed (interverring with livereactload).
  • More tests were added.

Popularity

Stars
6.7K

Maintenance

Development

Last ver 4 years ago
Created 4 years ago
Last commit 4 months ago
2 days between commits

Technology

Node version: 4.4.2
0 unpacked

Compliance

MIT License
OSI Approved
0 vulnerabilities

Contributors

117 contributors
Andrew McNutt
162 commits, 285 merges, 188 PRs
Works at uchicago
Anton Bulyenov
174 commits, 53 merges, 49 PRs
Works at Uber
Jerome Cukier
50 commits, 52 merges, 35 PRs
Works at uber
Anton Bulyonov (Bulyenov)
74 commits
Balthazar Gronon
38 commits, 35 merges, 11 PRs
Works at Co-founder Ashlar
Kevin Lin
57 commits

Tags

d3
react
visualization
chart
es6
babel
Ready for the next level?
Join Openbase's founding team to help us build the ultimate open-source app store, work with the latest technologies, and enjoy great culture, impact and autonomy
Openbase helps developers choose among and use millions of open-source packages, so they can build amazing products faster.
FacebookLinkedIn
© 2020 Devstore, Inc.