D3 Financial Components (D3FC)
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 testsgrunt dev
- rungrunt build
, thengrunt watch
grunt dev:serve
- same asgrunt dev
but also starts a web server for viewing the visual tests
Other tasks include:
grunt check
- run JSHint and JSCS checksgrunt test
- run unit tests and build the visual testsgrunt watch
- watch the source files and rebuild when a change is savedgrunt serve
- start a web server for viewing the visual testsgrunt
- 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.