semigradsky / taucharts

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

Taucharts

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.

##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/underscorejs/latest/underscore-min.js" type="text/javascript"></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"    : "eccentricity",
    "y"    : "period",
    "color": "name",
    "size" : "mass",
    "data" : [{"eccentricity": 0, "period": 4.95, "name": "exoplanet", "mass": 38.0952}, ...]
});

See scatter plot documentation

=========

####Line chart

var chart = new tauCharts.Chart({
    "type" : "line",
    "y"    : "SUM(Total Medals)",
    "x"    : "Age",
    "color": "Sport",
    "data" : [{ "Sport": "Swimming", "Age": 23, "SUM(Total Medals)": 72 }, ...]
});

See line chart documentation

=========

####Bar chart

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

See bar chart documentation

=========

####Horizontal bar chart

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

See horizontal bar chart documentation

=========

####Stacked bar chart

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

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}, ...]
});

See horizontal stacked bar 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"}, ...]
});

See facet charts documentation

=========

####Data Streaming

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

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

See streaming sample online

=========

####Complex Composable charts

See composable chart sample online

=========

##Taucharts examples / usage reviews

R Wrapper

SqlPad Project

Targetprocess Graphical Reports

Vizydrop project

Taucharts Twitter channel

Taucharts demo page

##License

Licensing: Apache License, Version 2.0

Have questions? Contact us