• Stars
    star
    8,632
  • Rank 3,913 (Top 0.09 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created about 8 years ago
  • Updated 4 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Data Visualization Components

deprecated version build build downloads

react-vis | Demos | Docs

A COMPOSABLE VISUALIZATION SYSTEM

demo

NOTE: This repository is now under new management. Please reach out to the new administrators if you have any questions.

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

Make sure you are using the correct version of node and yarn. To do so, check package.json and find the entry "volta", e.g.

"volta": {
  "node": "14.18.0",
  "yarn": "1.22.4"
}

It's recommanded to install volta to manage node and yarn.

To develop on react-vis, navigate to packages/react-vis, and install the dependencies and then build and watch the static files:

yarn && yarn 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 run the tests, and create code coverage reports:

yarn cover

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.

More Repositories

1

baseweb

A React Component library implementing the Base design language
TypeScript
8,574
star
2

cadence

Cadence is a distributed, scalable, durable, and highly available orchestration engine to execute asynchronous long-running business logic in a scalable and resilient way.
Go
7,654
star
3

RIBs

Uber's cross-platform mobile architecture framework.
Kotlin
7,624
star
4

kraken

P2P Docker registry capable of distributing TBs of data in seconds
Go
5,768
star
5

prototool

Your Swiss Army Knife for Protocol Buffers
Go
5,051
star
6

causalml

Uplift modeling and causal inference with machine learning algorithms
Python
4,592
star
7

h3

Hexagonal hierarchical geospatial indexing system
C
4,491
star
8

NullAway

A tool to help eliminate NullPointerExceptions (NPEs) in your Java code with low build-time overhead
Java
3,469
star
9

AutoDispose

Automatic binding+disposal of RxJava streams.
Java
3,343
star
10

aresdb

A GPU-powered real-time analytics storage and query engine.
Go
2,976
star
11

react-digraph

A library for creating directed graph editors
JavaScript
2,573
star
12

piranha

A tool for refactoring code related to feature flag APIs
Java
2,206
star
13

orbit

A Python package for Bayesian forecasting with object-oriented design and probabilistic models under the hood.
Python
1,782
star
14

ios-snapshot-test-case

Snapshot view unit tests for iOS
Objective-C
1,755
star
15

petastorm

Petastorm library enables single machine or distributed training and evaluation of deep learning models from datasets in Apache Parquet format. It supports ML frameworks such as Tensorflow, Pytorch, and PySpark and can be used from pure Python code.
Python
1,724
star
16

needle

Compile-time safe Swift dependency injection framework
Swift
1,708
star
17

manifold

A model-agnostic visual debugging tool for machine learning
JavaScript
1,639
star
18

okbuck

OkBuck is a gradle plugin that lets developers utilize the Buck build system on a gradle project.
Java
1,535
star
19

UberSignature

Provides an iOS view controller allowing a user to draw their signature with their finger in a realistic style.
Objective-C
1,281
star
20

nanoscope

An extremely accurate Android method tracing tool.
HTML
1,237
star
21

tchannel

network multiplexing and framing protocol for RPC
Thrift
1,148
star
22

queryparser

Parsing and analysis of Vertica, Hive, and Presto SQL.
Haskell
1,067
star
23

fiber

Distributed Computing for AI Made Simple
Python
1,041
star
24

neuropod

A uniform interface to run deep learning models from multiple frameworks
C++
927
star
25

uReplicator

Improvement of Apache Kafka Mirrormaker
Java
888
star
26

pam-ussh

uber's ssh certificate pam module
Go
826
star
27

ringpop-go

Scalable, fault-tolerant application-layer sharding for Go applications
Go
810
star
28

h3-js

h3-js provides a JavaScript version of H3, a hexagon-based geospatial indexing system.
JavaScript
779
star
29

xviz

A protocol for real-time transfer and visualization of autonomy data
JavaScript
760
star
30

mockolo

Efficient Mock Generator for Swift
Swift
759
star
31

h3-py

Python bindings for H3, a hierarchical hexagonal geospatial indexing system
Python
739
star
32

streetscape.gl

Visualization framework for autonomy and robotics data encoded in XVIZ
JavaScript
702
star
33

react-view

React View is an interactive playground, documentation and code generator for your components.
TypeScript
685
star
34

nebula.gl

A suite of 3D-enabled data editing overlays, suitable for deck.gl
TypeScript
648
star
35

RxDogTag

Automatic tagging of RxJava 2+ originating subscribe points for onError() investigation.
Java
642
star
36

peloton

Unified Resource Scheduler to co-schedule mixed types of workloads such as batch, stateless and stateful jobs in a single cluster for better resource utilization.
Go
632
star
37

motif

A simple DI API for Android / Java
Kotlin
532
star
38

signals-ios

Typeful eventing
Objective-C
526
star
39

tchannel-go

Go implementation of a multiplexing and framing protocol for RPC calls
Go
476
star
40

marmaray

Generic Data Ingestion & Dispersal Library for Hadoop
Java
474
star
41

grafana-dash-gen

grafana dash dash dash gen
JavaScript
467
star
42

zanzibar

A build system & configuration system to generate versioned API gateways.
Go
445
star
43

clay

Clay is a framework for building RESTful backend services using best practices. It’s a wrapper around Flask.
Python
441
star
44

astro

Astro is a tool for managing multiple Terraform executions as a single command
Go
431
star
45

NEAL

🔎🐞 A language-agnostic linting platform
OCaml
423
star
46

react-vis-force

d3-force graphs as React Components.
JavaScript
402
star
47

arachne

An always-on framework that performs end-to-end functional network testing for reachability, latency, and packet loss
Go
387
star
48

cadence-web

Web UI for visualizing workflows on Cadence
JavaScript
376
star
49

Python-Sample-Application

Python
373
star
50

rides-ios-sdk

Uber Rides iOS SDK (beta)
Swift
364
star
51

stylist

A stylist creates cool styles. Stylist is a Gradle plugin that codegens a base set of Android XML themes.
Kotlin
355
star
52

storagetapper

StorageTapper is a scalable realtime MySQL change data streaming, logical backup and logical replication service
Go
331
star
53

swift-concurrency

Concurrency utilities for Swift
Swift
321
star
54

cyborg

Display Android Vectordrawables on iOS.
Swift
301
star
55

RemoteShuffleService

Remote shuffle service for Apache Spark to store shuffle data on remote servers.
Java
288
star
56

rides-android-sdk

Uber Rides Android SDK (beta)
Java
286
star
57

h3-go

Go bindings for H3, a hierarchical hexagonal geospatial indexing system
Go
267
star
58

h3-java

Java bindings for H3, a hierarchical hexagonal geospatial indexing system
Java
259
star
59

h3-py-notebooks

Jupyter notebooks for h3-py, a hierarchical hexagonal geospatial indexing system
Jupyter Notebook
239
star
60

hermetic_cc_toolchain

Bazel C/C++ toolchain for cross-compiling C/C++ programs
Starlark
219
star
61

artist

An artist creates views. Artist is a Gradle plugin that codegens a base set of Android Views.
Kotlin
209
star
62

geojson2h3

Conversion utilities between H3 indexes and GeoJSON
JavaScript
206
star
63

tchannel-node

JavaScript
205
star
64

RxCentralBle

A reactive, interface-driven central role Bluetooth LE library for Android
Java
199
star
65

uberalls

Track code coverage metrics with Jenkins and Phabricator
Go
187
star
66

SwiftCodeSan

SwiftCodeSan is a tool that "sanitizes" code written in Swift.
Swift
172
star
67

rides-python-sdk

Uber Rides Python SDK (beta)
Python
169
star
68

doubles

Test doubles for Python.
Python
166
star
69

logtron

A logging MACHINE
JavaScript
158
star
70

cassette

Store and replay HTTP requests made in your Python app
Python
138
star
71

cadence-java-client

Java framework for Cadence Workflow Service
Java
137
star
72

UBTokenBar

Flexible and extensible UICollectionView based TokenBar written in Swift
Swift
136
star
73

athenadriver

A fully-featured AWS Athena database driver (+ athenareader https://github.com/uber/athenadriver/tree/master/athenareader)
Go
133
star
74

tchannel-java

A Java implementation of the TChannel protocol.
Java
132
star
75

android-template

This template provides a starting point for open source Android projects at Uber.
Java
127
star
76

bayesmark

Benchmark framework to easily compare Bayesian optimization methods on real machine learning tasks
Python
126
star
77

crumb

An annotation processor for breadcrumbing metadata across compilation boundaries.
Kotlin
124
star
78

py-find-injection

Look for SQL injection attacks in python source code
Python
119
star
79

rides-java-sdk

Uber Rides Java SDK (beta)
Java
101
star
80

startup-reason-reporter

Reports the reason why an iOS App started.
Objective-C
97
star
81

uber-poet

A mock swift project generator & build runner to help benchmark various module dependency graphs.
Python
94
star
82

charlatan

A Python library to efficiently manage and install database fixtures
Python
89
star
83

cadence-java-samples

Java
89
star
84

simple-store

Simple yet performant asynchronous file storage for Android
Java
82
star
85

swift-abstract-class

Compile-time abstract class validation for Swift
Swift
82
star
86

tchannel-python

Python implementation of the TChannel protocol.
Python
77
star
87

eight-track

Record and playback HTTP requests
JavaScript
70
star
88

client-platform-engineering

A collection of cookbooks, scripts and binaries used to manage our macOS, Ubuntu and Windows endpoints
Ruby
69
star
89

multidimensional_urlencode

Python library to urlencode a multidimensional dict
Python
67
star
90

lint-checks

A set of opinionated and useful lint checks
Kotlin
67
star
91

uncaught-exception

Handle uncaught exceptions.
JavaScript
66
star
92

swift-common

Common code used by various Uber open source projects
Swift
64
star
93

uberscriptquery

UberScriptQuery, a SQL-like DSL to make writing Spark jobs super easy
Java
57
star
94

sentry-logger

A Sentry transport for Winston
JavaScript
55
star
95

graph.gl

WebGL2-Powered Visualization Components for Graph Visualization
JavaScript
50
star
96

nanoscope-art

C++
47
star
97

assume-role-cli

CLI for AssumeRole is a tool for running programs with temporary credentials from AWS's AssumeRole API.
Go
47
star
98

airlock

A prober to probe HTTP based backends for health
JavaScript
47
star
99

mutornadomon

Easy-to-install monitor endpoint for Tornado applications
Python
46
star
100

kafka-logger

A kafka logger for winston
JavaScript
45
star