Note: Project is pre-alpha. Not ready for usage.

D3 Charts

Responsive D3 charts in React/Redux. Visit the live demo site here.

Install

npm install d3-charts

Usage

import React from 'react'
import ReactDOM from 'react-dom'
import { Barchart } from 'd3-charts'

const data = [{ "Firm": "Google",
                 "score": 4.5 },
               { "Firm": "Facebook",
                 "score": 4 },
               { "Firm": "Apple",
                 "score": 3 },
               { "Firm": "Salesforce",
                 "score": 5 }]

const options = {
  fill: 'royalblue',
  default_width: 768,
}

ReactDOM.render(<Barchart data={data} options={options}/>,
                document.getElementById('app'))

API

Barchart

This component is designed to visualize data in the form of a Barchart.

Props

data: | Array | required

This prop is required. An array of two diemension dataset is required. For example:

[ {color: 'France', score: '2' },
  {color: 'Germany', score: 4},
  {color: 'Italy', score: 2} ]

options: | Object | optional

This prop is optional. An object of options by key value pair. For example:

{
  fill: 'purple',
  tick_format_begin: '$',
  tick_format_end: '/hr'
}

fill | string

number_of_ticks | number

format_specifier | string | See: d3.format

tick_size_inner_y | number

tick_format_begin | string

tick_format_end | string

viz_title | string

default_width | number

Development

Interactive Development Server

/dev is a directory which supports interactive development.

The start:dev command will use Babel to transpile /d3-charts/src code and boot up a webpack dev server to serve a hot loaded UI. You can import a chart component in (internals/dev/src/main.js). Now you can develop the component with your code being hot reloaded into the browser.

To get started, from the root of the project:

npm install -g webpack-dev-server

npm run start:dev

navigate to http://localhost:1337

Testing

Test files are located next to their respective source files. For example, the unit test file for reducers/foo/index.js can be found at reducers/foo/index.test.js

Run unit tests:

npm test

Watch unit tests:

npm run test:watch