).
6 |
7 |
8 |
9 | ## Settings
10 |
11 | ### Basic Props
12 |
13 | ##### dataset -> object
14 |
15 | `dataset` props is the value that generated after `series`, should be **a object**. You can use `series` api, for setting your dataset.
16 |
17 | ##### lineClassName -> string
18 |
19 | This prop will be passed to set in your Line css class.
20 |
21 | ##### x -> function
22 |
23 | Your accessor of your x axis.
24 |
25 | for example:
26 |
27 | ```js
28 | x = function() {
29 | return +d;
30 | }
31 | ```
32 |
33 | ##### y -> function
34 |
35 | Your accessor of your y axis.
36 |
37 | for example:
38 |
39 | ```js
40 | y = function() {
41 | return +d;
42 | }
43 | ```
44 |
45 | ##### xScaleSet -> function
46 |
47 | x Scale. You can use `react-d3-core` scale api, for setting your scales.
48 |
49 | ##### yScaleSet -> function
50 |
51 | Y Scale. You can use `react-d3-core` scale api, for setting your scales.
52 |
53 | ##### interpolate -> string
54 |
55 | see https://github.com/mbostock/d3/wiki/SVG-Shapes#line_interpolate for options.
56 |
57 | ### Implements
58 |
59 | ##### showBrush -> boolean
60 |
61 | set to true, if you are going to implement `react-d3-brush`
62 |
63 | ##### showZoom -> boolean
64 |
65 | set to true, if you are going to implement `react-d3-zoom`
66 |
--------------------------------------------------------------------------------
/docs/docs_pre/charts/line_chart.md:
--------------------------------------------------------------------------------
1 | # Line Chart
2 |
3 |
4 | ## Required Props
5 |
6 | !!import "../shared/charts/required.md"
7 |
8 | ## Appearance Props (optional)
9 |
10 |
11 | ## X axis props (optional)
12 |
13 | ### xDomain
14 |
15 | reference [react-d3-core](https://github.com/react-d3/react-d3-core) for more detail
16 |
17 | ### xLabel
18 |
19 | ## Y axis props (optional)
20 |
21 | ### y
22 |
23 | - type: function
24 |
25 | - default: `y: (d) => {return +d;}`
26 |
27 | ### yDomain
28 |
29 | reference [react-d3-core](https://github.com/react-d3/react-d3-core) for more details.
30 |
31 | ### yLabel
32 |
33 | ### yLabelPosition
34 |
35 | ## Example
36 |
37 | ```js
38 | "use strict";
39 |
40 | var React = require('react');
41 | var Chart = require('react-d3-core').Chart;
42 | var LineChart = require('react-d3-basic').LineChart;
43 |
44 | (function() {
45 |
46 | var generalChartData = require('./data/user.json');
47 |
48 | var chartSeries = [
49 | {
50 | field: 'age',
51 | name: 'Age',
52 | color: '#ff7f0e'
53 | }
54 | ],
55 | x = function(d) {
56 | return d.index;
57 | },
58 | xDomain = d3.extent(generalChartData, x),
59 | xLabel = "Index",
60 | y = function(d) {
61 | return d;
62 | },
63 | yDomain = d3.extent(generalChartData, function(d) {return d.age;}),
64 | yLabel = "Age",
65 | yLabelPosition = 'right'
66 |
67 | React.render(
68 |
69 |
80 |
81 | , document.getElementById('data_line')
82 | )
83 | })()
84 | ```
85 |
--------------------------------------------------------------------------------
/src/pie.jsx:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | import {
4 | default as React,
5 | Component,
6 | PropTypes
7 | } from 'react';
8 |
9 | import {
10 | Legend
11 | } from 'react-d3-core';
12 |
13 | import {
14 | ChartPie,
15 | Pie
16 | } from 'react-d3-shape';
17 |
18 | export default class PieChart extends Component {
19 | constructor(props) {
20 | super(props);
21 | }
22 |
23 | static defaultProps = {
24 | onMouseOver: () => {},
25 | onMouseOut: () => {},
26 | showLegend: true
27 | }
28 |
29 | static propTypes = {
30 | width: PropTypes.number.isRequired,
31 | height: PropTypes.number.isRequired,
32 | data: PropTypes.array.isRequired,
33 | chartSeries: PropTypes.array.isRequired,
34 | value: PropTypes.func.isRequired,
35 | name: PropTypes.func.isRequired
36 | }
37 |
38 | render() {
39 | const {
40 | width,
41 | height,
42 | margins,
43 | data,
44 | chartSeries,
45 | value,
46 | name,
47 | categoricalColors,
48 | showLegend
49 | } = this.props;
50 |
51 |
52 | return (
53 |
54 | {showLegend?
55 |
62 | : null
63 | }
64 |
73 |
77 | {this.props.children}
78 |
79 |
55 |
56 |
64 |
65 | )
66 | }
67 | })
68 |
69 | ReactDOM.render(
70 |
71 | , document.getElementById('data_line')
72 | )
73 | })()
74 |
--------------------------------------------------------------------------------
/src/scatter.jsx:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | import {
4 | default as React,
5 | Component,
6 | PropTypes,
7 | } from 'react';
8 |
9 | import {
10 | Xaxis,
11 | Yaxis,
12 | Xgrid,
13 | Ygrid,
14 | Legend
15 | } from 'react-d3-core';
16 |
17 | import {
18 | Scatter,
19 | Chart
20 | } from 'react-d3-shape';
21 |
22 | import CommonProps from './commonProps';
23 |
24 | export default class ScatterPlot extends Component {
25 |
26 | constructor(props) {
27 | super(props);
28 | }
29 |
30 | static defaultProps = CommonProps
31 |
32 | static propTypes = {
33 | width: PropTypes.number.isRequired,
34 | height: PropTypes.number.isRequired,
35 | margins: PropTypes.object.isRequired,
36 | data: PropTypes.array.isRequired,
37 | chartSeries: PropTypes.array.isRequired
38 | }
39 |
40 | render() {
41 |
42 | const {
43 | width,
44 | height,
45 | margins,
46 | data,
47 | chartSeries,
48 | showXGrid,
49 | showYGrid,
50 | showLegend,
51 | categoricalColors
52 | } = this.props;
53 |
54 | var xgrid, ygrid;
55 |
56 | if(showXGrid) xgrid =
57 | if(showYGrid) ygrid =
58 |
59 | return (
60 |
61 | {showLegend?
62 |
69 | : null
70 | }
71 |
78 |
81 | {xgrid}
82 | {ygrid}
83 |
84 |
85 | {this.props.children}
86 |
87 |
88 | )
89 | }
90 | }
91 |
--------------------------------------------------------------------------------
/example/src/bar.jsx:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | import React, {Component} from 'react'
4 | import {BarChart} from '../../src'
5 |
6 | var generalChartData = require('dsv?delimiter=\t!./data/letter.tsv')
7 |
8 | var chartSeries = [
9 | {
10 | field: 'frequency',
11 | name: 'Frequency',
12 | style: {
13 | 'fill-opacity': .5
14 | }
15 | }
16 | ],
17 | x = function(d) {
18 | return d.letter;
19 | },
20 | xScale = 'ordinal',
21 | y = function(d) {
22 | return +d;
23 | },
24 | yTicks = [10, "%"],
25 | onMouseOver = function(d, i) {
26 | console.log(d, i);
27 | },
28 | onMouseOut = function(d, i) {
29 | console.log(d, i);
30 | }
31 |
32 | module.exports = React.createClass({
33 | getInitialState: function() {
34 | return {
35 | width: 600,
36 | height: 500,
37 | series: chartSeries
38 | }
39 | },
40 | onClick: function() {
41 | this.setState({
42 | width: this.state.width === 600? 500: 600,
43 | height: this.state.width === 600? 600: 500,
44 | series: this.state.width === 600? [
45 | {
46 | field: 'frequency',
47 | name: 'Frequency',
48 | style: {
49 | 'fill': 'red',
50 | 'fill-opacity': .8
51 | }
52 | }
53 | ]: chartSeries
54 | })
55 | },
56 | render: function() {
57 | return (
58 |
59 |
60 |
75 |
76 | )
77 | }
78 | })
79 |
80 |
--------------------------------------------------------------------------------
/example/src/bar_horizontal.jsx:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | var React = require('react');
4 | var BarHorizontalChart = require('../../src').BarHorizontalChart;
5 |
6 | var generalChartData = require('dsv?delimiter=\t!./data/letter.tsv')
7 |
8 | var chartSeries = [
9 | {
10 | field: 'frequency',
11 | name: 'Frequency',
12 | style: {
13 | 'fill-opacity': .5
14 | }
15 | }
16 | ],
17 | y = function(d) {
18 | return d.letter;
19 | },
20 | yScale = 'ordinal',
21 | x = function(d) {
22 | return +d;
23 | },
24 | xTicks = [10, "%"],
25 | onMouseOver = function(d, i) {
26 | console.log(d, i);
27 | },
28 | onMouseOut = function(d, i) {
29 | console.log(d, i);
30 | }
31 |
32 | module.exports = React.createClass({
33 | getInitialState: function() {
34 | return {
35 | width: 600,
36 | height: 500,
37 | series: chartSeries
38 | }
39 | },
40 | onClick: function() {
41 | this.setState({
42 | width: this.state.width === 600? 500: 600,
43 | height: this.state.width === 600? 600: 500,
44 | series: this.state.width === 600? [
45 | {
46 | field: 'frequency',
47 | name: 'Frequency',
48 | style: {
49 | 'fill': 'red',
50 | 'fill-opacity': .8
51 | }
52 | }
53 | ]: chartSeries
54 | })
55 | },
56 | render: function() {
57 | return (
58 |
59 |
60 |
74 |
75 | )
76 | }
77 | })
78 |
--------------------------------------------------------------------------------
/src/area.jsx:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | import {
4 | default as React,
5 | Component,
6 | PropTypes,
7 | } from 'react';
8 |
9 | import {
10 | Xaxis,
11 | Yaxis,
12 | Xgrid,
13 | Ygrid,
14 | Legend
15 | } from 'react-d3-core';
16 |
17 | import {
18 | Area,
19 | Chart
20 | } from 'react-d3-shape';
21 |
22 | import CommonProps from './commonProps';
23 |
24 | export default class AreaChart extends Component {
25 |
26 | constructor(props) {
27 | super(props);
28 | }
29 |
30 | static defaultProps = {
31 | showScatter: false,
32 | ...CommonProps
33 | }
34 |
35 | static propTypes = {
36 | width: PropTypes.number.isRequired,
37 | height: PropTypes.number.isRequired,
38 | margins: PropTypes.object.isRequired,
39 | data: PropTypes.array.isRequired,
40 | chartSeries: PropTypes.array.isRequired
41 | }
42 |
43 | render() {
44 |
45 | const {
46 | width,
47 | height,
48 | margins,
49 | data,
50 | chartSeries,
51 | showXGrid,
52 | showYGrid,
53 | showLegend,
54 | categoricalColors
55 | } = this.props;
56 |
57 | var xgrid, ygrid;
58 |
59 | if(showXGrid) xgrid =
60 | if(showYGrid) ygrid =
61 |
62 | return (
63 |
64 | {showLegend?
65 |
72 | : null
73 | }
74 |
81 |
84 | {xgrid}
85 | {ygrid}
86 |
87 |
88 | {this.props.children}
89 |
90 |
61 | {showLegend?
62 |
69 | : null
70 | }
71 |
79 |
82 | {xgrid}
83 | {ygrid}
84 |
85 |
86 | {this.props.children}
87 |
88 |
64 | {showLegend?
65 |
72 | : null
73 | }
74 |
81 |
84 | {xgrid}
85 | {ygrid}
86 |
87 |
88 | {this.props.children}
89 |
90 |
91 | )
92 | }
93 | }
94 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-d3-basic",
3 | "version": "1.6.11",
4 | "description": "react chart component",
5 | "main": "./lib/index.js",
6 | "directories": {
7 | "example": "example"
8 | },
9 | "scripts": {
10 | "test": "echo \"Error: no test specified\" && exit 1",
11 | "build": "rm -rf ./lib && BABEL_ENV=production ./node_modules/.bin/babel ./src --out-dir ./lib",
12 | "prod": "BABEL_ENV=production NODE_ENV=0 webpack --config webpack.prod.config.js && BABEL_ENV=production NODE_ENV=1 webpack --config webpack.prod.config.js"
13 | },
14 | "author": "ElixirDoc team",
15 | "license": "Apache 2.0",
16 | "devDependencies": {
17 | "babel-cli": "^6.6.4",
18 | "babel-core": "^6.5.2",
19 | "babel-eslint": "^3.1.9",
20 | "babel-loader": "^6.2.3",
21 | "babel-plugin-add-module-exports": "^0.1.2",
22 | "babel-plugin-react-transform": "^2.0.0",
23 | "babel-plugin-transform-react-remove-prop-types": "^0.2.2",
24 | "babel-plugin-transform-runtime": "^6.5.2",
25 | "babel-polyfill": "^6.5.0",
26 | "babel-preset-es2015": "^6.5.0",
27 | "babel-preset-react": "^6.5.0",
28 | "babel-preset-react-hmre": "1.0.1",
29 | "babel-preset-stage-0": "^6.5.0",
30 | "css-loader": "^0.18.0",
31 | "dsv-loader": "^1.0.0",
32 | "express": "^4.13.4",
33 | "extract-text-webpack-plugin": "^1.0.1",
34 | "json-loader": "^0.5.3",
35 | "jsx-loader": "^0.13.2",
36 | "react-bootstrap": "^0.28.3",
37 | "react-hot-loader": "^1.3.0",
38 | "react-router": "^2.0.0",
39 | "style-loader": "^0.12.4",
40 | "tapable": "^0.2.4",
41 | "webpack-dev-middleware": "^1.5.1",
42 | "webpack-dev-server": "^1.11.0",
43 | "webpack-hot-middleware": "^2.9.1"
44 | },
45 | "peerDependencies": {
46 | "react": "^0.14.7",
47 | "react-dom": "^0.14.7"
48 | },
49 | "dependencies": {
50 | "d3-array": "^0.7.1",
51 | "d3-scale": "^0.6.4",
52 | "react-d3-core": "^1.2.8",
53 | "react-d3-shape": "^0.2.13",
54 | "react-faux-dom": "^2.1.0"
55 | }
56 | }
57 |
--------------------------------------------------------------------------------
/src/bar.jsx:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | import {
4 | default as React,
5 | Component,
6 | PropTypes,
7 | } from 'react';
8 |
9 | import {
10 | Xaxis,
11 | Yaxis,
12 | Xgrid,
13 | Ygrid,
14 | Legend
15 | } from 'react-d3-core';
16 |
17 | import {
18 | Bar,
19 | Chart
20 | } from 'react-d3-shape';
21 |
22 | import CommonProps from './commonProps';
23 |
24 | export default class BarChart extends Component {
25 |
26 | constructor(props) {
27 | super(props);
28 | }
29 |
30 | static defaultProps = {
31 | onMouseOver: () => {},
32 | onMouseOut: () => {},
33 | ...CommonProps
34 | }
35 |
36 | static propTypes = {
37 | width: PropTypes.number.isRequired,
38 | height: PropTypes.number.isRequired,
39 | margins: PropTypes.object.isRequired,
40 | data: PropTypes.array.isRequired,
41 | chartSeries: PropTypes.array.isRequired
42 | }
43 |
44 | render() {
45 |
46 | const {
47 | width,
48 | height,
49 | margins,
50 | data,
51 | chartSeries,
52 | showXGrid,
53 | showYGrid,
54 | showLegend,
55 | categoricalColors
56 | } = this.props;
57 |
58 | var xgrid, ygrid;
59 |
60 | if(showXGrid) xgrid =
61 | if(showYGrid) ygrid =
62 |
63 | return (
64 |
65 | {showLegend?
66 |
73 | : null
74 | }
75 |
82 |
85 | {xgrid}
86 | {ygrid}
87 |
88 |
89 | {this.props.children}
90 |
91 |
92 | )
93 | }
94 | }
95 |
--------------------------------------------------------------------------------
/src/bar_group.jsx:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | import {
4 | default as React,
5 | Component,
6 | PropTypes,
7 | } from 'react';
8 |
9 | import {
10 | Xaxis,
11 | Yaxis,
12 | Xgrid,
13 | Ygrid,
14 | Legend
15 | } from 'react-d3-core';
16 |
17 | import {
18 | BarGroup,
19 | Chart
20 | } from 'react-d3-shape';
21 |
22 | import CommonProps from './commonProps';
23 |
24 | export default class BarGroupChart extends Component {
25 |
26 | constructor(props) {
27 | super(props);
28 | }
29 |
30 | static defaultProps = {
31 | onMouseOver: () => {},
32 | onMouseOut: () => {},
33 | ...CommonProps
34 | }
35 |
36 | static propTypes = {
37 | width: PropTypes.number.isRequired,
38 | height: PropTypes.number.isRequired,
39 | margins: PropTypes.object.isRequired,
40 | data: PropTypes.array.isRequired,
41 | chartSeries: PropTypes.array.isRequired
42 | }
43 |
44 | render() {
45 |
46 | const {
47 | width,
48 | height,
49 | margins,
50 | data,
51 | chartSeries,
52 | showXGrid,
53 | showYGrid,
54 | showLegend,
55 | categoricalColors
56 | } = this.props;
57 |
58 | var xgrid, ygrid;
59 |
60 | if(showXGrid) xgrid =
61 | if(showYGrid) ygrid =
62 |
63 | return (
64 |
65 | {showLegend?
66 |
73 | : null
74 | }
75 |
82 |
85 | {xgrid}
86 | {ygrid}
87 |
88 |
89 | {this.props.children}
90 |
91 |
92 | )
93 | }
94 | }
95 |
--------------------------------------------------------------------------------
/src/bar_stack.jsx:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | import {
4 | default as React,
5 | Component,
6 | PropTypes,
7 | } from 'react';
8 |
9 | import {
10 | Xaxis,
11 | Yaxis,
12 | Xgrid,
13 | Ygrid,
14 | Legend
15 | } from 'react-d3-core';
16 |
17 | import {
18 | BarStack,
19 | Chart
20 | } from 'react-d3-shape';
21 |
22 | import CommonProps from './commonProps';
23 |
24 | export default class BarStackChart extends Component {
25 |
26 | constructor(props) {
27 | super(props);
28 | }
29 |
30 | static defaultProps = {
31 | onMouseOver: () => {},
32 | onMouseOut: () => {},
33 | ...CommonProps
34 | }
35 |
36 | static propTypes = {
37 | width: PropTypes.number.isRequired,
38 | height: PropTypes.number.isRequired,
39 | margins: PropTypes.object.isRequired,
40 | data: PropTypes.array.isRequired,
41 | chartSeries: PropTypes.array.isRequired
42 | }
43 |
44 | render() {
45 |
46 | const {
47 | width,
48 | height,
49 | margins,
50 | data,
51 | chartSeries,
52 | showXGrid,
53 | showYGrid,
54 | showLegend,
55 | categoricalColors
56 | } = this.props;
57 |
58 | var xgrid, ygrid;
59 |
60 | if(showXGrid) xgrid =
61 | if(showYGrid) ygrid =
62 |
63 | return (
64 |
65 | {showLegend?
66 |
73 | : null
74 | }
75 |
83 |
86 | {xgrid}
87 | {ygrid}
88 |
89 |
90 | {this.props.children}
91 |
92 |
93 | )
94 | }
95 | }
96 |
--------------------------------------------------------------------------------
/src/bar_horizontal.jsx:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | import {
4 | default as React,
5 | Component,
6 | PropTypes,
7 | } from 'react';
8 |
9 | import {
10 | Xaxis,
11 | Yaxis,
12 | Xgrid,
13 | Ygrid,
14 | Legend
15 | } from 'react-d3-core';
16 |
17 | import {
18 | BarHorizontal,
19 | Chart
20 | } from 'react-d3-shape';
21 |
22 | import {horizontalProps} from './commonProps';
23 |
24 | export default class BarHorizontalChart extends Component {
25 |
26 | constructor(props) {
27 | super(props);
28 | }
29 |
30 | static defaultProps = {
31 | onMouseOver: () => {},
32 | onMouseOut: () => {},
33 | ...horizontalProps
34 | }
35 |
36 | static propTypes = {
37 | width: PropTypes.number.isRequired,
38 | height: PropTypes.number.isRequired,
39 | margins: PropTypes.object.isRequired,
40 | data: PropTypes.array.isRequired,
41 | chartSeries: PropTypes.array.isRequired
42 | }
43 |
44 | render() {
45 |
46 | const {
47 | width,
48 | height,
49 | margins,
50 | data,
51 | chartSeries,
52 | showXGrid,
53 | showYGrid,
54 | showLegend,
55 | categoricalColors
56 | } = this.props;
57 |
58 | var xgrid, ygrid;
59 |
60 | if(showXGrid) xgrid =
61 | if(showYGrid) ygrid =
62 |
63 | return (
64 |
65 | {showLegend?
66 |
73 | : null
74 | }
75 |
83 |
86 | {xgrid}
87 | {ygrid}
88 |
89 |
90 | {this.props.children}
91 |
92 |
93 | )
94 | }
95 | }
96 |
--------------------------------------------------------------------------------
/example/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 | import ReactDOM from 'react-dom'
3 | import { Router, Route, browserHistory, IndexRedirect} from 'react-router'
4 | import Container from './container'
5 |
6 | import Area from './src/area'
7 | import AreaNegative from './src/area_negative'
8 | import AreaStack from './src/area_stack'
9 | import AreaStackNegative from './src/area_stack_negative'
10 | import Bar from './src/bar'
11 | import BarGroup from './src/bar_group'
12 |
13 | import BarGroupHorizontal from './src/bar_group_horizontal'
14 | import BarGroupNegative from './src/bar_group_horizontal'
15 | import BarHorizontal from './src/bar_horizontal'
16 | import BarNegative from './src/bar_negative'
17 | import BarStack from './src/bar_stack'
18 | import BarStackHorizontal from './src/bar_stack_horizontal'
19 | import BarStackNegative from './src/bar_stack_negative'
20 |
21 | // Declarative route configuration (could also load this config lazily
22 | // instead, all you really need is a single root route, you don't need to
23 | // colocate the entire config).
24 |
25 | ReactDOM.render((
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 | ), document.getElementById('root')
45 | )
--------------------------------------------------------------------------------
/src/bar_group_horizontal.jsx:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | import {
4 | default as React,
5 | Component,
6 | PropTypes,
7 | } from 'react';
8 |
9 | import {
10 | Xaxis,
11 | Yaxis,
12 | Xgrid,
13 | Ygrid,
14 | Legend
15 | } from 'react-d3-core';
16 |
17 | import {
18 | BarGroupHorizontal,
19 | Chart
20 | } from 'react-d3-shape';
21 |
22 | import {horizontalProps} from './commonProps';
23 |
24 | export default class BarGroupHorizontalChart extends Component {
25 |
26 | constructor(props) {
27 | super(props);
28 | }
29 |
30 | static defaultProps = {
31 | onMouseOver: () => {},
32 | onMouseOut: () => {},
33 | ...horizontalProps
34 | }
35 |
36 | static propTypes = {
37 | width: PropTypes.number.isRequired,
38 | height: PropTypes.number.isRequired,
39 | margins: PropTypes.object.isRequired,
40 | data: PropTypes.array.isRequired,
41 | chartSeries: PropTypes.array.isRequired
42 | }
43 |
44 | render() {
45 |
46 | const {
47 | width,
48 | height,
49 | margins,
50 | data,
51 | chartSeries,
52 | showXGrid,
53 | showYGrid,
54 | showLegend,
55 | categoricalColors
56 | } = this.props;
57 |
58 | var xgrid, ygrid;
59 |
60 | if(showXGrid) xgrid =
61 | if(showYGrid) ygrid =
62 |
63 | return (
64 |
65 | {showLegend?
66 |
73 | : null
74 | }
75 |
83 |
86 | {xgrid}
87 | {ygrid}
88 |
89 |
90 | {this.props.children}
91 |
92 |
93 | )
94 | }
95 | }
96 |
--------------------------------------------------------------------------------
/src/bar_stack_horizontal.jsx:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | import {
4 | default as React,
5 | Component,
6 | PropTypes,
7 | } from 'react';
8 |
9 | import {
10 | Xaxis,
11 | Yaxis,
12 | Xgrid,
13 | Ygrid,
14 | Legend
15 | } from 'react-d3-core';
16 |
17 | import {
18 | BarStackHorizontal,
19 | Chart
20 | } from 'react-d3-shape';
21 |
22 | import {horizontalProps} from './commonProps';
23 |
24 | export default class BarStackChart extends Component {
25 |
26 | constructor(props) {
27 | super(props);
28 | }
29 |
30 | static defaultProps = {
31 | onMouseOver: () => {},
32 | onMouseOut: () => {},
33 | ...horizontalProps
34 | }
35 |
36 | static propTypes = {
37 | width: PropTypes.number.isRequired,
38 | height: PropTypes.number.isRequired,
39 | margins: PropTypes.object.isRequired,
40 | data: PropTypes.array.isRequired,
41 | chartSeries: PropTypes.array.isRequired
42 | }
43 |
44 | render() {
45 |
46 | const {
47 | width,
48 | height,
49 | margins,
50 | data,
51 | chartSeries,
52 | showXGrid,
53 | showYGrid,
54 | showLegend,
55 | categoricalColors
56 | } = this.props;
57 |
58 | var xgrid, ygrid;
59 |
60 | if(showXGrid) xgrid =
61 | if(showYGrid) ygrid =
62 |
63 | return (
64 |
65 | {showLegend?
66 |
73 | : null
74 | }
75 |
84 |
87 | {xgrid}
88 | {ygrid}
89 |
90 |
91 | {this.props.children}
92 |
93 |
94 | )
95 | }
96 | }
97 |
--------------------------------------------------------------------------------
/example/src/area_stack.jsx:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | import React, {Component} from 'react'
4 | import {AreaStackChart} from '../../src'
5 |
6 | var generalChartData = require('dsv?delimiter=\t!./data/browser.tsv')
7 | var formatPercent = d3.format(".0%");
8 |
9 | var chartSeries = [
10 | {
11 | field: 'IE',
12 | name: 'IE browser',
13 | style: {
14 | "fill-opacity": .5
15 | }
16 | },
17 | {
18 | field: 'Chrome',
19 | name: 'Chrome browser'
20 | },
21 | {
22 | field: 'Firefox'
23 | },
24 | {
25 | field: 'Safari',
26 | name: 'Safari browser'
27 | },
28 | {
29 | field: 'Opera',
30 | name: 'Opera browser'
31 | }
32 | ],
33 | x = function(d) {
34 | var parseDate = d3.time.format("%y-%b-%d").parse;
35 | return parseDate(d.date);
36 | },
37 | xScale = 'time',
38 | y = function(d) {
39 | return d / 100;
40 | };
41 |
42 | module.exports = React.createClass({
43 | getInitialState: function() {
44 | return {
45 | width: 600,
46 | height: 500,
47 | series: chartSeries
48 | }
49 | },
50 | onClick: function() {
51 | this.setState({
52 | width: this.state.width === 600? 500: 600,
53 | height: this.state.width === 600? 600: 500,
54 | series: this.state.width === 600? [
55 | {
56 | field: 'IE',
57 | name: 'IE browser',
58 | style: {
59 | "fill-opacity": .5
60 | }
61 | },
62 | {
63 | field: 'Chrome',
64 | name: 'Chrome browser'
65 | },
66 | {
67 | field: 'Firefox'
68 | }
69 | ]: chartSeries
70 | })
71 | },
72 | render: function() {
73 |
74 | return (
75 |
88 | )
89 | }
90 | })
--------------------------------------------------------------------------------
/example/container.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react'
2 | import {Nav, NavItem} from 'react-bootstrap'
3 |
4 | export default class ContainerExample extends Component {
5 | constructor(props) {
6 | super(props)
7 | }
8 |
9 | render() {
10 |
11 | const route = this.props.routes[1].path || 'area'
12 |
13 | return (
14 |
15 |
24 |
25 |
40 |
41 | {this.props.children}
42 |
65 |
66 |
75 |
76 | )
77 | }
78 | })
79 |
80 | ReactDOM.render(
81 |
82 | , document.getElementById('data_scatter')
83 | )
84 | })()
85 |
--------------------------------------------------------------------------------
/example/src/line_multi.jsx:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | var React = require('react');
4 | var ReactDOM = require('react-dom');
5 | var Chart = require('react-d3-core').Chart;
6 | var LineChart = require('../../lib').LineChart;
7 |
8 | (function() {
9 | var generalChartData = require('dsv?delimiter=\t!./data/temp.tsv')
10 |
11 | var chartSeries = [
12 | {
13 | field: 'New York',
14 | name: 'New York Temp',
15 | color: '#ff7f0e'
16 | },
17 | {
18 | field: 'San Francisco',
19 | name: 'San Francisco Temp',
20 | color: '#2ca02c'
21 | },
22 | {
23 | field: 'Austin',
24 | name: 'Austin Temp',
25 | color: '#7777ff',
26 | area: true
27 | }
28 | ],
29 | interpolate = 'monotone',
30 | x = function(d) {
31 | var parseDate = d3.time.format("%Y%m%d").parse;
32 | return parseDate(d.date);
33 | },
34 | xScale = 'time';
35 | chartSeries.reverse();
36 |
37 | var Container = React.createClass({
38 | getInitialState: function() {
39 | return {
40 | width: 600,
41 | height: 400,
42 | series: chartSeries
43 | }
44 | },
45 | onClick: function() {
46 | this.setState({
47 | width: this.state.width === 600? 400: 600,
48 | height: this.state.width === 600? 600: 400,
49 | series: this.state.width === 600? [{
50 | field: 'Austin',
51 | name: 'Austin Temp',
52 | color: '#7777ff',
53 | area: true
54 | }]: chartSeries
55 | })
56 | },
57 | render: function() {
58 |
59 | return (
60 |
61 |
62 |
67 |
74 |
75 |
76 | )
77 | }
78 | })
79 |
80 | ReactDOM.render(
81 |
82 | , document.getElementById('data_line_multi')
83 | )
84 | })()
85 |
--------------------------------------------------------------------------------
/example/src/line_multi_negative.jsx:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | var React = require('react');
4 | var ReactDOM = require('react-dom');
5 | var Chart = require('react-d3-core').Chart;
6 | var LineChart = require('../../lib').LineChart;
7 |
8 | (function() {
9 | var generalChartData = require('dsv?delimiter=\t!./data/temp3.tsv')
10 |
11 | var chartSeries = [
12 | {
13 | field: 'New York',
14 | name: 'New York Temp',
15 | color: '#ff7f0e',
16 | area: true
17 | },
18 | {
19 | field: 'San Francisco',
20 | name: 'San Francisco Temp',
21 | color: '#2ca02c'
22 | },
23 | {
24 | field: 'Austin',
25 | name: 'Austin Temp',
26 | color: '#7777ff'
27 | }
28 | ],
29 | interpolate = 'monotone',
30 | x = function(d) {
31 | var parseDate = d3.time.format("%Y%m%d").parse;
32 | return parseDate(d.date);
33 | },
34 | xScale = 'time',
35 | y = function(d) {
36 | return +d;
37 | };
38 |
39 | var Container = React.createClass({
40 | getInitialState: function() {
41 | return {
42 | width: 600,
43 | height: 400,
44 | series: chartSeries
45 | }
46 | },
47 | onClick: function() {
48 | this.setState({
49 | width: this.state.width === 600? 400: 600,
50 | height: this.state.width === 600? 600: 400,
51 | series: this.state.width === 600? [{
52 | field: 'Austin',
53 | name: 'Austin Temp',
54 | color: '#7777ff',
55 | area: true
56 | }]: chartSeries
57 | })
58 | },
59 | render: function() {
60 |
61 | return (
62 |
63 |
64 |
69 |
76 |
77 |
78 | )
79 | }
80 | })
81 |
82 | ReactDOM.render(
83 |
84 | , document.getElementById('data_line_multi_negative')
85 | )
86 | })()
87 |
--------------------------------------------------------------------------------
/example/src/pie.jsx:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | var React = require('react');
4 | var ReactDOM = require('react-dom');
5 | var ChartPie = require('../../lib').ChartPie;
6 | var PieChart = require('../../lib').PieChart;
7 |
8 | (function() {
9 | var generalChartData = require('dsv?delimiter=,!./data/age_pie.csv')
10 |
11 | var value = function(d) {
12 | return +d.population;
13 | },
14 | name = function(d) {
15 | return d.age;
16 | },
17 | chartSeries = [
18 | {
19 | "field": "<5",
20 | "name": "less than 5",
21 | "color": "red",
22 | "style": {
23 | "fill-opacity": .2
24 | }
25 | },
26 | {
27 | "field": "5-13",
28 | "name": "5 to 13",
29 | style: {
30 | "fill-opacity": .5
31 | }
32 | },
33 | {
34 | "field": "14-17",
35 | "name": "14 to 17"
36 | },
37 | {
38 | "field": "18-24",
39 | "name": "18 to 24"
40 | },
41 | {
42 | "field": "25-44",
43 | "name": "25 to 44"
44 | },
45 | {
46 | "field": "45-64",
47 | "name": "45 to 64"
48 | }
49 | ];
50 |
51 | var Container = React.createClass({
52 | getInitialState: function() {
53 | return {
54 | width: 600,
55 | height: 400,
56 | series: chartSeries
57 | }
58 | },
59 | onClick: function() {
60 | this.setState({
61 | width: this.state.width === 600? 400: 600,
62 | height: this.state.width === 600? 600: 400,
63 | series: this.state.width === 600? [{
64 | "field": "<5",
65 | "name": "less than 5",
66 | "color": "red",
67 | "style": {
68 | "fill-opacity": .2
69 | }
70 | },
71 | {
72 | "field": "5-13",
73 | "name": "5 to 13",
74 | style: {
75 | "fill-opacity": .5
76 | }
77 | }]: chartSeries
78 | })
79 | },
80 | render: function() {
81 |
82 | return (
83 |
94 | )
95 | }
96 | })
97 |
98 | ReactDOM.render(
99 |
100 | , document.getElementById('data_pie')
101 | )
102 | })()
103 |
--------------------------------------------------------------------------------
/example/src/bar_stack.jsx:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | var React = require('react');
4 | var BarStackChart = require('../../src').BarStackChart;
5 |
6 | var generalChartData = require('dsv?delimiter=,!./data/age.csv')
7 |
8 | var chartSeries = [
9 | {
10 | field: 'Under 5 Years',
11 | name: 'Under 5 Years'
12 | },
13 | {
14 | field: '5 to 13 Years',
15 | name: '5 to 13 Years'
16 | },
17 | {
18 | field: '14 to 17 Years',
19 | name: '14 to 17 Years'
20 | },
21 | {
22 | field: '18 to 24 Years',
23 | name: '18 to 24 Years'
24 | },
25 | {
26 | field: '25 to 44 Years',
27 | name: '25 to 44 Years',
28 | style: {
29 | "fill-opacity": .4
30 | }
31 | },
32 | {
33 | field: '45 to 64 Years',
34 | name: '45 to 64 Years'
35 | },
36 | {
37 | field: '65 Years and Over',
38 | name: '65 Years and Over'
39 | },
40 |
41 | ],
42 | x = function(d) {
43 | return d.State;
44 | },
45 | xScale = 'ordinal',
46 | y = function(d) {
47 | return +d;
48 | },
49 | yTickFormat = d3.format(".2s");
50 |
51 | module.exports = React.createClass({
52 | getInitialState: function() {
53 | return {
54 | width: 600,
55 | height: 500,
56 | series: chartSeries
57 | }
58 | },
59 | onClick: function() {
60 | this.setState({
61 | width: this.state.width === 600? 500: 600,
62 | height: this.state.width === 600? 600: 500,
63 | series: this.state.width === 600? [
64 | {
65 | field: '5 to 13 Years',
66 | name: '5 to 13 Years'
67 | },
68 | {
69 | field: '14 to 17 Years',
70 | name: '14 to 17 Years'
71 | },
72 | {
73 | field: '18 to 24 Years',
74 | name: '18 to 24 Years'
75 | },
76 | {
77 | field: '25 to 44 Years',
78 | name: '25 to 44 Years',
79 | style: {
80 | "fill-opacity": .4
81 | }
82 | }
83 | ]: chartSeries
84 | })
85 | },
86 | render: function() {
87 |
88 | return (
89 |
90 |
91 |
101 |
102 | )
103 | }
104 | })
105 |
--------------------------------------------------------------------------------
/example/src/bar_stack_horizontal.jsx:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | var React = require('react');
4 | var BarStackHorizontalChart = require('../../src').BarStackHorizontalChart;
5 |
6 | var generalChartData = require('dsv?delimiter=,!./data/age.csv')
7 |
8 | var chartSeries = [
9 | {
10 | field: 'Under 5 Years',
11 | name: 'Under 5 Years'
12 | },
13 | {
14 | field: '5 to 13 Years',
15 | name: '5 to 13 Years'
16 | },
17 | {
18 | field: '14 to 17 Years',
19 | name: '14 to 17 Years'
20 | },
21 | {
22 | field: '18 to 24 Years',
23 | name: '18 to 24 Years'
24 | },
25 | {
26 | field: '25 to 44 Years',
27 | name: '25 to 44 Years',
28 | style: {
29 | "fill-opacity": .4
30 | }
31 | },
32 | {
33 | field: '45 to 64 Years',
34 | name: '45 to 64 Years'
35 | },
36 | {
37 | field: '65 Years and Over',
38 | name: '65 Years and Over'
39 | },
40 |
41 | ],
42 | y = function(d) {
43 | return d.State;
44 | },
45 | yScale = 'ordinal',
46 | x = function(d) {
47 | return +d;
48 | },
49 | xTickFormat = d3.format(".2s");
50 |
51 | module.exports = React.createClass({
52 | getInitialState: function() {
53 | return {
54 | width: 600,
55 | height: 500,
56 | series: chartSeries
57 | }
58 | },
59 | onClick: function() {
60 | this.setState({
61 | width: this.state.width === 600? 500: 600,
62 | height: this.state.width === 600? 600: 500,
63 | series: this.state.width === 600? [
64 | {
65 | field: '5 to 13 Years',
66 | name: '5 to 13 Years'
67 | },
68 | {
69 | field: '14 to 17 Years',
70 | name: '14 to 17 Years'
71 | },
72 | {
73 | field: '18 to 24 Years',
74 | name: '18 to 24 Years'
75 | },
76 | {
77 | field: '25 to 44 Years',
78 | name: '25 to 44 Years',
79 | style: {
80 | "fill-opacity": .4
81 | }
82 | }
83 | ]: chartSeries
84 | })
85 | },
86 | render: function() {
87 |
88 | return (
89 |
90 |
91 |
102 |
103 | )
104 | }
105 | })
106 |
--------------------------------------------------------------------------------
/docs/charts/line_chart.md:
--------------------------------------------------------------------------------
1 | # Line Chart
2 |
3 |
4 | ## Required Props
5 |
6 | ### data
7 |
8 | - type: `array of object`
9 |
10 | each object has same key
11 |
12 | example:
13 |
14 | [{
15 | "date": "04/23/12",
16 | "Group1": "-20",
17 | "Group2": "12",
18 | "Group3": "46"
19 | }, {
20 | "date": "04/24/12",
21 | "Group1": "32",
22 | "Group2": "-20",
23 | "Group3": "24"
24 | }]
25 |
26 |
27 |
28 | #### x
29 |
30 | - type: `function`
31 |
32 | parsed data function
33 |
34 | #### chartSeries
35 |
36 | - type: `array of object`
37 | - field: `required`, define the data field
38 | - name: `optional`, the show name of this data. default is the same with field.
39 | - color: `optional`, show categorical color
40 |
41 | example:
42 |
43 | [{
44 | field: "Group1",
45 | name: "Group 1",
46 | color: "red"
47 | },
48 | {
49 | field: "Group2",
50 | name: "Group 2",
51 | color: "black"
52 | }]
53 |
54 | ## Appearance Props (optional)
55 |
56 |
57 | ## X axis props (optional)
58 |
59 | ### xDomain
60 |
61 | reference [react-d3-core](https://github.com/react-d3/react-d3-core) for more detail
62 |
63 | ### xLabel
64 |
65 | ## Y axis props (optional)
66 |
67 | ### y
68 |
69 | - type: function
70 |
71 | - default: `y: (d) => {return +d;}`
72 |
73 | ### yDomain
74 |
75 | reference [react-d3-core](https://github.com/react-d3/react-d3-core) for more details.
76 |
77 | ### yLabel
78 |
79 | ### yLabelPosition
80 |
81 | ## Example
82 |
83 | ```js
84 | "use strict";
85 |
86 | var React = require('react');
87 | var Chart = require('react-d3-core').Chart;
88 | var LineChart = require('react-d3-basic').LineChart;
89 |
90 | (function() {
91 |
92 | var generalChartData = require('./data/user.json');
93 |
94 | var chartSeries = [
95 | {
96 | field: 'age',
97 | name: 'Age',
98 | color: '#ff7f0e'
99 | }
100 | ],
101 | x = function(d) {
102 | return d.index;
103 | },
104 | xDomain = d3.extent(generalChartData, x),
105 | xLabel = "Index",
106 | y = function(d) {
107 | return d;
108 | },
109 | yDomain = d3.extent(generalChartData, function(d) {return d.age;}),
110 | yLabel = "Age",
111 | yLabelPosition = 'right'
112 |
113 | React.render(
114 |
115 |
126 |
127 | , document.getElementById('data_line')
128 | )
129 | })()
130 | ```
131 |
--------------------------------------------------------------------------------
/example/src/bar_group.jsx:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | import React, {Component} from 'react'
4 | import {BarGroupChart} from '../../src'
5 |
6 | var generalChartData = require('dsv?delimiter=,!./data/age.csv')
7 |
8 | var chartSeries = [
9 | {
10 | field: 'Under 5 Years',
11 | name: 'Under 5 Years'
12 | },
13 | {
14 | field: '5 to 13 Years',
15 | name: '5 to 13 Years'
16 | },
17 | {
18 | field: '14 to 17 Years',
19 | name: '14 to 17 Years',
20 | style: {
21 | "fill-opacity": .4
22 | }
23 | },
24 | {
25 | field: '18 to 24 Years',
26 | name: '18 to 24 Years'
27 | },
28 | {
29 | field: '25 to 44 Years',
30 | name: '25 to 44 Years'
31 | },
32 | {
33 | field: '45 to 64 Years',
34 | name: '45 to 64 Years'
35 | },
36 | {
37 | field: '65 Years and Over',
38 | name: '65 Years and Over'
39 | },
40 |
41 | ],
42 | x = function(d) {
43 | return d.State;
44 | },
45 | xDomain = generalChartData.map(function(d) { return d.State; }),
46 | xRangeRoundBands = {interval: [0, 840], padding: .1},
47 | xScale = 'ordinal',
48 | y = function(d) {
49 | return +d;
50 | },
51 | yTickFormat = d3.format(".2s");
52 |
53 | module.exports = React.createClass({
54 | getInitialState: function() {
55 | return {
56 | width: 600,
57 | height: 500,
58 | series: chartSeries
59 | }
60 | },
61 | onClick: function() {
62 | this.setState({
63 | width: this.state.width === 600? 500: 600,
64 | height: this.state.width === 600? 600: 500,
65 | series: this.state.width === 600? [
66 | {
67 | field: '5 to 13 Years',
68 | name: '5 to 13 Years'
69 | },
70 | {
71 | field: '14 to 17 Years',
72 | name: '14 to 17 Years'
73 | },
74 | {
75 | field: '18 to 24 Years',
76 | name: '18 to 24 Years'
77 | },
78 | {
79 | field: '25 to 44 Years',
80 | name: '25 to 44 Years',
81 | style: {
82 | "fill-opacity": .4
83 | }
84 | }
85 | ]: chartSeries
86 | })
87 | },
88 | render: function() {
89 |
90 | return (
91 |
92 |
93 |
104 |
105 | )
106 | }
107 | })
108 |
--------------------------------------------------------------------------------
/example/src/bar_group_horizontal.jsx:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | var React = require('react');
4 | var BarGroupHorizontalChart = require('../../src').BarGroupHorizontalChart;
5 |
6 | var generalChartData = require('dsv?delimiter=,!./data/age.csv')
7 |
8 | var chartSeries = [
9 | {
10 | field: 'Under 5 Years',
11 | name: 'Under 5 Years'
12 | },
13 | {
14 | field: '5 to 13 Years',
15 | name: '5 to 13 Years'
16 | },
17 | {
18 | field: '14 to 17 Years',
19 | name: '14 to 17 Years',
20 | style: {
21 | "fill-opacity": .4
22 | }
23 | },
24 | {
25 | field: '18 to 24 Years',
26 | name: '18 to 24 Years'
27 | },
28 | {
29 | field: '25 to 44 Years',
30 | name: '25 to 44 Years'
31 | },
32 | {
33 | field: '45 to 64 Years',
34 | name: '45 to 64 Years'
35 | },
36 | {
37 | field: '65 Years and Over',
38 | name: '65 Years and Over'
39 | },
40 |
41 | ],
42 | y = function(d) {
43 | return d.State;
44 | },
45 | yDomain = generalChartData.map(function(d) { return d.State; }),
46 | yRangeRoundBands = {interval: [0, 840], padding: .1},
47 | yScale = 'ordinal',
48 | x = function(d) {
49 | return +d;
50 | },
51 | xTickFormat = d3.format(".2s");
52 |
53 | module.exports = React.createClass({
54 | getInitialState: function() {
55 | return {
56 | width: 600,
57 | height: 500,
58 | series: chartSeries
59 | }
60 | },
61 | onClick: function() {
62 | this.setState({
63 | width: this.state.width === 600? 500: 600,
64 | height: this.state.width === 600? 600: 500,
65 | series: this.state.width === 600? [
66 | {
67 | field: '5 to 13 Years',
68 | name: '5 to 13 Years'
69 | },
70 | {
71 | field: '14 to 17 Years',
72 | name: '14 to 17 Years'
73 | },
74 | {
75 | field: '18 to 24 Years',
76 | name: '18 to 24 Years'
77 | },
78 | {
79 | field: '25 to 44 Years',
80 | name: '25 to 44 Years',
81 | style: {
82 | "fill-opacity": .4
83 | }
84 | }
85 | ]: chartSeries
86 | })
87 | },
88 | render: function() {
89 |
90 | return (
91 |
92 |
93 |
104 |
105 | )
106 | }
107 | })
108 |
109 |
--------------------------------------------------------------------------------
/example/src/bar_stack_negative.jsx:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | var React = require('react');
4 | var BarStackChart = require('../../src').BarStackChart;
5 |
6 | var generalChartData = require('dsv?delimiter=,!./data/fake_num.csv')
7 |
8 | var chartSeries = [
9 | {
10 | field: 'num1',
11 | name: 'num1',
12 | style: {
13 | "fill-opacity": .8
14 | }
15 | },
16 | {
17 | field: 'num2',
18 | name: 'num2',
19 | style: {
20 | "fill-opacity": .8
21 | }
22 | },
23 | {
24 | field: 'num3',
25 | name: 'num3',
26 | style: {
27 | "fill-opacity": .8
28 | }
29 | },
30 | {
31 | field: 'num4',
32 | name: 'num4',
33 | style: {
34 | "fill-opacity": .8
35 | }
36 | },
37 | {
38 | field: 'num5',
39 | name: 'num5',
40 | style: {
41 | "fill-opacity": .8
42 | }
43 | },
44 | {
45 | field: 'num6',
46 | name: 'num6',
47 | style: {
48 | "fill-opacity": .8
49 | }
50 | },
51 | {
52 | field: 'num7',
53 | name: 'num7',
54 | style: {
55 | "fill-opacity": .8
56 | }
57 | }
58 | ],
59 | x = function(d) {
60 | return d.State;
61 | },
62 | xScale = 'ordinal',
63 | y = function(d) {
64 | return +d;
65 | },
66 | yTickFormat = d3.format(".2s");
67 |
68 | module.exports = React.createClass({
69 | getInitialState: function() {
70 | return {
71 | width: 600,
72 | height: 500,
73 | series: chartSeries
74 | }
75 | },
76 | onClick: function() {
77 | this.setState({
78 | width: this.state.width === 600? 500: 600,
79 | height: this.state.width === 600? 600: 500,
80 | series: this.state.width === 600? [
81 | {
82 | field: 'num5',
83 | name: 'num5',
84 | style: {
85 | "fill-opacity": .8
86 | }
87 | },
88 | {
89 | field: 'num6',
90 | name: 'num6',
91 | style: {
92 | "fill-opacity": .8
93 | }
94 | },
95 | {
96 | field: 'num7',
97 | name: 'num7',
98 | style: {
99 | "fill-opacity": .8
100 | }
101 | }
102 | ]: chartSeries
103 | })
104 | },
105 | render: function() {
106 |
107 | return (
108 |
109 |
110 |
120 |
121 | )
122 | }
123 | })
124 |
--------------------------------------------------------------------------------
/example/src/data/user2.json:
--------------------------------------------------------------------------------
1 |
2 | [
3 | {"name":"Lavon Hilll I","BMI":20.57,"age":12,"birthday":"1994-10-26T00:00:00.000Z","city":"Annatown","married":true,"index":1}
4 | ,
5 | {"name":"Clovis Pagac","BMI":24.28,"age":26,"birthday":"1995-11-10T00:00:00.000Z","city":"South Eldredtown","married":false,"index":3}
6 | ,
7 | {"name":"Gaylord Paucek","BMI":24.41,"age":30,"birthday":"1975-06-12T00:00:00.000Z","city":"Koeppchester","married":true,"index":5}
8 | ,
9 | {"name":"Ashlynn Kuhn MD","BMI":23.77,"age":32,"birthday":"1985-08-09T00:00:00.000Z","city":"West Josiemouth","married":false,"index":6}
10 | ,
11 | {"name":"Fern Schmeler IV","BMI":27.33,"age":26,"birthday":"2005-02-10T00:00:00.000Z","city":"West Abigaleside","married":true,"index":7}
12 | ,
13 | {"name":"Enid Weber","BMI":18.72,"age":17,"birthday":"1998-11-30T00:00:00.000Z","city":"Zackton","married":true,"index":8}
14 | ,
15 | {"name":"Leatha O'Hara","BMI":17.68,"age":42,"birthday":"2010-10-17T00:00:00.000Z","city":"Lake Matilda","married":false,"index":9}
16 | ,
17 | {"name":"Korbin Steuber","BMI":16.35,"age":39,"birthday":"1975-06-30T00:00:00.000Z","city":"East Armandofort","married":true,"index":10}
18 | ,
19 | {"name":"Brennon Torphy","BMI":27.37,"age":24,"birthday":"2003-10-21T00:00:00.000Z","city":"Croninfort","married":true,"index":11}
20 | ,
21 | {"name":"Ms. Genoveva Bradtke","BMI":28.63,"age":19,"birthday":"1983-01-10T00:00:00.000Z","city":"Port Emanuel","married":true,"index":12}
22 | ,
23 | {"name":"Gregg Halvorson","BMI":15.45,"age":15,"birthday":"2004-06-15T00:00:00.000Z","city":"Lake Angelinastad","married":false,"index":13}
24 | ,
25 | {"name":"Mr. Sabina Schroeder III","BMI":24.27,"age":26,"birthday":"1980-11-22T00:00:00.000Z","city":"Toyview","married":true,"index":14}
26 | ,
27 | {"name":"Alanna Mitchell","BMI":29.25,"age":37,"birthday":"1971-08-04T00:00:00.000Z","city":"Lake Monserratmouth","married":false,"index":15}
28 | ,
29 | {"name":"Ronny Sanford","BMI":29.16,"age":24,"birthday":"1994-11-24T00:00:00.000Z","city":"New Claudhaven","married":false,"index":16}
30 | ,
31 | {"name":"Emmitt Pouros","BMI":27.95,"age":14,"birthday":"1989-04-04T00:00:00.000Z","city":"Moorefurt","married":true,"index":17}
32 | ,
33 | {"name":"Earl Purdy","BMI":18.34,"age":38,"birthday":"2013-04-03T00:00:00.000Z","city":"Lake Rowanberg","married":true,"index":18}
34 | ,
35 | {"name":"Cordelia Klocko","BMI":25.85,"age":36,"birthday":"2011-01-17T00:00:00.000Z","city":"Lakinchester","married":true,"index":19}
36 | ,
37 | {"name":"Guido Conroy","BMI":25.17,"age":39,"birthday":"1977-04-20T00:00:00.000Z","city":"Scarlettland","married":true,"index":20}
38 | ,
39 | {"name":"Miss Demond Weissnat V","BMI":21.44,"age":10,"birthday":"2007-06-09T00:00:00.000Z","city":"Savionberg","married":false,"index":21}
40 | ,
41 | {"name":"Easton Mante","BMI":20.61,"age":20,"birthday":"2007-01-29T00:00:00.000Z","city":"Kutchberg","married":false,"index":22}
42 | ,
43 | {"name":"Dayton Ebert","BMI":29.88,"age":30,"birthday":"1978-04-27T00:00:00.000Z","city":"West Wiley","married":true,"index":23}
44 | ]
45 |
--------------------------------------------------------------------------------
/docs/docs_pre/charts/pie_chart.md:
--------------------------------------------------------------------------------
1 | # Pie Chart
2 |
3 | ## Required Props
4 |
5 | !!import "../shared/charts/required.md"
6 |
7 | ## Appearance Props (optional)
8 |
9 | !!import "../shared/charts/appearance.md"
10 |
11 | ### name
12 |
13 | ### outerRadius
14 |
15 | ### innerRadius
16 |
17 | ### pieSort
18 |
19 | ### legendPosition
20 |
21 |
22 | ## Show Props (optional)
23 |
24 | !!import "../shared/charts/show.md"
25 |
26 | ## Class Props (optional)
27 |
28 | !!import "../shared/charts/class.md"
29 |
30 |
31 | ## Example
32 |
33 | ```js
34 | "use strict";
35 |
36 | var React = require('react');
37 | var Chart = require('react-d3-core').Chart;
38 | var PieChart = require('react-d3-basic').PieChart;
39 |
40 | (function() {
41 | var generalChartData = require('dsv?delimiter=,!./data/age_pie.csv')
42 |
43 | var width = 960,
44 | height = 500,
45 | radius = Math.min(width, height - 120) / 2,
46 | margins = {top: 50, right: 50, bottom: 20, left: 50},
47 | id = "test-chart",
48 | title = "Pie Chart",
49 | svgClassName = "test-chart-class",
50 | titleClassName = "test-chart-title-class",
51 | legendClassName = "test-legend",
52 | showLegend = true,
53 | value = function(d) {
54 | return +d.population;
55 | },
56 | name = function(d) {
57 | return d.age;
58 | },
59 | chartSeries = [
60 | {
61 | "field": "<5",
62 | "name": "less than 5"
63 | },
64 | {
65 | "field": "5-13",
66 | "name": "5 to 13"
67 | },
68 | {
69 | "field": "14-17",
70 | "name": "14 to 17"
71 | },
72 | {
73 | "field": "18-24",
74 | "name": "18 to 24"
75 | },
76 | {
77 | "field": "25-44",
78 | "name": "25 to 44"
79 | },
80 | {
81 | "field": "45-64",
82 | "name": "45 to 64"
83 | }
84 | ],
85 | legendPosition = 'right',
86 | outerRadius = radius - 10,
87 | innerRadius = 0;
88 |
89 |
90 | React.render(
91 |
97 |
118 |
119 | , document.getElementById('data_pie')
120 | )
121 | })()
122 |
123 | ```
124 |
--------------------------------------------------------------------------------
/example/src/bar_group_negative.jsx:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | var React = require('react');
4 | console.log(require('react-d3-shape'))
5 | var BarGroupChart = require('../../src').BarGroupChart;
6 |
7 | var generalChartData = require('dsv?delimiter=,!./data/fake_num.csv')
8 |
9 | var chartSeries = [
10 | {
11 | field: 'num1',
12 | name: 'num1',
13 | style: {
14 | "fill-opacity": .8
15 | }
16 | },
17 | {
18 | field: 'num2',
19 | name: 'num2',
20 | style: {
21 | "fill-opacity": .8
22 | }
23 | },
24 | {
25 | field: 'num3',
26 | name: 'num3',
27 | style: {
28 | "fill-opacity": .8
29 | }
30 | },
31 | {
32 | field: 'num4',
33 | name: 'num4',
34 | style: {
35 | "fill-opacity": .8
36 | }
37 | },
38 | {
39 | field: 'num5',
40 | name: 'num5',
41 | style: {
42 | "fill-opacity": .8
43 | }
44 | },
45 | {
46 | field: 'num6',
47 | name: 'num6',
48 | style: {
49 | "fill-opacity": .8
50 | }
51 | },
52 | {
53 | field: 'num7',
54 | name: 'num7',
55 | style: {
56 | "fill-opacity": .8
57 | }
58 | },
59 |
60 | ],
61 | x = function(d) {
62 | return d.State;
63 | },
64 | xScale = 'ordinal',
65 | y = function(d) {
66 | return +d;
67 | },
68 | yTickFormat = d3.format(".2s");
69 |
70 | module.exports = React.createClass({
71 | getInitialState: function() {
72 | return {
73 | width: 600,
74 | height: 500,
75 | series: chartSeries
76 | }
77 | },
78 | onClick: function() {
79 | this.setState({
80 | width: this.state.width === 600? 500: 600,
81 | height: this.state.width === 600? 600: 500,
82 | series: this.state.width === 600? [
83 | {
84 | field: 'num5',
85 | name: 'num5',
86 | style: {
87 | "fill-opacity": .8
88 | }
89 | },
90 | {
91 | field: 'num6',
92 | name: 'num6',
93 | style: {
94 | "fill-opacity": .8
95 | }
96 | },
97 | {
98 | field: 'num7',
99 | name: 'num7',
100 | style: {
101 | "fill-opacity": .8
102 | }
103 | }
104 | ]: chartSeries
105 | })
106 | },
107 | render: function() {
108 |
109 | return (
110 |
111 |
112 |
117 |
127 |
128 |
129 | )
130 | }
131 | })
--------------------------------------------------------------------------------
/example/src/animate_line.jsx:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | import {
4 | default as React,
5 | Component,
6 | } from 'react';
7 |
8 | import {
9 | LineChart as LineChart
10 | } from '../../src/index';
11 |
12 | class UpdateLine extends Component {
13 | constructor(props) {
14 | super(props);
15 | this.state = this.props;
16 | }
17 |
18 | componentDidMount() {
19 | var title = this.props.title;
20 | var i = 0;
21 |
22 | var d = this.props.data;
23 |
24 | window.setInterval(() => {
25 |
26 | var title_new = `${title} => ${i} times`;
27 | i++;
28 |
29 | if(i % 2 == 1) {
30 | var generalChartData = require('json!./data/user2.json')
31 | }else {
32 | var generalChartData = require('json!./data/user.json');
33 | }
34 |
35 | this._updateState(title_new, generalChartData)
36 | }, 2000)
37 | }
38 |
39 | _updateState(title, data) {
40 | this.setState({
41 | title: title,
42 | data: data
43 | })
44 | }
45 |
46 | render() {
47 |
48 | return (
49 |
50 | )
51 | }
52 | }
53 |
54 | (() => {
55 |
56 | var generalChartData = require('json!./data/user.json');
57 |
58 | const width = 960,
59 | height = 500,
60 | margins = {top: 20, right: 50, bottom: 30, left: 50},
61 | id = "test-chart",
62 | title = "Simple Line Chart ReLoad Data",
63 | svgClassName = "test-chart-class",
64 | titleClassName = "test-chart-title-class",
65 | showLegend = true,
66 | showXAxis = true,
67 | showYAxis = true,
68 | chartSeries = [
69 | {
70 | field: 'age',
71 | name: 'Age',
72 | color: '#ff7f0e'
73 | }
74 | ],
75 | x = (d) => {
76 | return d.index;
77 | },
78 | xOrient = 'bottom',
79 | xTickOrient = 'top',
80 | xDomain = d3.extent(generalChartData, x),
81 | xRange = [0, width - margins.left - margins.right],
82 | xScale = 'linear',
83 | xAxisClassName = 'x-axis',
84 | xLabel = "Index",
85 | y = (d) => {
86 | return d;
87 | },
88 | yOrient = 'right',
89 | yTickOrient = 'left',
90 | yDomain = d3.extent(generalChartData, (d) => {return d.age;}),
91 | yRange = [height - margins.top - margins.bottom, 0],
92 | yScale = 'linear',
93 | yAxisClassName = 'y-axis',
94 | yLabel = "Age";
95 |
96 | React.render(
97 |
133 | , document.getElementById('data_animate_line')
134 | )
135 | })()
136 |
--------------------------------------------------------------------------------
/example/src/line_animate_multi.jsx:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | var React = require('react');
4 | var ReactDOM = require('react-dom');
5 | var Chart = require('react-d3-core').Chart;
6 | var LineChart = require('../../lib').LineChart;
7 |
8 | (function() {
9 | var generalChartData = require('dsv?delimiter=\t!./data/temp.tsv')
10 | var parseDate = d3.time.format("%Y%m%d").parse;
11 |
12 | var width = 960,
13 | height = 500,
14 | margins = {top: 70, right: 70, bottom: 70, left: 100},
15 | id = "test-chart",
16 | title = "Multipule Line Chart",
17 | svgClassName = "test-chart-class",
18 | titleClassName = "test-chart-title-class",
19 | legendClassName = "test-legend",
20 | showLegend = true,
21 | showXAxis = true,
22 | showYAxis = true,
23 | chartSeries = [
24 | {
25 | field: 'New York',
26 | name: 'New York Temp',
27 | color: '#ff7f0e'
28 | },
29 | {
30 | field: 'San Francisco',
31 | name: 'San Francisco Temp',
32 | color: '#2ca02c'
33 | },
34 | {
35 | field: 'Austin',
36 | name: 'Austin Temp',
37 | color: '#7777ff',
38 | area: true
39 | }
40 | ],
41 | interpolate = 'monotone',
42 | x = function(d) {
43 | return parseDate(d.date);
44 | },
45 | xOrient = 'bottom',
46 | xTickOrient = 'bottom',
47 | xDomain = d3.extent(generalChartData, function(d) { return x(d); }),
48 | xRange = [0, width - margins.left - margins.right],
49 | xScale = 'time',
50 | xAxisClassName = 'x-axis',
51 | xLabel = "Date",
52 | y = function(d) {
53 | return d;
54 | },
55 | yOrient = 'left',
56 | yTickOrient = 'left',
57 | yDomain = [20, 100],
58 | yRange = [height - margins.top - margins.bottom, 0],
59 | yScale = 'linear',
60 | yAxisClassName = 'y-axis',
61 | yLabel = "Temperature (ºF)",
62 | labelOffset = 60,
63 | legendPosition= 'right',
64 | showXGrid= true,
65 | showYGrid= true,
66 | xLabelPosition = 'bottom',
67 | yLabelPosition = 'left';
68 |
69 | ReactDOM.render(
70 |
78 |
116 |
117 |
118 | , document.getElementById('data_line_animate_multi')
119 | )
120 | })()
121 |
--------------------------------------------------------------------------------
/docs/docs_pre/charts/bar_chart.md:
--------------------------------------------------------------------------------
1 | # Bar Chart
2 |
3 | Bar chart combines the `components/bar` and `x, y -axis`.
4 |
5 |
6 | ## Required Props
7 |
8 | !!import "../shared/charts/required.md"
9 |
10 | ## Appearance Props (optional)
11 |
12 | !!import "../shared/charts/appearance.md"
13 |
14 | ## X axis props (optional)
15 |
16 | !!import "../shared/charts/xaxis.md"
17 |
18 | ### xRangeRoundBands
19 |
20 |
21 | ## Y axis props (optional)
22 |
23 | !!import "../shared/charts/yaxis.md"
24 |
25 | ## Show Props (optional)
26 |
27 | !!import "../shared/charts/show.md"
28 |
29 |
30 | ## Class Props (optional)
31 |
32 | !!import "../shared/charts/class.md"
33 |
34 | ## Example code
35 |
36 | ``` js
37 | "use strict";
38 |
39 | var React = require('react');
40 | var Chart = require('react-d3-core').Chart;
41 | var BarChart = require('react-d3-basic').BarChart;
42 |
43 | (function() {
44 | var generalChartData = require('dsv?delimiter=\t!./data/letter.tsv')
45 |
46 | var width = 960,
47 | height = 500,
48 | margins = {top: 50, right: 50, bottom: 50, left: 50},
49 | id = "test-chart",
50 | title = "Bar Chart",
51 | svgClassName = "test-chart-class",
52 | titleClassName = "test-chart-title-class",
53 | legendClassName = "test-legend",
54 | legendPosition = "right",
55 | showLegend = true,
56 | showXAxis = true,
57 | showYAxis = true,
58 | chartSeries = [
59 | {
60 | field: 'frequency',
61 | name: 'Frequency'
62 | }
63 | ],
64 | x = function(d) {
65 | return d.letter;
66 | },
67 | xOrient = 'bottom',
68 | xTickOrient = 'bottom',
69 | xDomain = generalChartData.map(function(d) { return d.letter; }),
70 | xRangeRoundBands = {interval: [0, width - margins.left - margins.right], padding: .1},
71 | xScale = 'ordinal',
72 | xAxisClassName = 'x-axis',
73 | xLabel = "Letter",
74 | xLabelPosition = 'bottom',
75 | y = function(d) {
76 | return +d;
77 | },
78 | yOrient = 'left',
79 | yTickOrient = 'right',
80 | yRange = [height - margins.top - margins.bottom, 0],
81 | yDomain = [0, +d3.max(generalChartData, function(d) { return d.frequency; })],
82 | yScale = 'linear',
83 | yAxisClassName = 'y-axis',
84 | yLabel = "Frequency",
85 | yTicks = [10, "%"],
86 | yLabelPosition = 'left';
87 |
88 | React.render(
89 |
95 |
130 |
131 | , document.getElementById('data_bar')
132 | )
133 | })()
134 | ```
135 |
136 |
--------------------------------------------------------------------------------
/docs/docs_pre/charts/area_stack_chart.md:
--------------------------------------------------------------------------------
1 | # Area Stack Chart
2 |
3 | Area stack chart combines the `components/area_stack` and `x,y-axis`
4 |
5 | ## Required Props
6 |
7 | !!import "../shared/charts/required.md"
8 |
9 | ## Appearance Props (optional)
10 |
11 | !!import "../shared/charts/appearance.md"
12 |
13 | ## X axis props (optional)
14 |
15 | !!import "../shared/charts/xaxis.md"
16 |
17 | ### xRange
18 |
19 |
20 | ## Y axis props (optional)
21 |
22 | !!import "../shared/charts/yaxis.md"
23 |
24 | ## Show Props (optional)
25 |
26 | !!import "../shared/charts/show.md"
27 |
28 | ## Class Props (optional)
29 |
30 | !!import "../shared/charts/class.md"
31 |
32 | ## Example
33 |
34 | ```js
35 | "use strict";
36 |
37 | var React = require('react');
38 | var Chart = require('react-d3-core').Chart;
39 | var AreaStackChart = require('react-d3-basic').AreaStackChart;
40 |
41 | (function() {
42 | var generalChartData = require('dsv?delimiter=\t!./data/browser.tsv')
43 |
44 | var parseDate = d3.time.format("%y-%b-%d").parse;
45 | var formatPercent = d3.format(".0%");
46 |
47 | var width = 960,
48 | height = 500,
49 | margins = {top: 50, right: 50, bottom: 50, left: 50},
50 | id = "test-chart",
51 | title = "Stack Area Chart",
52 | svgClassName = "test-chart-class",
53 | titleClassName = "test-chart-title-class",
54 | legendClassName = "test-legend",
55 | showLegend = true,
56 | showXAxis = true,
57 | showYAxis = true,
58 | interpolate = 'basis',
59 | chartSeries = [
60 | {
61 | field: 'IE',
62 | name: 'IE browser'
63 | },
64 | {
65 | field: 'Chrome',
66 | name: 'Chrome browser'
67 | },
68 | {
69 | field: 'Firefox'
70 | },
71 | {
72 | field: 'Safari',
73 | name: 'Safari browser'
74 | },
75 | {
76 | field: 'Opera',
77 | name: 'Opera browser'
78 | }
79 | ],
80 | x = function(d) {
81 | return parseDate(d.date);
82 | },
83 | xOrient = 'bottom',
84 | xTickOrient = 'bottom',
85 | xDomain = d3.extent(generalChartData, function(d) { return x(d); }),
86 | xRange = [0, width - margins.left - margins.right],
87 | xScale = 'time',
88 | xAxisClassName = 'x-axis',
89 | xLabel = "Date",
90 | y = function(d) {
91 | return d / 100;
92 | },
93 | yOrient = 'left',
94 | yTickOrient = 'right',
95 | yRange = [height - margins.top - margins.bottom, 0],
96 | yScale = 'linear',
97 | yAxisClassName = 'y-axis';
98 |
99 | React.render(
100 |
106 |
138 |
139 | , document.getElementById('data_area_stack')
140 | )
141 | })()
142 | ```
143 |
--------------------------------------------------------------------------------
/docs/docs_pre/charts/scatter_chart.md:
--------------------------------------------------------------------------------
1 | ## Scatter Chart
2 |
3 | ## Required Props
4 |
5 | !!import "../shared/charts/required.md"
6 |
7 | ## Appearance Props (optional)
8 |
9 | !!import "../shared/charts/appearance.md"
10 |
11 | ### labelOffset
12 |
13 | ## X axis props (optional)
14 |
15 | !!import "../shared/charts/xaxis.md"
16 |
17 | ### xRange
18 |
19 | ## Y axis props (optional)
20 |
21 | !!import "../shared/charts/yaxis.md"
22 |
23 | ## Show Props (optional)
24 |
25 | !!import "../shared/charts/show.md"
26 |
27 | ## Class Props (optional)
28 |
29 | !!import "../shared/charts/class.md"
30 |
31 | ### scatterClasssName
32 |
33 | ## Example
34 |
35 | ```js
36 | "use strict";
37 |
38 |
39 | var React = require('react');
40 | var Chart = require('react-d3-core').Chart;
41 | var ScatterPlot = require('react-d3-basic').ScatterPlot;
42 |
43 | (function() {
44 | var generalChartData = require('dsv?delimiter=\t!./data/temp.tsv')
45 |
46 | var parseDate = d3.time.format("%Y%m%d").parse;
47 |
48 | var width = 960,
49 | height = 500,
50 | margins = {top: 50, right: 50, bottom: 50, left: 50},
51 | id = "test-chart",
52 | title = "Scatter Plot",
53 | svgClassName = "test-chart-class",
54 | titleClassName = "test-chart-title-class",
55 | legendClassName = "test-legend",
56 | legendPosition = 'right',
57 | labelOffset = 30,
58 | showLegend = true,
59 | showXAxis = true,
60 | showYAxis = true,
61 | chartSeries = [
62 | {
63 | field: 'New York',
64 | name: 'New York Temp',
65 | color: '#ff7f0e',
66 | symbol: "cross"
67 | },
68 | {
69 | field: 'San Francisco',
70 | name: 'San Francisco Temp',
71 | color: '#2ca02c',
72 | symbol: 'diamond'
73 | },
74 | {
75 | field: 'Austin',
76 | name: 'Austin Temp',
77 | color: '#7777ff',
78 | symbol: 'triangle-down'
79 | }
80 | ],
81 | x = function(d) {
82 | return parseDate(d.date);
83 | },
84 | xOrient = 'bottom',
85 | xTickOrient = 'bottom',
86 | xDomain = d3.extent(generalChartData, (d) => { return x(d); }),
87 | xRange = [0, width - margins.left - margins.right],
88 | xScale = 'time',
89 | xAxisClassName = 'x-axis',
90 | xLabel = "Date",
91 | xLabelPosition = 'bottom',
92 | y = function(d) {
93 | return d;
94 | },
95 | yOrient = 'left',
96 | yTickOrient = 'left',
97 | yDomain = [20, 100],
98 | yRange = [height - margins.top - margins.bottom, 0],
99 | yScale = 'linear',
100 | yAxisClassName = 'y-axis',
101 | yLabel = "Temperature (ºF)",
102 | yLabelPosition = 'left',
103 | scatterClassName = 'test-line-dot-class';
104 |
105 |
106 |
107 | React.render(
108 |
114 |
150 |
151 | , document.getElementById('data_scatter')
152 | )
153 | })()
154 |
155 | ```
--------------------------------------------------------------------------------
/docs/docs_pre/charts/bar_group_chart.md:
--------------------------------------------------------------------------------
1 | # Bar Group Chart
2 |
3 | ## Required Props
4 |
5 | !!import "../shared/charts/required.md"
6 |
7 | ## Appearance Props (optional)
8 |
9 | !!import "../shared/charts/appearance.md"
10 |
11 | ### labelOffset
12 |
13 | ## X axis props (optional)
14 |
15 | !!import "../shared/charts/xaxis.md"
16 |
17 | ### xRangeRoundBands
18 |
19 | ## Y axis props (optional)
20 |
21 | !!import "../shared/charts/yaxis.md"
22 |
23 | ### yTickFormat
24 |
25 | ## Show Props (optional)
26 |
27 | !!import "../shared/charts/show.md"
28 |
29 |
30 | ## Example
31 |
32 | ```js
33 | "use strict";
34 |
35 | var React = require('react');
36 | var Chart = require('react-d3-core').Chart;
37 | var BarGroupChart = require('react-d3-basic').BarGroupChart;
38 |
39 | (function() {
40 | var generalChartData = require('dsv?delimiter=,!./data/age.csv')
41 |
42 | var ageNames = d3.keys(generalChartData[0]).filter(function(key) { return key !== "State"; });
43 |
44 | generalChartData.forEach(function(d) {
45 | d.ages = ageNames.map(function(name) { return {name: name, value: +d[name]}; });
46 | });
47 |
48 | var width = 960,
49 | height = 500,
50 | margins = {top: 50, right: 50, bottom: 50, left: 50},
51 | id = "test-chart",
52 | title = "Bar Group Chart",
53 | svgClassName = "test-chart-class",
54 | titleClassName = "test-chart-title-class",
55 | legendClassName = "test-legend",
56 | legendPosition = 'right',
57 | labelOffset = 30,
58 |
59 | showLegend = true,
60 | showXAxis = true,
61 | showYAxis = true,
62 | chartSeries = [
63 | {
64 | field: 'Under 5 Years',
65 | name: 'Under 5 Years'
66 | },
67 | {
68 | field: '5 to 13 Years',
69 | name: '5 to 13 Years'
70 | },
71 | {
72 | field: '14 to 17 Years',
73 | name: '14 to 17 Years'
74 | },
75 | {
76 | field: '18 to 24 Years',
77 | name: '18 to 24 Years'
78 | },
79 | {
80 | field: '25 to 44 Years',
81 | name: '25 to 44 Years'
82 | },
83 | {
84 | field: '45 to 64 Years',
85 | name: '45 to 64 Years'
86 | },
87 | {
88 | field: '65 Years and Over',
89 | name: '65 Years and Over'
90 | },
91 |
92 | ],
93 | x = function(d) {
94 | return d.State;
95 | },
96 | xOrient = 'bottom',
97 | xTickOrient = 'bottom',
98 | xDomain = generalChartData.map(function(d) { return d.State; }),
99 | xRangeRoundBands = {interval: [0, width - margins.left - margins.right], padding: .1},
100 | xScale = 'ordinal',
101 | xAxisClassName = 'x-axis',
102 | xLabel = "Age",
103 | xLabelPosition = 'bottom',
104 | y = function(d) {
105 | return +d;
106 | },
107 | yOrient = 'left',
108 | yTickOrient = 'right',
109 | yRange = [height - margins.top - margins.bottom, 0],
110 | yDomain = [0, d3.max(generalChartData, function(d) { return d3.max(d.ages, (d) => { return d.value; }); })],
111 | yScale = 'linear',
112 | yAxisClassName = 'y-axis',
113 | yLabel = "Population",
114 | yTickFormat = d3.format(".2s"),
115 | yLabelPosition = 'left'
116 |
117 |
118 | React.render(
119 |
125 |
162 |
163 | , document.getElementById('data_bar_group')
164 | )
165 | })()
166 | ```
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # react-d3-basic
2 |
3 | [](https://gemnasium.com/react-d3/react-d3-basic)
4 |
5 | react-d3 basic charts, charts that we support:
6 |
7 | - Line Chart
8 | - Multiple Line Chart
9 | - Scatter Plot
10 | - Area Chart
11 | - Area Stack Chart
12 | - Bar Chart
13 | - Bar Group Chart
14 | - Bar Stack Chart
15 | - Bar Horizontal Chart
16 | - Bar Group Horizontal Chart
17 | - Bar Stack Horizontal Chart
18 | - Pie Chart
19 | - Donut Chart
20 |
21 | ## Quick example
22 |
23 | #### With webpack build tool
24 |
25 | - Line Chart
26 |
27 | ```js
28 | "use strict";
29 |
30 | var React = require('react');
31 | var ReactDOM = require('react-dom');
32 | var LineChart = require('react-d3-basic').LineChart;
33 |
34 | (function() {
35 |
36 | var generalChartData = require('./data/user.json');
37 |
38 | var chartSeries = [
39 | {
40 | field: 'age',
41 | name: 'Age',
42 | color: '#ff7f0e',
43 | style: {
44 | "stroke-width": 2,
45 | "stroke-opacity": .2,
46 | "fill-opacity": .2
47 | }
48 | }
49 | ],
50 | x = function(d) {
51 | return d.index;
52 | }
53 |
54 | ReactDOM.render(
55 |
62 | , document.getElementById('data_line')
63 | )
64 | })()
65 |
66 | ```
67 |
68 | #### In browser (without build tools)
69 |
70 | Clone code `react-d3-basic.js` or minify js `react-d3-basic.min.js` and include the script in your HTML.
71 |
72 | You'll also need `react`, `react-dom`, `d3`
73 |
74 | - Line Chart
75 |
76 | ```html
77 |
78 |
79 |
80 |
81 | Line Chart example
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
133 |
134 |
135 | ```
136 |
137 | ## Install
138 |
139 | ```
140 | npm install --save react-d3-basic
141 | ```
142 |
143 | ## LIVE DEMO
144 |
145 | http://reactd3.org/docs/basic
146 |
147 | ## Docs
148 |
149 |
150 | ### Charts
151 |
152 | Building Charts.
153 |
154 | - [Line Chart](./docs/charts/line_chart.md)
155 | - [Area Chart](./docs/charts/area_chart.md)
156 | - [Area Stack Chart](./docs/charts/area_stack_chart.md)
157 | - [Bar Chart](./docs/charts/bar_chart.md)
158 | - [Bar Group Chart](./docs/charts/bar_group_chart.md)
159 | - [Bar Stack Chart](./docs/charts/bar_stack_chart.md)
160 | - [Scatter Plot](./docs/charts/scatter_chart.md)
161 | - [Pie Chart](./docs/charts/pie_chart.md)
162 | - [Donut Chart](./docs/charts/donut_chart.md)
163 | - [Bar Horizontal](./)
164 | - [Bar Stack Horizontal](./)
165 | - [Bar Group Horizontal](./)
166 |
167 | ## Gallery
168 |
169 | 
170 |
171 | ## Develop
172 |
173 | ```
174 | $ npm install
175 | $ node devServer.js
176 | ```
177 |
178 | Open `localhost:5000/example`
179 |
180 |
181 | Build production `js`, `min.js` code
182 |
183 | ```
184 | $ npm run prod
185 | ```
186 |
187 | ### Docs
188 |
189 | If you want to modify the docs file, please modify `docs_pre` folder.
190 |
191 | After you finish, remember to install [smash-md](https://github.com/Canner/smash-md) first, then run `sh doc.sh` to compile the readme.
192 |
193 | Your new readme would show in `docs` folder.
194 |
195 | ## History
196 |
197 | #### Before v1.6.x ...
198 |
199 | - Initial release
200 | - Babel 5
201 | - D3 3.0
202 |
203 | #### 2016 / 3 / 3, v1.6.0
204 |
205 | - Move to Babel 6.
206 | - D3 4.0.
207 | - improve example folder.
208 |
209 |
210 | ## License
211 |
212 | Apache 2.0
213 |
--------------------------------------------------------------------------------
/docs/charts/pie_chart.md:
--------------------------------------------------------------------------------
1 | # Pie Chart
2 |
3 | ## Required Props
4 |
5 | ### data
6 |
7 | - type: `array of object`
8 |
9 | each object has same key
10 |
11 | example:
12 |
13 | [{
14 | "date": "04/23/12",
15 | "Group1": "-20",
16 | "Group2": "12",
17 | "Group3": "46"
18 | }, {
19 | "date": "04/24/12",
20 | "Group1": "32",
21 | "Group2": "-20",
22 | "Group3": "24"
23 | }]
24 |
25 |
26 |
27 | #### x
28 |
29 | - type: `function`
30 |
31 | parsed data function
32 |
33 | #### chartSeries
34 |
35 | - type: `array of object`
36 | - field: `required`, define the data field
37 | - name: `optional`, the show name of this data. default is the same with field.
38 | - color: `optional`, show categorical color
39 |
40 | example:
41 |
42 | [{
43 | field: "Group1",
44 | name: "Group 1",
45 | color: "red"
46 | },
47 | {
48 | field: "Group2",
49 | name: "Group 2",
50 | color: "black"
51 | }]
52 |
53 | ## Appearance Props (optional)
54 |
55 | ### title
56 |
57 | - type: string
58 |
59 | the title of the graph
60 |
61 | ### width
62 |
63 | - type: int
64 | - default: `960`
65 |
66 | the width of the graph
67 |
68 | ### height
69 |
70 | - type: int
71 | - default: `500`
72 |
73 | the height of the graph
74 |
75 |
76 | ### margins
77 |
78 | - type: object
79 | - default: `{top: 80, right: 100, bottom: 80, left: 100}`
80 |
81 | margins of the graph
82 |
83 | ### id
84 |
85 | - type: stirng
86 |
87 | - default : `null`
88 |
89 | ### name
90 |
91 | ### outerRadius
92 |
93 | ### innerRadius
94 |
95 | ### pieSort
96 |
97 | ### legendPosition
98 |
99 |
100 | ## Show Props (optional)
101 |
102 | ### interpolate
103 |
104 | please reference d3 interpolate
105 |
106 | ### showXAxis
107 |
108 | - type: boolean
109 | - default: `true`
110 |
111 | ### showYAxis
112 |
113 | - type: boolean
114 | - default: `true`
115 |
116 | ### showXGrid
117 |
118 | - type: boolean
119 | - default: `true`
120 |
121 | ### showYGrid
122 |
123 | - type: boolean
124 | - default: `true`
125 |
126 | ### showLegend
127 |
128 | - type: boolean
129 | - default: `true`
130 |
131 | ### categoricalColors
132 |
133 | - default: `d3.scale.category10()`
134 |
135 | you must send one of the d3 categorical colors. [reference](https://github.com/mbostock/d3/wiki/Ordinal-Scales#categorical-colors)
136 |
137 | ## Class Props (optional)
138 |
139 | ### svgClassName
140 |
141 | - type: string
142 | - default: `null`
143 |
144 | ### titleClassName
145 |
146 | - type: string
147 | - default: `null`
148 |
149 | ### yAxisClassName
150 |
151 | - type: string
152 | - default: `null`
153 |
154 | ### xAxisClassName
155 |
156 | - type: string
157 | - default: `null`
158 |
159 | ### legendClassName
160 |
161 | - type: string
162 | - default: `null`
163 |
164 |
165 | ## Example
166 |
167 | ```js
168 | "use strict";
169 |
170 | var React = require('react');
171 | var Chart = require('react-d3-core').Chart;
172 | var PieChart = require('react-d3-basic').PieChart;
173 |
174 | (function() {
175 | var generalChartData = require('dsv?delimiter=,!./data/age_pie.csv')
176 |
177 | var width = 960,
178 | height = 500,
179 | radius = Math.min(width, height - 120) / 2,
180 | margins = {top: 50, right: 50, bottom: 20, left: 50},
181 | id = "test-chart",
182 | title = "Pie Chart",
183 | svgClassName = "test-chart-class",
184 | titleClassName = "test-chart-title-class",
185 | legendClassName = "test-legend",
186 | showLegend = true,
187 | value = function(d) {
188 | return +d.population;
189 | },
190 | name = function(d) {
191 | return d.age;
192 | },
193 | chartSeries = [
194 | {
195 | "field": "<5",
196 | "name": "less than 5"
197 | },
198 | {
199 | "field": "5-13",
200 | "name": "5 to 13"
201 | },
202 | {
203 | "field": "14-17",
204 | "name": "14 to 17"
205 | },
206 | {
207 | "field": "18-24",
208 | "name": "18 to 24"
209 | },
210 | {
211 | "field": "25-44",
212 | "name": "25 to 44"
213 | },
214 | {
215 | "field": "45-64",
216 | "name": "45 to 64"
217 | }
218 | ],
219 | legendPosition = 'right',
220 | outerRadius = radius - 10,
221 | innerRadius = 0;
222 |
223 |
224 | React.render(
225 |
231 |
252 |
253 | , document.getElementById('data_pie')
254 | )
255 | })()
256 |
257 | ```
258 |
--------------------------------------------------------------------------------
/docs/docs_pre/charts/bar_stack_chart.md:
--------------------------------------------------------------------------------
1 | # Bar Stack
2 |
3 | ## Required Props
4 |
5 | !!import "../shared/charts/required.md"
6 |
7 | ## Appearance Props (optional)
8 |
9 | !!import "../shared/charts/appearance.md"
10 |
11 | ### labelOffset
12 |
13 | ## X axis props (optional)
14 |
15 | !!import "../shared/charts/xaxis.md"
16 |
17 | ### xRangeRoundBands
18 |
19 | ### xTickPadding
20 |
21 | ### xInnerTickSize
22 |
23 | ### xOuterTickSize
24 |
25 | ### xRangeRoundBands
26 |
27 | ## Y axis props (optional)
28 |
29 | !!import "../shared/charts/yaxis.md"
30 |
31 | ### yTickFormat
32 |
33 | ### yTickOrient
34 | ### yTickPadding
35 | ### yInnerTickSize
36 | ### yOuterTickSize
37 | ### yTickFormat
38 |
39 | ## Show Props (optional)
40 |
41 | !!import "../shared/charts/show.md"
42 |
43 | ## Class Props (optional)
44 |
45 | !!import "../shared/charts/class.md"
46 |
47 |
48 | ## Example
49 |
50 | ```js
51 | "use strict";
52 |
53 | var React = require('react');
54 | var Chart = require('react-d3-core').Chart;
55 | var BarStackChart = require('react-d3-basic').BarStackChart;
56 |
57 | (function() {
58 | var generalChartData = require('dsv?delimiter=,!./data/age.csv')
59 |
60 | var ageNames = d3.keys(generalChartData[0]).filter(function(key) { return key !== "State"; });
61 |
62 | generalChartData.forEach(function(d) {
63 | var y0 = 0;
64 | d.ages = ageNames.map(function(name) { return {name: name, y0: y0, y1: y0 += +d[name]}; });
65 | d.total = d.ages[d.ages.length - 1].y1;
66 | });
67 |
68 | var width = 960,
69 | height = 500,
70 | margins = {top: 50, right: 50, bottom: 50, left: 50},
71 | id = "test-chart",
72 | title = "Bar Stack Chart",
73 | svgClassName = "test-chart-class",
74 | titleClassName = "test-chart-title-class",
75 | legendClassName = "test-legend",
76 | showLegend = true,
77 | showXAxis = true,
78 | showYAxis = true,
79 | showXGrid = true,
80 | showYGrid = true,
81 | chartSeries = [
82 | {
83 | field: 'Under 5 Years',
84 | name: 'Under 5 Years'
85 | },
86 | {
87 | field: '5 to 13 Years',
88 | name: '5 to 13 Years'
89 | },
90 | {
91 | field: '14 to 17 Years',
92 | name: '14 to 17 Years'
93 | },
94 | {
95 | field: '18 to 24 Years',
96 | name: '18 to 24 Years'
97 | },
98 | {
99 | field: '25 to 44 Years',
100 | name: '25 to 44 Years'
101 | },
102 | {
103 | field: '45 to 64 Years',
104 | name: '45 to 64 Years'
105 | },
106 | {
107 | field: '65 Years and Over',
108 | name: '65 Years and Over'
109 | },
110 |
111 | ],
112 | x = function(d) {
113 | return d.State;
114 | },
115 | xOrient = 'bottom',
116 | xTickOrient = 'bottom',
117 | xDomain = generalChartData.map(function(d) { return d.State; }),
118 | xRangeRoundBands = {interval: [0, width - margins.left - margins.right], padding: .1},
119 | xScale = 'ordinal',
120 | xAxisClassName = 'x-axis',
121 | xLabel = "Age",
122 | xLabelPosition = 'bottom',
123 | xTickPadding = 3,
124 | xInnerTickSize = 6,
125 | xOuterTickSize = 6,
126 | y = function(d) {
127 | return +d;
128 | },
129 | yOrient = 'left',
130 | yTickOrient = 'left',
131 | yRange = [height - margins.top - margins.bottom, 0],
132 | yDomain = [0, d3.max(generalChartData, function(d) { return d.total; })],
133 | yScale = 'linear',
134 | yAxisClassName = 'y-axis',
135 | yLabel = "Population",
136 | yTickFormat = d3.format(".2s")
137 | yLabelPosition = 'left',
138 | yTickPadding = 4,
139 | yInnerTickSize = 6,
140 | yOuterTickSize = 6
141 |
142 |
143 | React.render(
144 |
150 |
193 |
194 | , document.getElementById('data_bar_stack')
195 | )
196 | })()
197 | ```
--------------------------------------------------------------------------------
/example/src/line_animate.jsx:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | var React = require('react');
4 | var ReactDOM = require('react-dom');
5 | var Chart = require('react-d3-core').Chart;
6 | var LineChart = require('../../lib').LineChart;
7 |
8 | //http://blog.scottlogic.com/2015/09/03/d3-without-d3.html
9 |
10 | (function() {
11 |
12 | var UpdateLine = React.createClass({
13 | getInitialState: function() {
14 | return this.props;
15 | },
16 | componentDidMount: function() {
17 | var title = this.props.title;
18 | var i = 0;
19 |
20 | var d = this.props.data;
21 | var that = this;
22 |
23 | window.setInterval(function() {
24 |
25 | var title_new = title + ' => ' + i + ' times';
26 | i++;
27 |
28 | if(i % 2 == 1) {
29 | var chartSeries = [
30 | {
31 | field: 'New York',
32 | name: 'New York Temp',
33 | color: '#ff7f0e'
34 | },
35 | {
36 | field: 'San Francisco',
37 | name: 'San Francisco Temp',
38 | color: '#2ca02c'
39 | },
40 | {
41 | field: 'Austin',
42 | name: 'Austin Temp',
43 | color: '#7777ff'
44 | }
45 | ]
46 |
47 | var yDomain = [0, 100]
48 | }else {
49 | var chartSeries = [
50 | {
51 | field: 'New York',
52 | name: 'New York Temp',
53 | color: '#ff7f0e'
54 | }
55 | ];
56 |
57 | var yDomain = [20, 90]
58 | }
59 |
60 | that._updateState(title_new, chartSeries, yDomain)
61 | }, 2000)
62 | },
63 | _updateState: function(title, chartSeries, yDomain) {
64 | this.setState({
65 | title: title,
66 | chartSeries: chartSeries,
67 | yDomain: yDomain
68 | })
69 | },
70 | render: function() {
71 | var generalChartData = require('dsv?delimiter=\t!./data/temp.tsv');
72 | var parseDate = d3.time.format("%Y%m%d").parse;
73 |
74 | var width = 960,
75 | height = 500,
76 | margins = {top: 70, right: 70, bottom: 70, left: 100},
77 | id = "test-chart",
78 | title = "Multipule Line Chart",
79 | svgClassName = "test-chart-class",
80 | titleClassName = "test-chart-title-class",
81 | legendClassName = "test-legend",
82 | showLegend = true,
83 | showXAxis = true,
84 | showYAxis = true,
85 | chartSeries = [
86 | {
87 | field: 'New York',
88 | name: 'New York Temp',
89 | color: '#ff7f0e'
90 | }
91 | ],
92 | interpolate = 'monotone',
93 | x = function(d) {
94 | return parseDate(d.date);
95 | },
96 | xOrient = 'bottom',
97 | xTickOrient = 'bottom',
98 | xDomain = d3.extent(generalChartData, function(d) { return x(d); }),
99 | xRange = [0, width - margins.left - margins.right],
100 | xScale = 'time',
101 | xAxisClassName = 'x-axis',
102 | xLabel = "Date",
103 | y = function(d) {
104 | return d;
105 | },
106 | yOrient = 'left',
107 | yTickOrient = 'left',
108 | yDomain = [20, 90],
109 | yRange = [height - margins.top - margins.bottom, 0],
110 | yScale = 'linear',
111 | yAxisClassName = 'y-axis',
112 | yLabel = "Temperature (ºF)",
113 | labelOffset = 60,
114 | legendPosition= 'right',
115 | showXGrid= true,
116 | showYGrid= true,
117 | xLabelPosition = 'bottom',
118 | yLabelPosition = 'left';
119 |
120 |
121 | return (
122 |
130 |
169 |
170 | )
171 | }
172 | })
173 |
174 | ReactDOM.render(
175 |
176 | , document.getElementById('data_line_animate')
177 | )
178 | })()
179 |
--------------------------------------------------------------------------------
/example/src/data/user.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "name": "Darron Weissnat IV",
4 | "BMI": 20.72,
5 | "age": 39,
6 | "birthday": "2005-01-03T00:00:00.000Z",
7 | "city": "East Russel",
8 | "married": false,
9 | "index": 0
10 | },
11 | {
12 | "name": "Pablo Ondricka",
13 | "BMI": 19.32,
14 | "age": 38,
15 | "birthday": "1974-05-13T00:00:00.000Z",
16 | "city": "Lake Edytheville",
17 | "married": false,
18 | "index": 1
19 | },
20 | {
21 | "name": "Mr. Stella Kiehn Jr.",
22 | "BMI": 16.8,
23 | "age": 34,
24 | "birthday": "2003-07-25T00:00:00.000Z",
25 | "city": "Lake Veronicaburgh",
26 | "married": false,
27 | "index": 2
28 | },
29 | {
30 | "name": "Lavon Hilll I",
31 | "BMI": 20.57,
32 | "age": 12,
33 | "birthday": "1994-10-26T00:00:00.000Z",
34 | "city": "Annatown",
35 | "married": true,
36 | "index": 3
37 | },
38 | {
39 | "name": "Clovis Pagac",
40 | "BMI": 24.28,
41 | "age": 26,
42 | "birthday": "1995-11-10T00:00:00.000Z",
43 | "city": "South Eldredtown",
44 | "married": false,
45 | "index": 4
46 | },
47 | {
48 | "name": "Gaylord Paucek",
49 | "BMI": 24.41,
50 | "age": 30,
51 | "birthday": "1975-06-12T00:00:00.000Z",
52 | "city": "Koeppchester",
53 | "married": true,
54 | "index": 5
55 | },
56 | {
57 | "name": "Ashlynn Kuhn MD",
58 | "BMI": 23.77,
59 | "age": 32,
60 | "birthday": "1985-08-09T00:00:00.000Z",
61 | "city": "West Josiemouth",
62 | "married": false,
63 | "index": 6
64 | },
65 | {
66 | "name": "Fern Schmeler IV",
67 | "BMI": 27.33,
68 | "age": 26,
69 | "birthday": "2005-02-10T00:00:00.000Z",
70 | "city": "West Abigaleside",
71 | "married": true,
72 | "index": 7
73 | },
74 | {
75 | "name": "Enid Weber",
76 | "BMI": 18.72,
77 | "age": 17,
78 | "birthday": "1998-11-30T00:00:00.000Z",
79 | "city": "Zackton",
80 | "married": true,
81 | "index": 8
82 | },
83 | {
84 | "name": "Leatha O'Hara",
85 | "BMI": 17.68,
86 | "age": 42,
87 | "birthday": "2010-10-17T00:00:00.000Z",
88 | "city": "Lake Matilda",
89 | "married": false,
90 | "index": 9
91 | },
92 | {
93 | "name": "Korbin Steuber",
94 | "BMI": 16.35,
95 | "age": 39,
96 | "birthday": "1975-06-30T00:00:00.000Z",
97 | "city": "East Armandofort",
98 | "married": true,
99 | "index": 10
100 | },
101 | {
102 | "name": "Brennon Torphy",
103 | "BMI": 27.37,
104 | "age": 24,
105 | "birthday": "2003-10-21T00:00:00.000Z",
106 | "city": "Croninfort",
107 | "married": true,
108 | "index": 11
109 | },
110 | {
111 | "name": "Ms. Genoveva Bradtke",
112 | "BMI": 28.63,
113 | "age": 19,
114 | "birthday": "1983-01-10T00:00:00.000Z",
115 | "city": "Port Emanuel",
116 | "married": true,
117 | "index": 12
118 | },
119 | {
120 | "name": "Gregg Halvorson",
121 | "BMI": 15.45,
122 | "age": 15,
123 | "birthday": "2004-06-15T00:00:00.000Z",
124 | "city": "Lake Angelinastad",
125 | "married": false,
126 | "index": 13
127 | },
128 | {
129 | "name": "Mr. Sabina Schroeder III",
130 | "BMI": 24.27,
131 | "age": 26,
132 | "birthday": "1980-11-22T00:00:00.000Z",
133 | "city": "Toyview",
134 | "married": true,
135 | "index": 14
136 | },
137 | {
138 | "name": "Alanna Mitchell",
139 | "BMI": 29.25,
140 | "age": 37,
141 | "birthday": "1971-08-04T00:00:00.000Z",
142 | "city": "Lake Monserratmouth",
143 | "married": false,
144 | "index": 15
145 | },
146 | {
147 | "name": "Ronny Sanford",
148 | "BMI": 29.16,
149 | "age": 24,
150 | "birthday": "1994-11-24T00:00:00.000Z",
151 | "city": "New Claudhaven",
152 | "married": false,
153 | "index": 16
154 | },
155 | {
156 | "name": "Emmitt Pouros",
157 | "BMI": 27.95,
158 | "age": 14,
159 | "birthday": "1989-04-04T00:00:00.000Z",
160 | "city": "Moorefurt",
161 | "married": true,
162 | "index": 17
163 | },
164 | {
165 | "name": "Earl Purdy",
166 | "BMI": 18.34,
167 | "age": 38,
168 | "birthday": "2013-04-03T00:00:00.000Z",
169 | "city": "Lake Rowanberg",
170 | "married": true,
171 | "index": 18
172 | },
173 | {
174 | "name": "Cordelia Klocko",
175 | "BMI": 25.85,
176 | "age": 36,
177 | "birthday": "2011-01-17T00:00:00.000Z",
178 | "city": "Lakinchester",
179 | "married": true,
180 | "index": 19
181 | },
182 | {
183 | "name": "Guido Conroy",
184 | "BMI": 25.17,
185 | "age": 39,
186 | "birthday": "1977-04-20T00:00:00.000Z",
187 | "city": "Scarlettland",
188 | "married": true,
189 | "index": 20
190 | },
191 | {
192 | "name": "Miss Demond Weissnat V",
193 | "BMI": 21.44,
194 | "age": 19,
195 | "birthday": "2007-06-09T00:00:00.000Z",
196 | "city": "Savionberg",
197 | "married": false,
198 | "index": 21
199 | },
200 | {
201 | "name": "Easton Mante",
202 | "BMI": 20.61,
203 | "age": 43,
204 | "birthday": "2007-01-29T00:00:00.000Z",
205 | "city": "Kutchberg",
206 | "married": false,
207 | "index": 22
208 | },
209 | {
210 | "name": "Dayton Ebert",
211 | "BMI": 29.88,
212 | "age": 20,
213 | "birthday": "1978-04-27T00:00:00.000Z",
214 | "city": "West Wiley",
215 | "married": true,
216 | "index": 23
217 | }
218 | ]
219 |
--------------------------------------------------------------------------------
/docs/charts/bar_chart.md:
--------------------------------------------------------------------------------
1 | # Bar Chart
2 |
3 | Bar chart combines the `components/bar` and `x, y -axis`.
4 |
5 |
6 | ## Required Props
7 |
8 | ### data
9 |
10 | - type: `array of object`
11 |
12 | each object has same key
13 |
14 | example:
15 |
16 | [{
17 | "date": "04/23/12",
18 | "Group1": "-20",
19 | "Group2": "12",
20 | "Group3": "46"
21 | }, {
22 | "date": "04/24/12",
23 | "Group1": "32",
24 | "Group2": "-20",
25 | "Group3": "24"
26 | }]
27 |
28 |
29 |
30 | #### x
31 |
32 | - type: `function`
33 |
34 | parsed data function
35 |
36 | #### chartSeries
37 |
38 | - type: `array of object`
39 | - field: `required`, define the data field
40 | - name: `optional`, the show name of this data. default is the same with field.
41 | - color: `optional`, show categorical color
42 |
43 | example:
44 |
45 | [{
46 | field: "Group1",
47 | name: "Group 1",
48 | color: "red"
49 | },
50 | {
51 | field: "Group2",
52 | name: "Group 2",
53 | color: "black"
54 | }]
55 |
56 | ## Appearance Props (optional)
57 |
58 | ### title
59 |
60 | - type: string
61 |
62 | the title of the graph
63 |
64 | ### width
65 |
66 | - type: int
67 | - default: `960`
68 |
69 | the width of the graph
70 |
71 | ### height
72 |
73 | - type: int
74 | - default: `500`
75 |
76 | the height of the graph
77 |
78 |
79 | ### margins
80 |
81 | - type: object
82 | - default: `{top: 80, right: 100, bottom: 80, left: 100}`
83 |
84 | margins of the graph
85 |
86 | ### id
87 |
88 | - type: stirng
89 |
90 | - default : `null`
91 |
92 | ## X axis props (optional)
93 |
94 | ### xDomain
95 |
96 | reference [react-d3-core](https://github.com/react-d3/react-d3-core) for more detail
97 |
98 | ### xScale
99 |
100 | - type: boolean
101 | - default: `true`
102 |
103 | ### xOrient
104 |
105 | ### xTickOrient
106 |
107 | ### xLabel
108 |
109 | ### xRangeRoundBands
110 |
111 |
112 | ## Y axis props (optional)
113 |
114 | ### y
115 |
116 | - type: function
117 |
118 | - default: `y: (d) => {return +d;}`
119 |
120 |
121 | ### yOrient
122 |
123 | ### yRange
124 |
125 | ### yDomain
126 |
127 | reference [react-d3-core](https://github.com/react-d3/react-d3-core) for more details.
128 |
129 | ### yScale
130 |
131 | - type: boolean
132 | - default: `true`
133 |
134 | ### yTickOrient
135 |
136 | ### yTicks
137 |
138 | ### yLabel
139 |
140 | ### yLabelPosition
141 |
142 | ## Show Props (optional)
143 |
144 | ### interpolate
145 |
146 | please reference d3 interpolate
147 |
148 | ### showXAxis
149 |
150 | - type: boolean
151 | - default: `true`
152 |
153 | ### showYAxis
154 |
155 | - type: boolean
156 | - default: `true`
157 |
158 | ### showXGrid
159 |
160 | - type: boolean
161 | - default: `true`
162 |
163 | ### showYGrid
164 |
165 | - type: boolean
166 | - default: `true`
167 |
168 | ### showLegend
169 |
170 | - type: boolean
171 | - default: `true`
172 |
173 | ### categoricalColors
174 |
175 | - default: `d3.scale.category10()`
176 |
177 | you must send one of the d3 categorical colors. [reference](https://github.com/mbostock/d3/wiki/Ordinal-Scales#categorical-colors)
178 |
179 |
180 | ## Class Props (optional)
181 |
182 | ### svgClassName
183 |
184 | - type: string
185 | - default: `null`
186 |
187 | ### titleClassName
188 |
189 | - type: string
190 | - default: `null`
191 |
192 | ### yAxisClassName
193 |
194 | - type: string
195 | - default: `null`
196 |
197 | ### xAxisClassName
198 |
199 | - type: string
200 | - default: `null`
201 |
202 | ### legendClassName
203 |
204 | - type: string
205 | - default: `null`
206 |
207 | ## Example code
208 |
209 | ``` js
210 | "use strict";
211 |
212 | var React = require('react');
213 | var Chart = require('react-d3-core').Chart;
214 | var BarChart = require('react-d3-basic').BarChart;
215 |
216 | (function() {
217 | var generalChartData = require('dsv?delimiter=\t!./data/letter.tsv')
218 |
219 | var width = 960,
220 | height = 500,
221 | margins = {top: 50, right: 50, bottom: 50, left: 50},
222 | id = "test-chart",
223 | title = "Bar Chart",
224 | svgClassName = "test-chart-class",
225 | titleClassName = "test-chart-title-class",
226 | legendClassName = "test-legend",
227 | legendPosition = "right",
228 | showLegend = true,
229 | showXAxis = true,
230 | showYAxis = true,
231 | chartSeries = [
232 | {
233 | field: 'frequency',
234 | name: 'Frequency'
235 | }
236 | ],
237 | x = function(d) {
238 | return d.letter;
239 | },
240 | xOrient = 'bottom',
241 | xTickOrient = 'bottom',
242 | xDomain = generalChartData.map(function(d) { return d.letter; }),
243 | xRangeRoundBands = {interval: [0, width - margins.left - margins.right], padding: .1},
244 | xScale = 'ordinal',
245 | xAxisClassName = 'x-axis',
246 | xLabel = "Letter",
247 | xLabelPosition = 'bottom',
248 | y = function(d) {
249 | return +d;
250 | },
251 | yOrient = 'left',
252 | yTickOrient = 'right',
253 | yRange = [height - margins.top - margins.bottom, 0],
254 | yDomain = [0, +d3.max(generalChartData, function(d) { return d.frequency; })],
255 | yScale = 'linear',
256 | yAxisClassName = 'y-axis',
257 | yLabel = "Frequency",
258 | yTicks = [10, "%"],
259 | yLabelPosition = 'left';
260 |
261 | React.render(
262 |
268 |
303 |
304 | , document.getElementById('data_bar')
305 | )
306 | })()
307 | ```
308 |
309 |
--------------------------------------------------------------------------------
/docs/charts/area_stack_chart.md:
--------------------------------------------------------------------------------
1 | # Area Stack Chart
2 |
3 | Area stack chart combines the `components/area_stack` and `x,y-axis`
4 |
5 | ## Required Props
6 |
7 | ### data
8 |
9 | - type: `array of object`
10 |
11 | each object has same key
12 |
13 | example:
14 |
15 | [{
16 | "date": "04/23/12",
17 | "Group1": "-20",
18 | "Group2": "12",
19 | "Group3": "46"
20 | }, {
21 | "date": "04/24/12",
22 | "Group1": "32",
23 | "Group2": "-20",
24 | "Group3": "24"
25 | }]
26 |
27 |
28 |
29 | #### x
30 |
31 | - type: `function`
32 |
33 | parsed data function
34 |
35 | #### chartSeries
36 |
37 | - type: `array of object`
38 | - field: `required`, define the data field
39 | - name: `optional`, the show name of this data. default is the same with field.
40 | - color: `optional`, show categorical color
41 |
42 | example:
43 |
44 | [{
45 | field: "Group1",
46 | name: "Group 1",
47 | color: "red"
48 | },
49 | {
50 | field: "Group2",
51 | name: "Group 2",
52 | color: "black"
53 | }]
54 |
55 | ## Appearance Props (optional)
56 |
57 | ### title
58 |
59 | - type: string
60 |
61 | the title of the graph
62 |
63 | ### width
64 |
65 | - type: int
66 | - default: `960`
67 |
68 | the width of the graph
69 |
70 | ### height
71 |
72 | - type: int
73 | - default: `500`
74 |
75 | the height of the graph
76 |
77 |
78 | ### margins
79 |
80 | - type: object
81 | - default: `{top: 80, right: 100, bottom: 80, left: 100}`
82 |
83 | margins of the graph
84 |
85 | ### id
86 |
87 | - type: stirng
88 |
89 | - default : `null`
90 |
91 | ## X axis props (optional)
92 |
93 | ### xDomain
94 |
95 | reference [react-d3-core](https://github.com/react-d3/react-d3-core) for more detail
96 |
97 | ### xScale
98 |
99 | - type: boolean
100 | - default: `true`
101 |
102 | ### xOrient
103 |
104 | ### xTickOrient
105 |
106 | ### xLabel
107 |
108 | ### xRange
109 |
110 |
111 | ## Y axis props (optional)
112 |
113 | ### y
114 |
115 | - type: function
116 |
117 | - default: `y: (d) => {return +d;}`
118 |
119 |
120 | ### yOrient
121 |
122 | ### yRange
123 |
124 | ### yDomain
125 |
126 | reference [react-d3-core](https://github.com/react-d3/react-d3-core) for more details.
127 |
128 | ### yScale
129 |
130 | - type: boolean
131 | - default: `true`
132 |
133 | ### yTickOrient
134 |
135 | ### yTicks
136 |
137 | ### yLabel
138 |
139 | ### yLabelPosition
140 |
141 | ## Show Props (optional)
142 |
143 | ### interpolate
144 |
145 | please reference d3 interpolate
146 |
147 | ### showXAxis
148 |
149 | - type: boolean
150 | - default: `true`
151 |
152 | ### showYAxis
153 |
154 | - type: boolean
155 | - default: `true`
156 |
157 | ### showXGrid
158 |
159 | - type: boolean
160 | - default: `true`
161 |
162 | ### showYGrid
163 |
164 | - type: boolean
165 | - default: `true`
166 |
167 | ### showLegend
168 |
169 | - type: boolean
170 | - default: `true`
171 |
172 | ### categoricalColors
173 |
174 | - default: `d3.scale.category10()`
175 |
176 | you must send one of the d3 categorical colors. [reference](https://github.com/mbostock/d3/wiki/Ordinal-Scales#categorical-colors)
177 |
178 | ## Class Props (optional)
179 |
180 | ### svgClassName
181 |
182 | - type: string
183 | - default: `null`
184 |
185 | ### titleClassName
186 |
187 | - type: string
188 | - default: `null`
189 |
190 | ### yAxisClassName
191 |
192 | - type: string
193 | - default: `null`
194 |
195 | ### xAxisClassName
196 |
197 | - type: string
198 | - default: `null`
199 |
200 | ### legendClassName
201 |
202 | - type: string
203 | - default: `null`
204 |
205 | ## Example
206 |
207 | ```js
208 | "use strict";
209 |
210 | var React = require('react');
211 | var Chart = require('react-d3-core').Chart;
212 | var AreaStackChart = require('react-d3-basic').AreaStackChart;
213 |
214 | (function() {
215 | var generalChartData = require('dsv?delimiter=\t!./data/browser.tsv')
216 |
217 | var parseDate = d3.time.format("%y-%b-%d").parse;
218 | var formatPercent = d3.format(".0%");
219 |
220 | var width = 960,
221 | height = 500,
222 | margins = {top: 50, right: 50, bottom: 50, left: 50},
223 | id = "test-chart",
224 | title = "Stack Area Chart",
225 | svgClassName = "test-chart-class",
226 | titleClassName = "test-chart-title-class",
227 | legendClassName = "test-legend",
228 | showLegend = true,
229 | showXAxis = true,
230 | showYAxis = true,
231 | interpolate = 'basis',
232 | chartSeries = [
233 | {
234 | field: 'IE',
235 | name: 'IE browser'
236 | },
237 | {
238 | field: 'Chrome',
239 | name: 'Chrome browser'
240 | },
241 | {
242 | field: 'Firefox'
243 | },
244 | {
245 | field: 'Safari',
246 | name: 'Safari browser'
247 | },
248 | {
249 | field: 'Opera',
250 | name: 'Opera browser'
251 | }
252 | ],
253 | x = function(d) {
254 | return parseDate(d.date);
255 | },
256 | xOrient = 'bottom',
257 | xTickOrient = 'bottom',
258 | xDomain = d3.extent(generalChartData, function(d) { return x(d); }),
259 | xRange = [0, width - margins.left - margins.right],
260 | xScale = 'time',
261 | xAxisClassName = 'x-axis',
262 | xLabel = "Date",
263 | y = function(d) {
264 | return d / 100;
265 | },
266 | yOrient = 'left',
267 | yTickOrient = 'right',
268 | yRange = [height - margins.top - margins.bottom, 0],
269 | yScale = 'linear',
270 | yAxisClassName = 'y-axis';
271 |
272 | React.render(
273 |
279 |
311 |
312 | , document.getElementById('data_area_stack')
313 | )
314 | })()
315 | ```
316 |
--------------------------------------------------------------------------------
/docs/charts/scatter_chart.md:
--------------------------------------------------------------------------------
1 | ## Scatter Chart
2 |
3 | ## Required Props
4 |
5 | ### data
6 |
7 | - type: `array of object`
8 |
9 | each object has same key
10 |
11 | example:
12 |
13 | [{
14 | "date": "04/23/12",
15 | "Group1": "-20",
16 | "Group2": "12",
17 | "Group3": "46"
18 | }, {
19 | "date": "04/24/12",
20 | "Group1": "32",
21 | "Group2": "-20",
22 | "Group3": "24"
23 | }]
24 |
25 |
26 |
27 | #### x
28 |
29 | - type: `function`
30 |
31 | parsed data function
32 |
33 | #### chartSeries
34 |
35 | - type: `array of object`
36 | - field: `required`, define the data field
37 | - name: `optional`, the show name of this data. default is the same with field.
38 | - color: `optional`, show categorical color
39 |
40 | example:
41 |
42 | [{
43 | field: "Group1",
44 | name: "Group 1",
45 | color: "red"
46 | },
47 | {
48 | field: "Group2",
49 | name: "Group 2",
50 | color: "black"
51 | }]
52 |
53 | ## Appearance Props (optional)
54 |
55 | ### title
56 |
57 | - type: string
58 |
59 | the title of the graph
60 |
61 | ### width
62 |
63 | - type: int
64 | - default: `960`
65 |
66 | the width of the graph
67 |
68 | ### height
69 |
70 | - type: int
71 | - default: `500`
72 |
73 | the height of the graph
74 |
75 |
76 | ### margins
77 |
78 | - type: object
79 | - default: `{top: 80, right: 100, bottom: 80, left: 100}`
80 |
81 | margins of the graph
82 |
83 | ### id
84 |
85 | - type: stirng
86 |
87 | - default : `null`
88 |
89 | ### labelOffset
90 |
91 | ## X axis props (optional)
92 |
93 | ### xDomain
94 |
95 | reference [react-d3-core](https://github.com/react-d3/react-d3-core) for more detail
96 |
97 | ### xScale
98 |
99 | - type: boolean
100 | - default: `true`
101 |
102 | ### xOrient
103 |
104 | ### xTickOrient
105 |
106 | ### xLabel
107 |
108 | ### xRange
109 |
110 | ## Y axis props (optional)
111 |
112 | ### y
113 |
114 | - type: function
115 |
116 | - default: `y: (d) => {return +d;}`
117 |
118 |
119 | ### yOrient
120 |
121 | ### yRange
122 |
123 | ### yDomain
124 |
125 | reference [react-d3-core](https://github.com/react-d3/react-d3-core) for more details.
126 |
127 | ### yScale
128 |
129 | - type: boolean
130 | - default: `true`
131 |
132 | ### yTickOrient
133 |
134 | ### yTicks
135 |
136 | ### yLabel
137 |
138 | ### yLabelPosition
139 |
140 | ## Show Props (optional)
141 |
142 | ### interpolate
143 |
144 | please reference d3 interpolate
145 |
146 | ### showXAxis
147 |
148 | - type: boolean
149 | - default: `true`
150 |
151 | ### showYAxis
152 |
153 | - type: boolean
154 | - default: `true`
155 |
156 | ### showXGrid
157 |
158 | - type: boolean
159 | - default: `true`
160 |
161 | ### showYGrid
162 |
163 | - type: boolean
164 | - default: `true`
165 |
166 | ### showLegend
167 |
168 | - type: boolean
169 | - default: `true`
170 |
171 | ### categoricalColors
172 |
173 | - default: `d3.scale.category10()`
174 |
175 | you must send one of the d3 categorical colors. [reference](https://github.com/mbostock/d3/wiki/Ordinal-Scales#categorical-colors)
176 |
177 | ## Class Props (optional)
178 |
179 | ### svgClassName
180 |
181 | - type: string
182 | - default: `null`
183 |
184 | ### titleClassName
185 |
186 | - type: string
187 | - default: `null`
188 |
189 | ### yAxisClassName
190 |
191 | - type: string
192 | - default: `null`
193 |
194 | ### xAxisClassName
195 |
196 | - type: string
197 | - default: `null`
198 |
199 | ### legendClassName
200 |
201 | - type: string
202 | - default: `null`
203 |
204 | ### scatterClasssName
205 |
206 | ## Example
207 |
208 | ```js
209 | "use strict";
210 |
211 |
212 | var React = require('react');
213 | var Chart = require('react-d3-core').Chart;
214 | var ScatterPlot = require('react-d3-basic').ScatterPlot;
215 |
216 | (function() {
217 | var generalChartData = require('dsv?delimiter=\t!./data/temp.tsv')
218 |
219 | var parseDate = d3.time.format("%Y%m%d").parse;
220 |
221 | var width = 960,
222 | height = 500,
223 | margins = {top: 50, right: 50, bottom: 50, left: 50},
224 | id = "test-chart",
225 | title = "Scatter Plot",
226 | svgClassName = "test-chart-class",
227 | titleClassName = "test-chart-title-class",
228 | legendClassName = "test-legend",
229 | legendPosition = 'right',
230 | labelOffset = 30,
231 | showLegend = true,
232 | showXAxis = true,
233 | showYAxis = true,
234 | chartSeries = [
235 | {
236 | field: 'New York',
237 | name: 'New York Temp',
238 | color: '#ff7f0e',
239 | symbol: "cross"
240 | },
241 | {
242 | field: 'San Francisco',
243 | name: 'San Francisco Temp',
244 | color: '#2ca02c',
245 | symbol: 'diamond'
246 | },
247 | {
248 | field: 'Austin',
249 | name: 'Austin Temp',
250 | color: '#7777ff',
251 | symbol: 'triangle-down'
252 | }
253 | ],
254 | x = function(d) {
255 | return parseDate(d.date);
256 | },
257 | xOrient = 'bottom',
258 | xTickOrient = 'bottom',
259 | xDomain = d3.extent(generalChartData, (d) => { return x(d); }),
260 | xRange = [0, width - margins.left - margins.right],
261 | xScale = 'time',
262 | xAxisClassName = 'x-axis',
263 | xLabel = "Date",
264 | xLabelPosition = 'bottom',
265 | y = function(d) {
266 | return d;
267 | },
268 | yOrient = 'left',
269 | yTickOrient = 'left',
270 | yDomain = [20, 100],
271 | yRange = [height - margins.top - margins.bottom, 0],
272 | yScale = 'linear',
273 | yAxisClassName = 'y-axis',
274 | yLabel = "Temperature (ºF)",
275 | yLabelPosition = 'left',
276 | scatterClassName = 'test-line-dot-class';
277 |
278 |
279 |
280 | React.render(
281 |
287 |
323 |
324 | , document.getElementById('data_scatter')
325 | )
326 | })()
327 |
328 | ```
329 |
--------------------------------------------------------------------------------
/docs/charts/bar_group_chart.md:
--------------------------------------------------------------------------------
1 | # Bar Group Chart
2 |
3 | ## Required Props
4 |
5 | ### data
6 |
7 | - type: `array of object`
8 |
9 | each object has same key
10 |
11 | example:
12 |
13 | [{
14 | "date": "04/23/12",
15 | "Group1": "-20",
16 | "Group2": "12",
17 | "Group3": "46"
18 | }, {
19 | "date": "04/24/12",
20 | "Group1": "32",
21 | "Group2": "-20",
22 | "Group3": "24"
23 | }]
24 |
25 |
26 |
27 | #### x
28 |
29 | - type: `function`
30 |
31 | parsed data function
32 |
33 | #### chartSeries
34 |
35 | - type: `array of object`
36 | - field: `required`, define the data field
37 | - name: `optional`, the show name of this data. default is the same with field.
38 | - color: `optional`, show categorical color
39 |
40 | example:
41 |
42 | [{
43 | field: "Group1",
44 | name: "Group 1",
45 | color: "red"
46 | },
47 | {
48 | field: "Group2",
49 | name: "Group 2",
50 | color: "black"
51 | }]
52 |
53 | ## Appearance Props (optional)
54 |
55 | ### title
56 |
57 | - type: string
58 |
59 | the title of the graph
60 |
61 | ### width
62 |
63 | - type: int
64 | - default: `960`
65 |
66 | the width of the graph
67 |
68 | ### height
69 |
70 | - type: int
71 | - default: `500`
72 |
73 | the height of the graph
74 |
75 |
76 | ### margins
77 |
78 | - type: object
79 | - default: `{top: 80, right: 100, bottom: 80, left: 100}`
80 |
81 | margins of the graph
82 |
83 | ### id
84 |
85 | - type: stirng
86 |
87 | - default : `null`
88 |
89 | ### labelOffset
90 |
91 | ## X axis props (optional)
92 |
93 | ### xDomain
94 |
95 | reference [react-d3-core](https://github.com/react-d3/react-d3-core) for more detail
96 |
97 | ### xScale
98 |
99 | - type: boolean
100 | - default: `true`
101 |
102 | ### xOrient
103 |
104 | ### xTickOrient
105 |
106 | ### xLabel
107 |
108 | ### xRangeRoundBands
109 |
110 | ## Y axis props (optional)
111 |
112 | ### y
113 |
114 | - type: function
115 |
116 | - default: `y: (d) => {return +d;}`
117 |
118 |
119 | ### yOrient
120 |
121 | ### yRange
122 |
123 | ### yDomain
124 |
125 | reference [react-d3-core](https://github.com/react-d3/react-d3-core) for more details.
126 |
127 | ### yScale
128 |
129 | - type: boolean
130 | - default: `true`
131 |
132 | ### yTickOrient
133 |
134 | ### yTicks
135 |
136 | ### yLabel
137 |
138 | ### yLabelPosition
139 |
140 | ### yTickFormat
141 |
142 | ## Show Props (optional)
143 |
144 | ### interpolate
145 |
146 | please reference d3 interpolate
147 |
148 | ### showXAxis
149 |
150 | - type: boolean
151 | - default: `true`
152 |
153 | ### showYAxis
154 |
155 | - type: boolean
156 | - default: `true`
157 |
158 | ### showXGrid
159 |
160 | - type: boolean
161 | - default: `true`
162 |
163 | ### showYGrid
164 |
165 | - type: boolean
166 | - default: `true`
167 |
168 | ### showLegend
169 |
170 | - type: boolean
171 | - default: `true`
172 |
173 | ### categoricalColors
174 |
175 | - default: `d3.scale.category10()`
176 |
177 | you must send one of the d3 categorical colors. [reference](https://github.com/mbostock/d3/wiki/Ordinal-Scales#categorical-colors)
178 |
179 |
180 | ## Example
181 |
182 | ```js
183 | "use strict";
184 |
185 | var React = require('react');
186 | var Chart = require('react-d3-core').Chart;
187 | var BarGroupChart = require('react-d3-basic').BarGroupChart;
188 |
189 | (function() {
190 | var generalChartData = require('dsv?delimiter=,!./data/age.csv')
191 |
192 | var ageNames = d3.keys(generalChartData[0]).filter(function(key) { return key !== "State"; });
193 |
194 | generalChartData.forEach(function(d) {
195 | d.ages = ageNames.map(function(name) { return {name: name, value: +d[name]}; });
196 | });
197 |
198 | var width = 960,
199 | height = 500,
200 | margins = {top: 50, right: 50, bottom: 50, left: 50},
201 | id = "test-chart",
202 | title = "Bar Group Chart",
203 | svgClassName = "test-chart-class",
204 | titleClassName = "test-chart-title-class",
205 | legendClassName = "test-legend",
206 | legendPosition = 'right',
207 | labelOffset = 30,
208 |
209 | showLegend = true,
210 | showXAxis = true,
211 | showYAxis = true,
212 | chartSeries = [
213 | {
214 | field: 'Under 5 Years',
215 | name: 'Under 5 Years'
216 | },
217 | {
218 | field: '5 to 13 Years',
219 | name: '5 to 13 Years'
220 | },
221 | {
222 | field: '14 to 17 Years',
223 | name: '14 to 17 Years'
224 | },
225 | {
226 | field: '18 to 24 Years',
227 | name: '18 to 24 Years'
228 | },
229 | {
230 | field: '25 to 44 Years',
231 | name: '25 to 44 Years'
232 | },
233 | {
234 | field: '45 to 64 Years',
235 | name: '45 to 64 Years'
236 | },
237 | {
238 | field: '65 Years and Over',
239 | name: '65 Years and Over'
240 | },
241 |
242 | ],
243 | x = function(d) {
244 | return d.State;
245 | },
246 | xOrient = 'bottom',
247 | xTickOrient = 'bottom',
248 | xDomain = generalChartData.map(function(d) { return d.State; }),
249 | xRangeRoundBands = {interval: [0, width - margins.left - margins.right], padding: .1},
250 | xScale = 'ordinal',
251 | xAxisClassName = 'x-axis',
252 | xLabel = "Age",
253 | xLabelPosition = 'bottom',
254 | y = function(d) {
255 | return +d;
256 | },
257 | yOrient = 'left',
258 | yTickOrient = 'right',
259 | yRange = [height - margins.top - margins.bottom, 0],
260 | yDomain = [0, d3.max(generalChartData, function(d) { return d3.max(d.ages, (d) => { return d.value; }); })],
261 | yScale = 'linear',
262 | yAxisClassName = 'y-axis',
263 | yLabel = "Population",
264 | yTickFormat = d3.format(".2s"),
265 | yLabelPosition = 'left'
266 |
267 |
268 | React.render(
269 |
275 |
312 |
313 | , document.getElementById('data_bar_group')
314 | )
315 | })()
316 | ```
317 |
--------------------------------------------------------------------------------
/docs/charts/bar_stack_chart.md:
--------------------------------------------------------------------------------
1 | # Bar Stack
2 |
3 | ## Required Props
4 |
5 | ### data
6 |
7 | - type: `array of object`
8 |
9 | each object has same key
10 |
11 | example:
12 |
13 | [{
14 | "date": "04/23/12",
15 | "Group1": "-20",
16 | "Group2": "12",
17 | "Group3": "46"
18 | }, {
19 | "date": "04/24/12",
20 | "Group1": "32",
21 | "Group2": "-20",
22 | "Group3": "24"
23 | }]
24 |
25 |
26 |
27 | #### x
28 |
29 | - type: `function`
30 |
31 | parsed data function
32 |
33 | #### chartSeries
34 |
35 | - type: `array of object`
36 | - field: `required`, define the data field
37 | - name: `optional`, the show name of this data. default is the same with field.
38 | - color: `optional`, show categorical color
39 |
40 | example:
41 |
42 | [{
43 | field: "Group1",
44 | name: "Group 1",
45 | color: "red"
46 | },
47 | {
48 | field: "Group2",
49 | name: "Group 2",
50 | color: "black"
51 | }]
52 |
53 | ## Appearance Props (optional)
54 |
55 | ### title
56 |
57 | - type: string
58 |
59 | the title of the graph
60 |
61 | ### width
62 |
63 | - type: int
64 | - default: `960`
65 |
66 | the width of the graph
67 |
68 | ### height
69 |
70 | - type: int
71 | - default: `500`
72 |
73 | the height of the graph
74 |
75 |
76 | ### margins
77 |
78 | - type: object
79 | - default: `{top: 80, right: 100, bottom: 80, left: 100}`
80 |
81 | margins of the graph
82 |
83 | ### id
84 |
85 | - type: stirng
86 |
87 | - default : `null`
88 |
89 | ### labelOffset
90 |
91 | ## X axis props (optional)
92 |
93 | ### xDomain
94 |
95 | reference [react-d3-core](https://github.com/react-d3/react-d3-core) for more detail
96 |
97 | ### xScale
98 |
99 | - type: boolean
100 | - default: `true`
101 |
102 | ### xOrient
103 |
104 | ### xTickOrient
105 |
106 | ### xLabel
107 |
108 | ### xRangeRoundBands
109 |
110 | ### xTickPadding
111 |
112 | ### xInnerTickSize
113 |
114 | ### xOuterTickSize
115 |
116 | ### xRangeRoundBands
117 |
118 | ## Y axis props (optional)
119 |
120 | ### y
121 |
122 | - type: function
123 |
124 | - default: `y: (d) => {return +d;}`
125 |
126 |
127 | ### yOrient
128 |
129 | ### yRange
130 |
131 | ### yDomain
132 |
133 | reference [react-d3-core](https://github.com/react-d3/react-d3-core) for more details.
134 |
135 | ### yScale
136 |
137 | - type: boolean
138 | - default: `true`
139 |
140 | ### yTickOrient
141 |
142 | ### yTicks
143 |
144 | ### yLabel
145 |
146 | ### yLabelPosition
147 |
148 | ### yTickFormat
149 |
150 | ### yTickOrient
151 | ### yTickPadding
152 | ### yInnerTickSize
153 | ### yOuterTickSize
154 | ### yTickFormat
155 |
156 | ## Show Props (optional)
157 |
158 | ### interpolate
159 |
160 | please reference d3 interpolate
161 |
162 | ### showXAxis
163 |
164 | - type: boolean
165 | - default: `true`
166 |
167 | ### showYAxis
168 |
169 | - type: boolean
170 | - default: `true`
171 |
172 | ### showXGrid
173 |
174 | - type: boolean
175 | - default: `true`
176 |
177 | ### showYGrid
178 |
179 | - type: boolean
180 | - default: `true`
181 |
182 | ### showLegend
183 |
184 | - type: boolean
185 | - default: `true`
186 |
187 | ### categoricalColors
188 |
189 | - default: `d3.scale.category10()`
190 |
191 | you must send one of the d3 categorical colors. [reference](https://github.com/mbostock/d3/wiki/Ordinal-Scales#categorical-colors)
192 |
193 | ## Class Props (optional)
194 |
195 | ### svgClassName
196 |
197 | - type: string
198 | - default: `null`
199 |
200 | ### titleClassName
201 |
202 | - type: string
203 | - default: `null`
204 |
205 | ### yAxisClassName
206 |
207 | - type: string
208 | - default: `null`
209 |
210 | ### xAxisClassName
211 |
212 | - type: string
213 | - default: `null`
214 |
215 | ### legendClassName
216 |
217 | - type: string
218 | - default: `null`
219 |
220 |
221 | ## Example
222 |
223 | ```js
224 | "use strict";
225 |
226 | var React = require('react');
227 | var Chart = require('react-d3-core').Chart;
228 | var BarStackChart = require('react-d3-basic').BarStackChart;
229 |
230 | (function() {
231 | var generalChartData = require('dsv?delimiter=,!./data/age.csv')
232 |
233 | var ageNames = d3.keys(generalChartData[0]).filter(function(key) { return key !== "State"; });
234 |
235 | generalChartData.forEach(function(d) {
236 | var y0 = 0;
237 | d.ages = ageNames.map(function(name) { return {name: name, y0: y0, y1: y0 += +d[name]}; });
238 | d.total = d.ages[d.ages.length - 1].y1;
239 | });
240 |
241 | var width = 960,
242 | height = 500,
243 | margins = {top: 50, right: 50, bottom: 50, left: 50},
244 | id = "test-chart",
245 | title = "Bar Stack Chart",
246 | svgClassName = "test-chart-class",
247 | titleClassName = "test-chart-title-class",
248 | legendClassName = "test-legend",
249 | showLegend = true,
250 | showXAxis = true,
251 | showYAxis = true,
252 | showXGrid = true,
253 | showYGrid = true,
254 | chartSeries = [
255 | {
256 | field: 'Under 5 Years',
257 | name: 'Under 5 Years'
258 | },
259 | {
260 | field: '5 to 13 Years',
261 | name: '5 to 13 Years'
262 | },
263 | {
264 | field: '14 to 17 Years',
265 | name: '14 to 17 Years'
266 | },
267 | {
268 | field: '18 to 24 Years',
269 | name: '18 to 24 Years'
270 | },
271 | {
272 | field: '25 to 44 Years',
273 | name: '25 to 44 Years'
274 | },
275 | {
276 | field: '45 to 64 Years',
277 | name: '45 to 64 Years'
278 | },
279 | {
280 | field: '65 Years and Over',
281 | name: '65 Years and Over'
282 | },
283 |
284 | ],
285 | x = function(d) {
286 | return d.State;
287 | },
288 | xOrient = 'bottom',
289 | xTickOrient = 'bottom',
290 | xDomain = generalChartData.map(function(d) { return d.State; }),
291 | xRangeRoundBands = {interval: [0, width - margins.left - margins.right], padding: .1},
292 | xScale = 'ordinal',
293 | xAxisClassName = 'x-axis',
294 | xLabel = "Age",
295 | xLabelPosition = 'bottom',
296 | xTickPadding = 3,
297 | xInnerTickSize = 6,
298 | xOuterTickSize = 6,
299 | y = function(d) {
300 | return +d;
301 | },
302 | yOrient = 'left',
303 | yTickOrient = 'left',
304 | yRange = [height - margins.top - margins.bottom, 0],
305 | yDomain = [0, d3.max(generalChartData, function(d) { return d.total; })],
306 | yScale = 'linear',
307 | yAxisClassName = 'y-axis',
308 | yLabel = "Population",
309 | yTickFormat = d3.format(".2s")
310 | yLabelPosition = 'left',
311 | yTickPadding = 4,
312 | yInnerTickSize = 6,
313 | yOuterTickSize = 6
314 |
315 |
316 | React.render(
317 |
323 |
366 |
367 | , document.getElementById('data_bar_stack')
368 | )
369 | })()
370 | ```
371 |
--------------------------------------------------------------------------------
/example/src/data/temp.tsv:
--------------------------------------------------------------------------------
1 | date New York San Francisco Austin
2 | 20111001 63.4 62.7 72.2
3 | 20111002 58.0 59.9 67.7
4 | 20111003 53.3 59.1 69.4
5 | 20111004 55.7 58.8 68.0
6 | 20111005 64.2 58.7 72.4
7 | 20111006 58.8 57.0 77.0
8 | 20111007 57.9 56.7 82.3
9 | 20111008 61.8 56.8 78.9
10 | 20111009 69.3 56.7 68.8
11 | 20111010 71.2 60.1 68.7
12 | 20111011 68.7 61.1 70.3
13 | 20111012 61.8 61.5 75.3
14 | 20111013 63.0 64.3 76.6
15 | 20111014 66.9 67.1 66.6
16 | 20111015 61.7 64.6 68.0
17 | 20111016 61.8 61.6 70.6
18 | 20111017 62.8 61.1 71.1
19 | 20111018 60.8 59.2 70.0
20 | 20111019 62.1 58.9 61.6
21 | 20111020 65.1 57.2 57.4
22 | 20111021 55.6 56.4 64.3
23 | 20111022 54.4 60.7 72.4
24 | 20111023 54.4 65.1 72.4
25 | 20111024 54.8 60.9 72.5
26 | 20111025 57.9 56.1 72.7
27 | 20111026 54.6 54.6 73.4
28 | 20111027 54.4 56.1 70.7
29 | 20111028 42.5 58.1 56.8
30 | 20111029 40.9 57.5 51.0
31 | 20111030 38.6 57.7 54.9
32 | 20111031 44.2 55.1 58.8
33 | 20111101 49.6 57.9 62.6
34 | 20111102 47.2 64.6 71.0
35 | 20111103 50.1 56.2 58.4
36 | 20111104 50.1 50.5 45.1
37 | 20111105 43.5 51.3 52.2
38 | 20111106 43.8 52.6 73.0
39 | 20111107 48.9 51.4 75.4
40 | 20111108 55.5 50.6 72.1
41 | 20111109 53.7 54.6 56.6
42 | 20111110 57.7 55.6 55.4
43 | 20111111 48.5 53.9 46.7
44 | 20111112 46.8 54.0 62.0
45 | 20111113 51.1 53.8 71.6
46 | 20111114 56.8 53.5 75.5
47 | 20111115 59.7 53.4 72.1
48 | 20111116 56.5 52.2 65.7
49 | 20111117 49.6 52.7 56.8
50 | 20111118 41.5 53.1 49.9
51 | 20111119 44.3 49.0 71.7
52 | 20111120 54.0 50.4 77.7
53 | 20111121 54.1 51.1 76.4
54 | 20111122 49.4 52.3 68.8
55 | 20111123 50.0 54.6 57.0
56 | 20111124 44.0 55.1 55.5
57 | 20111125 50.3 51.5 61.6
58 | 20111126 52.1 53.6 64.1
59 | 20111127 49.6 52.3 51.1
60 | 20111128 57.2 51.0 43.0
61 | 20111129 59.1 49.5 46.4
62 | 20111130 50.6 49.8 48.0
63 | 20111201 44.3 60.4 48.1
64 | 20111202 43.9 62.2 60.6
65 | 20111203 42.1 58.3 62.6
66 | 20111204 43.9 52.7 57.1
67 | 20111205 50.2 51.5 44.2
68 | 20111206 54.2 49.9 37.4
69 | 20111207 54.6 48.6 35.0
70 | 20111208 43.4 46.4 37.0
71 | 20111209 42.2 49.8 45.4
72 | 20111210 45.0 52.1 50.7
73 | 20111211 33.8 48.8 48.6
74 | 20111212 36.8 47.4 52.2
75 | 20111213 38.6 47.2 60.8
76 | 20111214 41.9 46.1 70.0
77 | 20111215 49.6 48.8 64.2
78 | 20111216 50.2 47.9 50.9
79 | 20111217 40.6 49.8 51.6
80 | 20111218 29.1 49.1 55.2
81 | 20111219 33.7 48.3 62.1
82 | 20111220 45.8 49.3 56.3
83 | 20111221 47.4 48.4 47.2
84 | 20111222 54.4 53.3 52.3
85 | 20111223 47.8 47.5 45.2
86 | 20111224 34.9 47.9 43.6
87 | 20111225 35.9 48.9 42.9
88 | 20111226 43.6 45.9 48.2
89 | 20111227 42.9 47.2 45.4
90 | 20111228 46.2 48.9 44.2
91 | 20111229 30.8 50.9 50.4
92 | 20111230 40.8 52.9 52.4
93 | 20111231 49.8 50.1 53.5
94 | 20120101 46.3 53.9 55.9
95 | 20120102 43.2 53.1 48.2
96 | 20120103 30.3 49.7 41.0
97 | 20120104 19.2 52.7 48.9
98 | 20120105 32.1 52.6 54.8
99 | 20120106 41.2 49.0 61.2
100 | 20120107 47.0 51.0 59.7
101 | 20120108 46.0 56.8 52.5
102 | 20120109 34.7 52.3 54.0
103 | 20120110 39.4 51.6 47.7
104 | 20120111 40.4 49.8 49.2
105 | 20120112 45.4 51.9 48.4
106 | 20120113 40.7 53.7 40.2
107 | 20120114 30.4 52.9 43.9
108 | 20120115 23.9 49.7 45.2
109 | 20120116 22.6 45.3 65.0
110 | 20120117 39.8 43.6 68.2
111 | 20120118 43.2 45.0 47.5
112 | 20120119 26.3 47.3 57.1
113 | 20120120 32.8 51.4 61.9
114 | 20120121 27.4 53.7 54.6
115 | 20120122 25.0 48.3 56.7
116 | 20120123 39.4 52.9 54.4
117 | 20120124 48.7 49.1 52.7
118 | 20120125 43.0 52.1 61.8
119 | 20120126 37.1 53.6 55.0
120 | 20120127 48.2 50.4 50.7
121 | 20120128 43.7 50.3 52.9
122 | 20120129 40.1 53.8 44.4
123 | 20120130 38.0 51.9 49.1
124 | 20120131 43.5 50.0 62.8
125 | 20120201 50.4 50.0 64.6
126 | 20120202 45.8 51.3 61.1
127 | 20120203 37.5 51.5 70.0
128 | 20120204 40.8 52.0 61.3
129 | 20120205 36.5 53.8 48.2
130 | 20120206 39.1 54.6 44.2
131 | 20120207 43.2 54.3 51.3
132 | 20120208 36.5 51.9 49.2
133 | 20120209 36.5 53.8 45.7
134 | 20120210 38.3 53.9 54.1
135 | 20120211 36.9 52.3 44.9
136 | 20120212 29.7 50.1 36.5
137 | 20120213 33.1 49.5 44.8
138 | 20120214 39.6 48.6 52.3
139 | 20120215 42.3 49.9 68.0
140 | 20120216 39.7 52.4 54.6
141 | 20120217 46.0 49.9 53.8
142 | 20120218 41.2 51.6 56.2
143 | 20120219 39.8 47.8 50.8
144 | 20120220 38.1 48.7 53.0
145 | 20120221 37.1 49.7 61.0
146 | 20120222 45.5 53.4 68.8
147 | 20120223 50.6 54.1 69.4
148 | 20120224 42.7 55.9 59.3
149 | 20120225 42.6 51.7 47.2
150 | 20120226 36.9 47.7 47.7
151 | 20120227 40.9 45.4 61.9
152 | 20120228 45.9 47.0 67.2
153 | 20120229 40.7 49.8 70.1
154 | 20120301 41.3 48.9 62.1
155 | 20120302 36.8 48.1 72.7
156 | 20120303 47.6 50.7 59.0
157 | 20120304 44.2 55.0 51.8
158 | 20120305 38.5 48.8 55.0
159 | 20120306 32.9 48.4 61.8
160 | 20120307 43.3 49.9 67.1
161 | 20120308 51.2 49.2 72.0
162 | 20120309 47.8 51.7 46.4
163 | 20120310 37.2 49.3 46.7
164 | 20120311 42.9 50.0 56.9
165 | 20120312 48.8 48.6 61.9
166 | 20120313 52.6 53.9 68.8
167 | 20120314 60.5 55.2 71.9
168 | 20120315 47.2 55.9 72.0
169 | 20120316 44.7 54.6 72.5
170 | 20120317 48.2 48.2 71.7
171 | 20120318 48.2 47.1 71.1
172 | 20120319 53.1 45.8 73.0
173 | 20120320 57.8 49.7 63.8
174 | 20120321 57.5 51.4 60.0
175 | 20120322 57.3 51.4 62.3
176 | 20120323 61.7 48.4 61.1
177 | 20120324 55.8 49.0 62.0
178 | 20120325 48.4 46.4 64.6
179 | 20120326 49.8 49.7 66.0
180 | 20120327 39.6 54.1 65.8
181 | 20120328 49.7 54.6 69.2
182 | 20120329 56.8 52.3 69.5
183 | 20120330 46.5 54.5 73.5
184 | 20120331 42.2 56.2 73.9
185 | 20120401 45.3 51.1 75.3
186 | 20120402 48.1 50.5 75.4
187 | 20120403 51.2 52.2 77.3
188 | 20120404 61.0 50.6 67.0
189 | 20120405 50.7 47.9 71.1
190 | 20120406 48.0 47.4 70.4
191 | 20120407 51.1 49.4 73.6
192 | 20120408 55.7 50.0 71.1
193 | 20120409 58.3 51.3 70.0
194 | 20120410 55.0 53.8 69.0
195 | 20120411 49.0 52.9 69.2
196 | 20120412 51.7 53.9 74.5
197 | 20120413 53.1 50.2 73.4
198 | 20120414 55.2 50.9 76.0
199 | 20120415 62.3 51.5 74.5
200 | 20120416 62.9 51.9 63.6
201 | 20120417 69.3 53.2 67.3
202 | 20120418 59.0 53.0 65.1
203 | 20120419 54.1 55.1 67.9
204 | 20120420 56.5 55.8 68.9
205 | 20120421 58.2 58.0 65.1
206 | 20120422 52.4 52.8 65.4
207 | 20120423 51.6 55.1 70.1
208 | 20120424 49.3 57.9 67.0
209 | 20120425 52.5 57.5 75.4
210 | 20120426 50.5 55.3 77.5
211 | 20120427 51.9 53.5 77.0
212 | 20120428 47.4 54.7 77.7
213 | 20120429 54.1 54.0 77.7
214 | 20120430 51.9 53.4 77.7
215 | 20120501 57.4 52.7 77.0
216 | 20120502 53.7 50.7 77.9
217 | 20120503 53.1 52.6 79.1
218 | 20120504 57.2 53.4 80.1
219 | 20120505 57.0 53.1 82.1
220 | 20120506 56.6 56.5 79.0
221 | 20120507 54.6 55.3 79.8
222 | 20120508 57.9 52.0 70.0
223 | 20120509 59.2 52.4 69.8
224 | 20120510 61.1 53.4 71.3
225 | 20120511 59.7 53.1 69.4
226 | 20120512 64.1 49.9 72.0
227 | 20120513 65.3 52.0 72.4
228 | 20120514 64.2 56.0 72.5
229 | 20120515 62.0 53.0 67.6
230 | 20120516 63.8 51.0 69.0
231 | 20120517 64.5 51.4 72.7
232 | 20120518 61.0 52.2 73.7
233 | 20120519 62.6 52.4 77.5
234 | 20120520 66.2 54.5 75.8
235 | 20120521 62.7 52.8 76.9
236 | 20120522 63.7 53.9 78.8
237 | 20120523 66.4 56.5 77.7
238 | 20120524 64.5 54.7 80.6
239 | 20120525 65.4 52.5 81.4
240 | 20120526 69.4 52.1 82.3
241 | 20120527 71.9 52.2 80.3
242 | 20120528 74.4 52.9 80.3
243 | 20120529 75.9 52.1 82.2
244 | 20120530 72.9 52.1 81.9
245 | 20120531 72.5 53.3 82.4
246 | 20120601 67.2 54.8 77.9
247 | 20120602 68.3 54.0 81.1
248 | 20120603 67.7 52.3 82.2
249 | 20120604 61.9 55.3 81.2
250 | 20120605 58.3 53.5 83.0
251 | 20120606 61.7 54.1 83.2
252 | 20120607 66.7 53.9 82.1
253 | 20120608 68.7 54.4 77.5
254 | 20120609 72.2 55.0 77.9
255 | 20120610 72.6 60.0 82.9
256 | 20120611 69.2 57.2 86.8
257 | 20120612 66.9 55.1 85.3
258 | 20120613 66.7 53.3 76.9
259 | 20120614 67.7 53.4 84.5
260 | 20120615 68.5 54.6 84.4
261 | 20120616 67.5 57.0 83.8
262 | 20120617 64.2 55.6 82.5
263 | 20120618 61.7 52.5 82.9
264 | 20120619 66.4 53.9 82.5
265 | 20120620 77.9 55.3 81.3
266 | 20120621 88.3 53.3 80.8
267 | 20120622 82.2 54.1 81.7
268 | 20120623 77.0 55.2 83.9
269 | 20120624 75.4 55.8 85.5
270 | 20120625 70.9 56.8 87.2
271 | 20120626 65.9 57.5 88.0
272 | 20120627 73.5 57.7 89.6
273 | 20120628 77.4 56.6 86.7
274 | 20120629 79.6 56.4 85.3
275 | 20120630 84.2 58.4 81.7
276 | 20120701 81.8 58.8 78.5
277 | 20120702 82.5 56.4 83.1
278 | 20120703 80.2 56.5 83.1
279 | 20120704 77.8 55.8 84.5
280 | 20120705 86.1 54.8 84.6
281 | 20120706 79.9 54.9 84.2
282 | 20120707 83.5 54.7 86.7
283 | 20120708 81.5 52.8 84.3
284 | 20120709 77.8 53.7 83.7
285 | 20120710 76.1 53.1 77.1
286 | 20120711 76.3 52.7 77.4
287 | 20120712 75.8 52.0 80.6
288 | 20120713 77.2 53.4 81.4
289 | 20120714 79.3 54.0 80.2
290 | 20120715 78.9 54.0 81.8
291 | 20120716 79.6 54.5 77.3
292 | 20120717 83.3 56.7 80.8
293 | 20120718 84.3 57.5 81.6
294 | 20120719 75.1 57.1 80.9
295 | 20120720 68.4 58.1 83.9
296 | 20120721 68.4 57.6 85.6
297 | 20120722 72.2 56.0 83.6
298 | 20120723 75.6 56.6 84.0
299 | 20120724 82.6 57.8 83.0
300 | 20120725 78.4 57.5 84.8
301 | 20120726 77.0 56.4 84.4
302 | 20120727 79.4 55.3 84.3
303 | 20120728 77.4 55.0 83.9
304 | 20120729 72.5 55.6 85.0
305 | 20120730 72.9 55.6 84.9
306 | 20120731 73.6 55.9 86.3
307 | 20120801 75.0 55.4 86.5
308 | 20120802 77.7 54.4 85.8
309 | 20120803 79.7 53.7 85.3
310 | 20120804 79.6 54.1 86.0
311 | 20120805 81.5 57.8 84.2
312 | 20120806 80.0 58.2 81.9
313 | 20120807 75.7 58.0 86.5
314 | 20120808 77.8 57.0 86.1
315 | 20120809 78.6 55.0 86.8
316 | 20120810 77.8 54.8 88.0
317 | 20120811 78.5 53.0 85.1
318 | 20120812 78.8 52.5 87.4
319 | 20120813 78.6 53.3 88.0
320 | 20120814 76.8 53.9 88.0
321 | 20120815 76.7 56.2 87.2
322 | 20120816 75.9 57.1 86.1
323 | 20120817 77.6 55.3 86.8
324 | 20120818 72.6 56.2 84.9
325 | 20120819 70.4 54.3 76.8
326 | 20120820 71.8 53.1 80.6
327 | 20120821 73.6 53.4 80.0
328 | 20120822 74.7 54.5 78.2
329 | 20120823 74.6 55.7 79.1
330 | 20120824 76.0 54.8 81.9
331 | 20120825 76.2 53.8 84.7
332 | 20120826 73.4 56.5 83.5
333 | 20120827 74.6 58.3 82.1
334 | 20120828 79.4 58.7 84.0
335 | 20120829 74.7 57.5 85.7
336 | 20120830 73.5 55.9 87.2
337 | 20120831 77.9 55.4 82.9
338 | 20120901 80.7 55.7 84.8
339 | 20120902 75.1 53.1 83.9
340 | 20120903 73.5 53.5 85.5
341 | 20120904 73.5 52.5 86.4
342 | 20120905 77.7 54.5 85.8
343 | 20120906 74.2 56.3 85.4
344 | 20120907 76.0 56.4 85.3
345 | 20120908 77.1 56.5 81.9
346 | 20120909 69.7 56.4 74.8
347 | 20120910 67.8 55.4 71.6
348 | 20120911 64.0 56.2 75.9
349 | 20120912 68.1 55.7 82.1
350 | 20120913 69.3 54.3 80.5
351 | 20120914 70.0 55.2 70.0
352 | 20120915 69.3 54.3 71.2
353 | 20120916 66.3 52.9 70.3
354 | 20120917 67.0 54.8 72.1
355 | 20120918 72.8 54.8 73.7
356 | 20120919 67.2 56.8 72.7
357 | 20120920 62.1 55.4 71.7
358 | 20120921 64.0 55.8 72.9
359 | 20120922 65.5 55.9 73.1
360 | 20120923 65.7 52.8 75.6
361 | 20120924 60.4 54.5 78.3
362 | 20120925 63.2 53.3 78.3
363 | 20120926 68.5 53.6 79.6
364 | 20120927 69.2 52.1 76.4
365 | 20120928 68.7 52.6 77.2
366 | 20120929 62.5 53.9 75.2
367 | 20120930 62.3 55.1 71.9
368 |
--------------------------------------------------------------------------------
/example/src/data/temp2.tsv:
--------------------------------------------------------------------------------
1 | date New York San Francisco Austin
2 | 20111001 63.4 62.7 72.2
3 | 20111002 58.0 59.9 67.7
4 | 20111003 60.3 59.1 69.4
5 | 20111004 55.7 58.8 68.0
6 | 20111005 64.2 58.7 72.4
7 | 20111006 58.8 57.0 77.0
8 | 20111007 57.9 56.7 20.3
9 | 20111008 61.8 56.8 78.9
10 | 20111009 69.3 56.7 68.8
11 | 20111010 71.2 60.1 68.7
12 | 20111011 68.7 61.1 20.3
13 | 20111012 61.8 39.5 75.3
14 | 20111013 63.0 64.3 76.6
15 | 20111014 66.9 67.1 66.6
16 | 20111015 61.7 64.6 68.0
17 | 20111016 61.8 61.6 59.6
18 | 20111017 62.8 61.1 71.1
19 | 20111018 60.8 39.2 70.0
20 | 20111019 62.1 58.9 61.6
21 | 20111020 65.1 57.2 57.4
22 | 20111021 55.6 56.4 64.3
23 | 20111022 54.4 60.7 72.4
24 | 20111023 54.4 30.1 72.4
25 | 20111024 54.8 60.9 72.5
26 | 20111025 57.9 56.1 72.7
27 | 20111026 54.6 54.6 73.4
28 | 20111027 54.4 56.1 70.7
29 | 20111028 42.5 58.1 56.8
30 | 20111029 40.9 39.5 51.0
31 | 20111030 38.6 57.7 54.9
32 | 20111031 55.2 55.1 58.8
33 | 20111101 49.6 57.9 62.6
34 | 20111102 47.2 64.6 71.0
35 | 20111103 50.1 56.2 58.4
36 | 20111104 50.1 50.5 45.1
37 | 20111105 43.5 51.3 52.2
38 | 20111106 43.8 52.6 73.0
39 | 20111107 48.9 51.4 75.4
40 | 20111108 55.5 50.6 72.1
41 | 20111109 60.7 54.6 56.6
42 | 20111110 57.7 55.6 55.4
43 | 20111111 48.5 60.9 46.7
44 | 20111112 46.8 54.0 62.0
45 | 20111113 51.1 60.8 71.6
46 | 20111114 56.8 60.5 75.5
47 | 20111115 59.7 60.4 72.1
48 | 20111116 56.5 52.2 65.7
49 | 20111117 49.6 52.7 56.8
50 | 20111118 41.5 60.1 49.9
51 | 20111119 55.3 49.0 71.7
52 | 20111120 54.0 50.4 77.7
53 | 20111121 54.1 51.1 76.4
54 | 20111122 49.4 52.3 68.8
55 | 20111123 50.0 54.6 57.0
56 | 20111124 55.0 55.1 55.5
57 | 20111125 50.3 51.5 61.6
58 | 20111126 52.1 60.6 64.1
59 | 20111127 49.6 52.3 51.1
60 | 20111128 57.2 51.0 43.0
61 | 20111129 59.1 49.5 46.4
62 | 20111130 50.6 49.8 48.0
63 | 20111201 55.3 60.4 48.1
64 | 20111202 43.9 62.2 60.6
65 | 20111203 42.1 58.3 62.6
66 | 20111204 43.9 52.7 57.1
67 | 20111205 50.2 51.5 55.2
68 | 20111206 54.2 49.9 37.4
69 | 20111207 54.6 48.6 35.0
70 | 20111208 43.4 46.4 37.0
71 | 20111209 42.2 49.8 45.4
72 | 20111210 45.0 52.1 50.7
73 | 20111211 33.8 48.8 48.6
74 | 20111212 36.8 47.4 52.2
75 | 20111213 38.6 47.2 60.8
76 | 20111214 41.9 46.1 70.0
77 | 20111215 49.6 48.8 64.2
78 | 20111216 50.2 47.9 50.9
79 | 20111217 40.6 49.8 51.6
80 | 20111218 29.1 49.1 55.2
81 | 20111219 33.7 48.3 62.1
82 | 20111220 45.8 49.3 56.3
83 | 20111221 47.4 48.4 47.2
84 | 20111222 54.4 60.3 52.3
85 | 20111223 47.8 47.5 45.2
86 | 20111224 34.9 47.9 43.6
87 | 20111225 35.9 48.9 42.9
88 | 20111226 43.6 45.9 48.2
89 | 20111227 42.9 47.2 45.4
90 | 20111228 46.2 48.9 55.2
91 | 20111229 30.8 50.9 50.4
92 | 20111230 40.8 52.9 52.4
93 | 20111231 49.8 50.1 60.5
94 | 20120101 46.3 60.9 55.9
95 | 20120102 43.2 60.1 48.2
96 | 20120103 30.3 49.7 41.0
97 | 20120104 19.2 52.7 48.9
98 | 20120105 32.1 52.6 54.8
99 | 20120106 41.2 49.0 61.2
100 | 20120107 47.0 51.0 59.7
101 | 20120108 46.0 56.8 52.5
102 | 20120109 34.7 52.3 54.0
103 | 20120110 39.4 51.6 47.7
104 | 20120111 40.4 49.8 49.2
105 | 20120112 45.4 51.9 48.4
106 | 20120113 40.7 60.7 40.2
107 | 20120114 30.4 52.9 43.9
108 | 20120115 23.9 49.7 45.2
109 | 20120116 22.6 45.3 65.0
110 | 20120117 39.8 43.6 68.2
111 | 20120118 43.2 45.0 47.5
112 | 20120119 26.3 47.3 57.1
113 | 20120120 32.8 51.4 61.9
114 | 20120121 27.4 60.7 54.6
115 | 20120122 25.0 48.3 56.7
116 | 20120123 39.4 52.9 54.4
117 | 20120124 48.7 49.1 52.7
118 | 20120125 43.0 52.1 61.8
119 | 20120126 37.1 60.6 55.0
120 | 20120127 48.2 50.4 50.7
121 | 20120128 43.7 50.3 52.9
122 | 20120129 40.1 60.8 55.4
123 | 20120130 38.0 51.9 49.1
124 | 20120131 43.5 50.0 62.8
125 | 20120201 50.4 50.0 64.6
126 | 20120202 45.8 51.3 61.1
127 | 20120203 37.5 51.5 70.0
128 | 20120204 40.8 52.0 61.3
129 | 20120205 36.5 60.8 48.2
130 | 20120206 39.1 54.6 55.2
131 | 20120207 43.2 54.3 51.3
132 | 20120208 36.5 51.9 49.2
133 | 20120209 36.5 60.8 45.7
134 | 20120210 38.3 60.9 54.1
135 | 20120211 36.9 52.3 55.9
136 | 20120212 29.7 50.1 36.5
137 | 20120213 33.1 49.5 55.8
138 | 20120214 39.6 48.6 52.3
139 | 20120215 42.3 49.9 68.0
140 | 20120216 39.7 52.4 54.6
141 | 20120217 46.0 49.9 60.8
142 | 20120218 41.2 51.6 56.2
143 | 20120219 39.8 47.8 50.8
144 | 20120220 38.1 48.7 53.0
145 | 20120221 37.1 49.7 61.0
146 | 20120222 45.5 53.4 68.8
147 | 20120223 50.6 54.1 69.4
148 | 20120224 42.7 55.9 59.3
149 | 20120225 42.6 51.7 47.2
150 | 20120226 36.9 47.7 47.7
151 | 20120227 40.9 45.4 61.9
152 | 20120228 45.9 47.0 67.2
153 | 20120229 40.7 49.8 70.1
154 | 20120301 41.3 48.9 62.1
155 | 20120302 36.8 48.1 72.7
156 | 20120303 47.6 50.7 59.0
157 | 20120304 55.2 55.0 51.8
158 | 20120305 38.5 48.8 55.0
159 | 20120306 32.9 48.4 61.8
160 | 20120307 43.3 49.9 67.1
161 | 20120308 51.2 49.2 72.0
162 | 20120309 47.8 51.7 46.4
163 | 20120310 37.2 49.3 46.7
164 | 20120311 42.9 50.0 56.9
165 | 20120312 48.8 48.6 61.9
166 | 20120313 52.6 53.9 68.8
167 | 20120314 60.5 55.2 71.9
168 | 20120315 47.2 55.9 72.0
169 | 20120316 55.7 54.6 72.5
170 | 20120317 48.2 48.2 71.7
171 | 20120318 48.2 47.1 71.1
172 | 20120319 53.1 45.8 73.0
173 | 20120320 57.8 49.7 63.8
174 | 20120321 57.5 51.4 60.0
175 | 20120322 57.3 51.4 62.3
176 | 20120323 61.7 48.4 61.1
177 | 20120324 55.8 49.0 62.0
178 | 20120325 48.4 46.4 64.6
179 | 20120326 49.8 49.7 66.0
180 | 20120327 39.6 54.1 65.8
181 | 20120328 49.7 54.6 69.2
182 | 20120329 56.8 52.3 69.5
183 | 20120330 46.5 54.5 73.5
184 | 20120331 42.2 56.2 73.9
185 | 20120401 45.3 51.1 75.3
186 | 20120402 48.1 50.5 75.4
187 | 20120403 51.2 52.2 77.3
188 | 20120404 61.0 50.6 67.0
189 | 20120405 50.7 47.9 71.1
190 | 20120406 48.0 47.4 70.4
191 | 20120407 51.1 49.4 73.6
192 | 20120408 55.7 50.0 71.1
193 | 20120409 58.3 51.3 70.0
194 | 20120410 55.0 53.8 69.0
195 | 20120411 49.0 52.9 69.2
196 | 20120412 51.7 53.9 74.5
197 | 20120413 53.1 50.2 73.4
198 | 20120414 55.2 50.9 76.0
199 | 20120415 62.3 51.5 74.5
200 | 20120416 62.9 51.9 63.6
201 | 20120417 69.3 53.2 67.3
202 | 20120418 59.0 53.0 65.1
203 | 20120419 54.1 55.1 67.9
204 | 20120420 56.5 55.8 68.9
205 | 20120421 58.2 58.0 65.1
206 | 20120422 52.4 52.8 65.4
207 | 20120423 51.6 55.1 70.1
208 | 20120424 49.3 57.9 67.0
209 | 20120425 52.5 57.5 75.4
210 | 20120426 50.5 55.3 77.5
211 | 20120427 51.9 53.5 77.0
212 | 20120428 47.4 54.7 77.7
213 | 20120429 54.1 54.0 77.7
214 | 20120430 51.9 53.4 77.7
215 | 20120501 57.4 52.7 77.0
216 | 20120502 53.7 50.7 77.9
217 | 20120503 53.1 52.6 79.1
218 | 20120504 57.2 53.4 80.1
219 | 20120505 57.0 53.1 82.1
220 | 20120506 56.6 56.5 79.0
221 | 20120507 54.6 55.3 79.8
222 | 20120508 57.9 52.0 70.0
223 | 20120509 59.2 52.4 69.8
224 | 20120510 61.1 53.4 71.3
225 | 20120511 59.7 53.1 69.4
226 | 20120512 64.1 49.9 72.0
227 | 20120513 65.3 52.0 72.4
228 | 20120514 64.2 56.0 72.5
229 | 20120515 62.0 53.0 67.6
230 | 20120516 63.8 51.0 69.0
231 | 20120517 64.5 51.4 72.7
232 | 20120518 61.0 52.2 73.7
233 | 20120519 62.6 52.4 77.5
234 | 20120520 66.2 54.5 75.8
235 | 20120521 62.7 52.8 76.9
236 | 20120522 63.7 53.9 78.8
237 | 20120523 66.4 56.5 77.7
238 | 20120524 64.5 54.7 80.6
239 | 20120525 65.4 52.5 81.4
240 | 20120526 69.4 52.1 82.3
241 | 20120527 71.9 52.2 80.3
242 | 20120528 74.4 52.9 80.3
243 | 20120529 75.9 52.1 82.2
244 | 20120530 72.9 52.1 81.9
245 | 20120531 72.5 53.3 82.4
246 | 20120601 67.2 54.8 77.9
247 | 20120602 68.3 54.0 81.1
248 | 20120603 67.7 52.3 82.2
249 | 20120604 61.9 55.3 81.2
250 | 20120605 58.3 53.5 83.0
251 | 20120606 61.7 54.1 83.2
252 | 20120607 66.7 53.9 82.1
253 | 20120608 68.7 54.4 77.5
254 | 20120609 72.2 55.0 77.9
255 | 20120610 72.6 60.0 82.9
256 | 20120611 69.2 57.2 86.8
257 | 20120612 66.9 55.1 85.3
258 | 20120613 66.7 53.3 76.9
259 | 20120614 67.7 53.4 84.5
260 | 20120615 68.5 54.6 84.4
261 | 20120616 67.5 57.0 83.8
262 | 20120617 64.2 55.6 82.5
263 | 20120618 61.7 52.5 82.9
264 | 20120619 66.4 53.9 82.5
265 | 20120620 77.9 55.3 81.3
266 | 20120621 88.3 53.3 80.8
267 | 20120622 82.2 54.1 81.7
268 | 20120623 77.0 55.2 83.9
269 | 20120624 75.4 55.8 85.5
270 | 20120625 70.9 56.8 87.2
271 | 20120626 65.9 57.5 88.0
272 | 20120627 73.5 57.7 89.6
273 | 20120628 99.4 56.6 86.7
274 | 20120629 79.6 56.4 85.3
275 | 20120630 84.2 99.4 81.7
276 | 20120701 81.8 58.8 78.5
277 | 20120702 82.5 99.4 83.1
278 | 20120703 80.2 56.5 83.1
279 | 20120704 99.8 55.8 84.5
280 | 20120705 86.1 54.8 84.6
281 | 20120706 79.9 54.9 84.2
282 | 20120707 83.5 54.7 86.7
283 | 20120708 49.5 52.8 84.3
284 | 20120709 77.8 53.7 83.7
285 | 20120710 76.1 53.1 77.1
286 | 20120711 76.3 52.7 77.4
287 | 20120712 30.8 52.0 80.6
288 | 20120713 77.2 53.4 81.4
289 | 20120714 79.3 54.0 80.2
290 | 20120715 83.9 54.0 100.8
291 | 20120716 79.6 54.5 77.3
292 | 20120717 83.3 56.7 80.8
293 | 20120718 40.3 57.5 81.6
294 | 20120719 75.1 57.1 80.9
295 | 20120720 68.4 58.1 83.9
296 | 20120721 68.4 57.6 85.6
297 | 20120722 72.2 56.0 83.6
298 | 20120723 75.6 56.6 84.0
299 | 20120724 82.6 99.8 83.0
300 | 20120725 78.4 57.5 84.8
301 | 20120726 77.0 56.4 84.4
302 | 20120727 79.4 55.3 84.3
303 | 20120728 77.4 55.0 83.9
304 | 20120729 72.5 55.6 85.0
305 | 20120730 72.9 55.6 84.9
306 | 20120731 73.6 55.9 86.3
307 | 20120801 75.0 55.4 86.5
308 | 20120802 77.7 40.4 85.8
309 | 20120803 79.7 53.7 85.3
310 | 20120804 79.6 54.1 86.0
311 | 20120805 81.5 57.8 84.2
312 | 20120806 80.0 58.2 81.9
313 | 20120807 75.7 58.0 86.5
314 | 20120808 77.8 57.0 86.1
315 | 20120809 78.6 55.0 86.8
316 | 20120810 77.8 54.8 88.0
317 | 20120811 78.5 99.0 85.1
318 | 20120812 78.8 52.5 87.4
319 | 20120813 78.6 53.3 88.0
320 | 20120814 76.8 53.9 88.0
321 | 20120815 76.7 56.2 87.2
322 | 20120816 75.9 57.1 86.1
323 | 20120817 77.6 55.3 86.8
324 | 20120818 72.6 56.2 84.9
325 | 20120819 70.4 99.3 76.8
326 | 20120820 71.8 53.1 80.6
327 | 20120821 73.6 53.4 80.0
328 | 20120822 74.7 54.5 78.2
329 | 20120823 74.6 99.7 79.1
330 | 20120824 76.0 54.8 81.9
331 | 20120825 76.2 53.8 84.7
332 | 20120826 73.4 56.5 83.5
333 | 20120827 74.6 58.3 82.1
334 | 20120828 79.4 99.7 84.0
335 | 20120829 74.7 57.5 85.7
336 | 20120830 73.5 55.9 87.2
337 | 20120831 77.9 55.4 82.9
338 | 20120901 80.7 55.7 84.8
339 | 20120902 75.1 60.1 83.9
340 | 20120903 73.5 60.5 85.5
341 | 20120904 73.5 52.5 86.4
342 | 20120905 77.7 54.5 85.8
343 | 20120906 74.2 56.3 85.4
344 | 20120907 76.0 56.4 85.3
345 | 20120908 77.1 56.5 81.9
346 | 20120909 69.7 100.4 74.8
347 | 20120910 67.8 100.4 71.6
348 | 20120911 64.0 56.2 75.9
349 | 20120912 68.1 55.7 82.1
350 | 20120913 69.3 99.3 80.5
351 | 20120914 70.0 55.2 70.0
352 | 20120915 69.3 54.3 71.2
353 | 20120916 66.3 52.9 70.3
354 | 20120917 67.0 54.8 72.1
355 | 20120918 72.8 54.8 73.7
356 | 20120919 67.2 56.8 72.7
357 | 20120920 62.1 55.4 71.7
358 | 20120921 64.0 55.8 72.9
359 | 20120922 65.5 55.9 73.1
360 | 20120923 65.7 52.8 75.6
361 | 20120924 60.4 54.5 78.3
362 | 20120925 63.2 60.3 78.3
363 | 20120926 68.5 60.6 79.6
364 | 20120927 69.2 52.1 76.4
365 | 20120928 68.7 52.6 77.2
366 | 20120929 62.5 60.9 75.2
367 | 20120930 62.3 55.1 71.9
368 |
--------------------------------------------------------------------------------