d3fc / d3fc Goto Github PK

View Code? Open in Web Editor NEW

1.3K 41.0 189.0 21.62 MB

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

Home Page: https://d3fc.io/

License: MIT License

JavaScript 13.06% Shell 1.73% HTML 79.25% TypeScript 5.96%

d3 d3js d3fc interactive-charts chart

d3fc's Introduction

Components to rapidly build fast, highly customisable, interactive charts with D3

Installation

The latest release of D3FC is available via npm or the unpkg CDN. The D3FC project is composed of a number of separate packages each of which can be installed via npm and used independently, or if you prefer you can install the entire D3FC bundle, which includes all of the separate packages -

npm install d3fc

<script src="https://unpkg.com/d3"></script>
<script src="https://unpkg.com/d3fc"></script>

Test your installation using the simple chart example.

Documentation

The following getting-started guides are available -

Building a Chart - a walk through building a chart with D3FC and what makes it different from other libraries.
The Decorate Pattern - the pattern D3FC employs, resulting in charting components that are both simple and flexible.
Transitions - how to use D3 transitions with D3FC.

For API documentation see the corresponding package documentation -

Examples can be found on the project website. These same examples are also available offline.

Framework integration examples:

There are also a number of other documents and articles that provide a bit more background regarding the design principles of D3FC -

Unboxing D3 - there are numerous charting libraries that are 'built with D3', but all of them keep D3 'in its box' and as a result, you cannot unleash its full power!
Extending D3 with Higher Order Components - a brief article that walks through the process of building a chart with D3FC
Building a Complex Financial Chart with D3 and D3FC - a lengthy and detailed article that builds a complex and bespoke chart which you can view online here.

Developing

This project is a mono-repo that uses Lerna to manage dependencies between packages. To get started, run -

npm ci
npm test

When making changes to a package, you can execute the following either from within the package folder to build just that package or from the project root to build all packages -

npm run bundle

To open a development sandbox which is automatically updated when you save changes to source files, navigate to the project root and run -

npm start

Releases

Releases are managed via CI and semantic release.

License

These components are licensed under the MIT License.

d3fc's People

Contributors

Stargazers

Watchers

Forkers

tlsim jleft bartiosze chrisprice arturochian jmarca llenroc witkowd janakerman rd-pl littleli barrychampion steviefordi colinunc radiodario drewmiley grantcupps fxcebx afredon domezchoc1 bjedrzejewski wpferg owennw defconcepts lukeshope 99plus2 brobits hanss jdhodges thebrettd oriondean alisd23 pg1337 gabhi bmazzarol rhewitt stevenjob barbagrigia davepuchyr minhpascal colineberhardt natasapeic pablofernandezorg tamaramakarem ryanggrey hydrosquall senthilnathansk robertomalatesta bigsov cambricorp philest tclarke-scottlogic dandiestsquare1 spavelv gochartingadmin yuanhao redsift vsajip christian-fei rlax dbarkey-scottlogic mikelaud artonevala strong-roots-capital andy-lee-eng ro4052 redbearsam culiniac zhangzihaodt slibre ivyy salketer daniel-007 rdspencer hanna-greaves tommclaughlan joelwilliamsmith sasquacz2017 swoods-scottlogic oliverforeman mattstobbs mallegrissimo adilparvez forkkit yurikoval aldomx itpmngt jamesmporter josted parliament718 melaurent tredondo melroy89 gianluca-venturini doc22940 vpsoft irtyamine scootcho varnikaj phanchaulong

d3fc's Issues

Remove jQuery dependency

Most of the DOM operations we need to perform are simple, or are supported by D3 itself

Taking this code:

https://github.com/ScottLogic/d3-financial-components/blob/master/components/utilities/dimensions.js#L24

$(element[0]).width()

It can be replaced with something like the following:

(element[0])[0].offsetWidth

See this great reference: http://youmightnotneedjquery.com/

Example: Crosshairs

Example: Candlestick series

Rename 'angular example' to de-emphasise angular

Perhaps this should go into a root 'app' folder.

Documentation: Annotation

Example: Data generator

Drawing a Fibonacci Fan directly north causes Javascript errors

Relevant line numbers below:

Error: Invalid value for attribute y2="-Infinity" d3.js:594attrConstant d3.js:594(anonymous function) d3.js:884d3_selection_each d3.js:890d3_selectionPrototype.each d3.js:883d3_selectionPrototype.attr d3.js:583setFanLines fibonacciFan.js:262fibonacciFan.update fibonacciFan.js:293redrawChart scottLogicChartCtrl.js:471(anonymous function) scottLogicChartCtrl.js:399event d3.js:437(anonymous function) d3.js:473zoomed d3.js:1361moved d3.js:1379(anonymous function) d3.js:1052

Error: Invalid value for attribute points="620.7777777777777,393.58513667088164 1510,-Infinity 1510,-Infinity" d3.js:594attrConstant d3.js:594(anonymous function) d3.js:884d3_selection_each d3.js:890d3_selectionPrototype.each d3.js:883d3_selectionPrototype.attr d3.js:583setFanLines fibonacciFan.js:263fibonacciFan.update fibonacciFan.js:293redrawChart scottLogicChartCtrl.js:471(anonymous function) scottLogicChartCtrl.js:399event d3.js:437(anonymous function) d3.js:473zoomed d3.js:1361moved d3.js:1379(anonymous function)

OHLC series is old version

Updates to merge:
OHLC bars as SVG paths.
Configurable bar widths
Transitions?

Documentation: Crosshairs

Use dimensions / chartLayout component to generate RSI and navigator charts in angular app

Example: Chart layout component

Example: Bollinger bands

Measurement Tool

The measurement tool has the following issues:

It functions even when hidden.
It vanishes after the last click, there should be an additional click to remove it much like the Fibonacci fan.
It does not scroll of scale when the chart does.
It should have some form of snapping mode.

Example: Comparison series

Example: RSI

Documentation: OHLC series

Documentation: Fibonacci fan

Measure tool doesn't update when chart is panned / zoomed

See the Fibonacci fan compoment to see how this should work

Example: Moving average

Example: Finance scale

Documentation: Comparison series

Geometric zoom

Like the comparison series, components that draw zoomable elements should support geometric zooming.
See also #17

Add configuration for data generator to app example

At a minimum allow customisation of how many points and the date range, but ideally everything. Don't worry if it's possible to add so much data it crashes the chart, that's kind of the point :)

Example: Fibonacci fan

Example: Measurement tool

Example: Gridlines

Example: Volume series

Documentation: Gridlines

Remove RequireJS dependency from the components

Documentation: Bollinger bands

Documentation: Candlestick series

Documentation: Volume series

Crosshairs when locked could append css class

When the crosshairs are active and frozen if we appended say a 'frozen' class tot the class attribute this would allow the user to change the locked/frozen colour in css.

Example: OHLC series

Documentation: Finance scale

We should handle browser resizing

Currently we can't resize the browser because the chart would need to redraw itself, along with any child elements.

Consider the use of 'fc' and the namespace instead of 'sl'

A suggestion by Chris price on one of my Pull Requests.

Example: Annotation

Add button for creating a new latest value to the app example

The button should append a new value to the end of the series, simulating a live series of data. Ideally the axis would automatically pan to the latest value if it was previously at the latest value.

Documentation: RSI

Finance scale tick placement

Currently these come from a linear scale, so will be placed at arbitrary weekdays. At different levels of zoom, it might make more sense to show ticks at the start of each week / month. This would require calculating tick placement using time intervals.

Right axis in AngularJS example with RSI

When toggling the RSI component on in the Angular example, the labels on the right axis do not fit in the margin. It's as if the margin is being re-sized at this point.

Thoughts on dimension components

dimensions => rename to chart layout
Create the ideal example - with the rendered output
Have accessors on the dimension to obtain the components (chartArea, plotArea)
Needs a picture!!!