0.2.2 • Published 10 years ago

d3-financial-components v0.2.2

Weekly downloads
4
License
MIT
Repository
github
Last release
10 years ago

D3 Financial Components (D3FC) Build Status

A collection of components that make it easy to build interactive financial charts with D3.

Installation

D3FC and its dependencies (D3, css-layout) are available via npm. Simply install as follows:

npm install d3-financial-components

Once installed, you can reference the D3FC JavaScript, CSS and dependencies within an HTML page as follows:

<script src="node_modules/d3-financial-components/node_modules/d3/d3.js"></script>
<script src="node_modules/d3-financial-components/node_modules/css-layout/src/Layout.js"></script>
<script src="node_modules/d3-financial-components/dist/d3-financial-components.js"></script>

<link href="node_modules/d3-financial-components/dist/d3-financial-components.css" rel="stylesheet"/>

If you want a quick verification that everything has installed correctly, the following code will render a simple time series chart:

<div id="chart"></div>
<script type="text/javascript">
var data = fc.dataGenerator()(50);

var chart = fc.charts.linearTimeSeries()
    .xDomain(fc.utilities.extent(data, 'date'))
    .xTicks(5)
    .yDomain(fc.utilities.extent(data, ['high', 'low']))
    .yNice()
    .yTicks(5);

var gridlines = fc.scale.gridlines();
var candlestick = fc.series.candlestick();
var movingAverage = fc.indicators.movingAverage();

var multi = fc.series.multi()
    .series([gridlines, candlestick, movingAverage]);
chart.plotArea(multi);

d3.select("#chart")
    .append('svg')
    .style({
        height: '250px',
        width: '600px'
    })
    .datum(data)
    .call(chart);

</script>

To find out more about the various components, visit the project webpage.

Developing

npm, the package manager for Node.js, is used to manage the project's dependencies. Grunt, a JavaScript task runner, is used to test and build the project.

Initial Setup

  • Download or clone this repository locally
  • Ensure Node.js, which includes npm, is installed
  • Ensure Grunt is installed:
npm install -g grunt-cli
  • Navigate to the root of your local copy of this project and install the dependencies:
npm install
  • Perform an initial build:
grunt

Grunt Tasks

The following Grunt tasks, found in Gruntfile.js, can be run from the command line. The most commonly used tasks to build and develop the project are:

  • grunt build - generate the project's JavaScript and CSS files in the dist directory (at the root of the project); build the visual tests
  • grunt dev - run grunt build, then grunt watch
  • grunt dev:serve - same as grunt dev but also starts a web server for viewing the visual tests

Other tasks include:

  • grunt check - run JSHint and JSCS checks
  • grunt test - run unit tests and build the visual tests
  • grunt watch - watch the source files and rebuild when a change is saved
  • grunt serve - start a web server for viewing the visual tests
  • grunt - check, test and build the project

Visual Tests

The project includes a number of unit tests, however, because these components are visual in nature, unit testing is not enough. This project contains a number of ad-hoc visual tests that are found within the visual-tests folder. The visual tests are compiled, via assemble, to create a simple website. To view this site, run grunt serve or a static server from the visual-tests\dist folder.

License

These components are licensed under the MIT License.

0.2.2

10 years ago

0.2.1

10 years ago

0.1.1

10 years ago

0.1.0

10 years ago

0.0.7

10 years ago

0.0.6

10 years ago

0.0.5

10 years ago

0.0.4

10 years ago

0.0.3

10 years ago

0.0.2

10 years ago

0.0.1

10 years ago

0.0.0

10 years ago