Git Product home page Git Product logo

victory's Introduction

Travis Status Join the chat at https://gitter.im/FormidableLabs/victory

Victory

Victory is an opinionated, but fully overridable, ecosystem of composable React components for building interactive data visualizations. This repo aggregates all of the stable Victory components so they can be conveniently included.

See the docs and examples on the website: http://victory.formidable.com.

You can also join the Gitter chat room at https://gitter.im/FormidableLabs/victory.

Important: This project is in alpha release. We're hard at work fixing bugs and improving the API. Be prepared for breaking changes!

SEMVER Minor version bumps should be considered breaking changes until we hit v1.0.0. Patches can be considered safe.

Get started

  1. Add Victory to your project:
$ npm install victory --save
  1. Add your first Victory component:
import React, { Component } from 'react';
import { render } from 'react-dom';
import { VictoryPie } from 'victory';

class PieChart extends Component {
  render() {
    return (
      <VictoryPie />
    );
  }
}

render(<PieChart />, document.getElementById('app'));
  1. VictoryPie component will be rendered, and you should see:

VictoryPie

Including components:

Components can be included individually

import {VictoryLine, VictoryAxis} from "victory"

<VictoryLine/>

Or imported as a set:

import * as V from "victory"

<V.VictoryLine/>

Components

You can read about these Victory components via interactive docs!

Animation

Wrap any Victory component with VictoryAnimation and it will transition smoothly between states whenever data changes. VictoryAnimation relies on d3's interpolator, so it knows how to transitions between colors, dates, numbers, strings etc.

Contributing

Please see CONTRIBUTING in the project builder archetype.

# Clone the Victory repo
$ git clone [email protected]:FormidableLabs/victory.git
$ cd victory

# Run the demo app server
$ npm start

# Open the demo app
$ open http://localhost:3000

# Run checks (lint and tests)
$ npm test

For more on the development environment, see DEVELOPMENT in the project builder archetype.

Roadmap

Please see ROADMAP

victory's People

Contributors

david-davidson avatar paulathevalley avatar knowbody avatar mathisonian avatar coopy avatar colinmegill avatar austinpray avatar exogen avatar gastove avatar eastridge avatar gitter-badger avatar

Watchers

James Cloos avatar Surendra Reddy avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.