tauCharts 0,0,2,0,0,0,4 Bower npm

D3 based data-focused charting library. Designed with passion. Flexible.

2 years after

Taucharts Build Status Coverage Status Code Climate Slack Status

NPM downloads

Taucharts is a data-focused JavaScript charting library based on D3 and designed with passion.

Official website: www.taucharts.com
Documentation: api.taucharts.com
Project blog: blog.taucharts.com

Why use Taucharts?

Simplicity

Data plays a key role in Taucharts. The library provides a declarative interface for fast mapping of data fields to visual properties.

Flexibility

The library's architecture allows you to build facets and extend chart behaviour with reusable plugins.

Design

The Taucharts team is passionate about beautiful design.

...

Dive into the high-level Taucharts concepts and usage reviews. If you want to contribute - see how to run the project locally

How to use Taucharts

Using Taucharts with a CDN

Load JavaScript dependencies

<script src="//cdn.jsdelivr.net/d3js/latest/d3.min.js" charset="utf-8"></script>
<script src="//cdn.jsdelivr.net/taucharts/latest/tauCharts.min.js" type="text/javascript"></script>

Include a CSS file, as well

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/taucharts/latest/tauCharts.min.css">

Downloading Taucharts using Bower

bower install taucharts

Downloading Taucharts using npm

npm install taucharts

Below are some popular usage scenarios. For more examples, see our experimental sample page.

Scatter plot

var chart = new tauCharts.Chart({
    'type' : 'scatterplot',
    'x'    : 'Cycle Time',
    'y'    : 'SUM(Bugs Count)',
    'color': 'Team',
    'size' : 'Sum(User Stories Count)',
    'data' : [{'Cycle Time': 186, 'SUM(Bugs Count)': 34, 'Team': 'HDP'...}, ...],
    'plugins': [
        tauCharts.api.plugins.get('legend'),
        tauCharts.api.plugins.get('tooltip')
    ]
});

Scatterplot

See scatter plot documentation


Line chart

var chart = new tauCharts.Chart({
    'type' : 'line',
    'y'    : 'Y Scale',
    'x'    : 'X Scale',
    'color': 'Team',
    'size' : 'Effort',
    'label': 'Effort',
    'data' : [{'Team': 'Alpha', 'Effort': 40, 'Y Scale': 23, 'X Scale': 72 }, ...]
});

Line Chart

See line chart documentation


Bar chart

var chart = new tauCharts.Chart({
    type : 'bar',
    x    : 'team',
    y    : 'effort',
    color: 'priority',
    data : [{'team': 'd', 'effort': 1, 'count': 1, 'priority': 'low'}, ...]
});

Bar Chart

See bar chart documentation


Horizontal bar chart

var chart = new tauCharts.Chart({
    type : 'horizontal-bar',
    x    : 'count',
    y    : 'team',
    color: 'priority',
    data : [{'team': 'alpha', 'effort': 8, 'priority': 'major'}, ...]
});

Horizontal Bar Chart

See horizontal bar chart documentation


Stacked bar chart

var chart = new tauCharts.Chart({
    type : 'stacked-bar',
    x    : 'age',
    y    : ['count', 'sport'],
    color: 'country',
    data : [{country: 'Canada', sport: 'Biathlon', medals: 20, age: 22}, ...]
});

Stacked Bar Chart

See stacked bar chart documentation


Horizontal stacked bar chart

var chart = new tauCharts.Chart({
    type : 'horizontal-stacked-bar',
    y    : 'process',
    x    : 'count',
    color: 'stage',
    data : [{process: 'sales', stage: 'visit', count: 100}, ...]
});

Horizontal Stacked Bar Chart

See horizontal stacked bar chart documentation


Stacked area chart

var chart = new tauCharts.Chart({
    type : 'stacked-area',
    y    : 'effort',
    x    : 'date',
    color: 'team',
    guide: {
        interpolate: 'smooth'
    },
    data : [{date: '2015-07-15', effort: 400, team: 'Alpha'}, ...]
});

Horizontal Stacked Bar Chart

See stacked area chart documentation


Facet chart

var chart1 = new tauCharts.Chart({
  type : 'scatterplot',
  x    : ['milespergallon'],
  y    : ['class', 'price'],
  color: 'class',
  data : [{class: "C", milespergallon: 41.26, price: 24509.74, vehicle: "Prius1"}, ...]
});

Facet scatterplot chart

See facet charts documentation


Data Streaming

var chart1 = new tauCharts.Chart({
    type : 'line',
    x    : 'x',
    y    : 'y',
    color: 'type',
    ...
});

Streaming Data Chart

This sample uses the [setData(..)] method to refresh the chart's data source.

See streaming sample online


Complex Composable charts

Composable Chart

See composable chart sample online


How to run the project locally

Clone (forked) repository:

git clone https://github.com/TargetProcess/tauCharts.git

Initialize dependencies:

npm install

Run local webpack dev server (with hot reload):

npm run devserver

Local server will be started on port 9000 and live taucharts assembly will be exposed by url:

http://localhost:9000/tauCharts.js

Now you can see some taucharts examples:

http://localhost:9000/examples/

To run tests (with hot reload):

npm run devtest

To build a static assembly:

npm run build

This command creates development and production assemblies in a [./build] folder.

Taucharts examples / usage reviews

R Wrapper

SqlPad Project

Targetprocess Graphical Reports

Vizydrop project

Taucharts Twitter channel

Taucharts demo page

GeoTremor mobile app

License

Licensing: Apache License, Version 2.0

Have questions? Contact us

Related Repositories

frontend-stuff

frontend-stuff

A continuously expanded list of framework/libraries and tools I used/want to use ...

awesome-d3

awesome-d3

A list of D3 libraries, plugins and utilities ...

awesome-charting

awesome-charting

A curated list of chart and dataviz resources that developers may find useful. ...

InfoVizGeek

InfoVizGeek

List of tools and Utilities for Data and Information Visualization. Ever Expandi ...

chart-tools

chart-tools

Links to Reusable chart tools ...


Top Contributors

vladminsky Mavrin alexanderby unutranyholas nutic mdubakov leonchenko alex-fomin juanjoDiaz alehmr khmylov blackazaru victor-homyakov nadiab

Dependencies

package version
d3 ^3.5.17
topojson 1.6.24
dev almond 0.3.1
autoprefixer ^6.2.3
babel ^6.3.13
babel-core ^6.3.15
babel-loader ^6.2.0
babel-preset-es2015 ^6.3.13
bower ^1.4.1
chai 3.4.1
css-loader ^0.23.0
es5-shim ^4.1.6
eslint ^1.10.3
exports-loader ^0.6.2
fs-extra ^0.26.2
grunt ~0.4.5
grunt-cli 0.1.13
grunt-contrib-clean ^0.7.0
grunt-contrib-concat ^0.5.1
grunt-contrib-copy 0.8.2
grunt-contrib-cssmin 0.14.0
grunt-contrib-less ^1.0.1
grunt-contrib-rename 0.0.3
grunt-contrib-uglify ^0.11.0
grunt-contrib-watch ^0.6.1
grunt-gh-pages ^1.0.0
grunt-jscs ^2.4.0
grunt-karma 0.12.1
grunt-postcss 0.7.1
grunt-shell
grunt-webpack ^1.0.8
imports-loader ^0.6.4
isparta-loader ^2.0.0
jquery ^2.1.4
js-schema ^1.0.1
json-loader ^0.5.2
karma ~0.13.15
karma-chrome-launcher ~0.2.2
karma-cli 0.1.1
karma-coverage ^0.5.3
karma-coveralls ^1.1.0
karma-mocha 0.2.1
karma-sourcemap-loader ^0.3.5
karma-spec-reporter 0.0.23
karma-webpack 1.7.0
mocha ^2.3.4
raw-loader ^0.5.1
tau-tooltip 1.1.2
webpack 1.12.9
webpack-dev-server 1.14.0
webpack-umd-external ^1.0.2

Releases

-   0.9.4 zip tar
-   0.9.4-beta.6 zip tar
-   0.9.4-beta.5 zip tar
-   0.9.4-beta.4 zip tar
-   0.9.4-beta.3 zip tar
-   0.9.4-beta.2 zip tar
-   0.9.4-beta.1 zip tar
-   0.9.3 zip tar
-   0.9.3-beta.4 zip tar
-   0.9.3-beta.3 zip tar
-   0.9.3-beta.2 zip tar
-   0.9.3-beta.1 zip tar
-   0.9.3-beta.0 zip tar
-   0.9.2 zip tar
-   0.9.2-beta.5 zip tar
-   0.9.2-beta.4 zip tar
-   0.9.2-beta.3 zip tar
-   0.9.2-beta.2 zip tar
-   0.9.2-beta.1 zip tar
-   0.9.2-beta.0 zip tar
-   0.9.1 zip tar
-   0.9.1-beta.2 zip tar
-   0.9.1-beta.1 zip tar
-   0.9.1-beta.0 zip tar
-   0.9.0 zip tar
-   0.8.4 zip tar
-   0.8.3 zip tar
-   0.8.2 zip tar
-   0.8.1 zip tar
-   0.8.0 zip tar