react-d3/react-d3-basic

Name: react-d3-basic

Owner: react-d3

Description: Basic d3 charts in React.js, only include: line, bar, pie, scatter, area charts.

Created: 2015-09-18 22:52:01.0

Updated: 2018-01-19 12:06:44.0

Pushed: 2017-10-18 18:54:10.0

Homepage: http://reactd3.org/docs/basic

Size: 13571

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits
Howard Chi	2016-03-22 04:05:01.0	171
Jack Hou	2015-12-07 14:49:29.0	2
Chi-Hsuan Huang	2015-11-24 10:07:32.0	2

Other Committers

User	Email	Most Recent Commit	# Commits

README

react-d3-basic

react-d3 basic charts, charts that we support:

• Line Chart
• Multiple Line Chart
• Scatter Plot
• Area Chart
• Area Stack Chart
• Bar Chart
• Bar Group Chart
• Bar Stack Chart
• Bar Horizontal Chart
• Bar Group Horizontal Chart
• Bar Stack Horizontal Chart
• Pie Chart
• Donut Chart

Quick example

With webpack build tool

• Line Chart

 strict";

React = require('react');
ReactDOM = require('react-dom');
LineChart = require('react-d3-basic').LineChart;

ction() {

r generalChartData = require('./data/user.json');

r chartSeries = [
  {
    field: 'age',
    name: 'Age',
    color: '#ff7f0e',
    style: {
      "stroke-width": 2,
      "stroke-opacity": .2,
      "fill-opacity": .2
    }
  }
],
x = function(d) {
  return d.index;
}

actDOM.render(
<LineChart
  width= {600}
  height= {300}
  data= {generalChartData}
  chartSeries= {chartSeries}
  x= {x}
/>
document.getElementById('data_line')

In browser (without build tools)

Clone code react-d3-basic.js or minify js react-d3-basic.min.js and include the script in your HTML.

You'll also need react, react-dom, d3

• Line Chart

CTYPE html>
l>
ead>
<title>
  Line Chart example
</title>
head>
ody>
<div id="data_line"></div>
<script src="https://fb.me/react-0.14.2.js"></script>
<script src="https://fb.me/react-dom-0.14.2.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="../react-d3-basic.min.js"></script>
<script type="text/babel">
  var LineChart = ReactD3Basic.LineChart;
  var data = [
      {
          "age": 39,
          "index": 0
      },
      {
          "age": 38,
          "index": 1
      },
      {
          "age": 34,
          "index": 2
      },
      {
          "age": 12,
          "index": 3
      }
  ];

  var chartSeries = [
      {
        field: 'age',
        name: 'Age',
        color: '#ff7f0e',
        style: {
          "stroke-width": 2,
          "stroke-opacity": .2,
          "fill-opacity": .2
        }
      }
    ],
    x = function(d) {
      return d.index;
    }

  ReactDOM.render(
    <LineChart width= {600} height= {300} data= {data} chartSeries= {chartSeries} x= {x} />
  , document.getElementById('data_line')
  )
</script>
body>
ml>

Install

install --save react-d3-basic

LIVE DEMO

http://reactd3.org/docs/basic

Docs

Charts

Building Charts.

• Line Chart
• Area Chart
• Area Stack Chart
• Bar Chart
• Bar Group Chart
• Bar Stack Chart
• Scatter Plot
• Pie Chart
• Donut Chart
• Bar Horizontal
• Bar Stack Horizontal
• Bar Group Horizontal

Gallery

Develop

m install
de devServer.js

Open localhost:5000/example

Build production js, min.js code

m run prod

Docs

If you want to modify the docs file, please modify docs_pre folder.

After you finish, remember to install smash-md first, then run sh doc.sh to compile the readme.

Your new readme would show in docs folder.

History

Before v1.6.x …

• Initial release
• Babel 5
• D3 3.0

2016 / 3 / 3, v1.6.0

• Move to Babel 6.
• D3 4.0.
• improve example folder.

License

Apache 2.0