explaingit

uber/react-vis

8,790JavaScriptAudience · developerComplexity · 2/5Setup · easy

TLDR

react-vis is a deprecated (2020) JavaScript library from Uber for adding composable chart components, line, bar, scatter, heat map, pie, to React applications without deep visualization knowledge.

Mindmap

mindmap
  root((react-vis))
    What it does
      Data visualization
      React chart components
      Composable design
    Chart Types
      Line and bar charts
      Scatter and heat maps
      Pie and donut charts
    How to Use
      npm install
      Import components
      CSS stylesheet
    Status
      Deprecated 2020
      Historical reference
      Seek alternatives
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Add a bar chart or line chart to an existing React app by importing a ready-made component without writing custom SVG.

USE CASE 2

Compose scatter plots, heat maps, and pie charts from modular React components that can be mixed and matched on the same canvas.

USE CASE 3

Study react-vis as a historical reference to understand how Uber structured a data visualization system in React before the library was deprecated.

Tech stack

JavaScriptReactCSSnpm

Getting it running

Difficulty · easy Time to first run · 30min

Deprecated since 2020 and no longer maintained, consider an actively supported library for any new project.

In plain English

Important context first: react-vis is deprecated and is no longer maintained. The repository badge says maintenance stopped in 2020, and anyone building a new project should look for an actively maintained alternative. While it was active, react-vis was a JavaScript library built by Uber for creating data visualizations inside React applications. It provided ready-made chart components that could be dropped into a React page: line charts, bar charts, area charts, scatter plots, heat maps, pie and donut charts, radar charts, tree maps, and several others. The idea was that you could compose these components together in the same way you assemble any other React UI, without needing deep knowledge of lower-level visualization libraries. The library was designed around flexibility. Chart axes, grid lines, legends, and series were separate components, so you could mix and match them rather than being locked into a fixed chart template. It also tried to provide sensible defaults so that a basic chart required very little configuration, while still allowing detailed customization when needed. To use it, you install the package through npm and import whichever chart components you need. The library also shipped a compiled CSS file for styling. Code examples and a live demo site were available at the time of the project's active life, and there was documentation covering individual components and concepts like data scales and animations. The project has since passed to new administrators, but given its deprecated status, it is best treated as a historical reference rather than a foundation for new work.

Copy-paste prompts

Prompt 1
Show me how to add a line chart from react-vis to a React component. Include the import, the data format, and the basic XYPlot wrapper setup.
Prompt 2
Using react-vis, build a bar chart component that accepts an array of label-value objects as props and renders them with labeled axes.
Prompt 3
How do I overlay a scatter plot and a line chart on the same react-vis XYPlot? Give me a minimal working example with two series.
Prompt 4
What are the actively maintained alternatives to react-vis for React data visualization in 2024, and how do I migrate a simple line chart from react-vis to one of them?
Prompt 5
Show me how to add a legend and custom axis labels to a react-vis chart so the final output is readable without a tooltip.
Open on GitHub → Explain another repo

← uber on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.