Repository files navigation

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

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

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

Test your installation using thesimple chart example.

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 -

• d3fc-annotation
• d3fc-axis
• d3fc-brush
• d3fc-chart
• d3fc-data-join
• d3fc-discontinuous-scale
• d3fc-element
• d3fc-extent
• d3fc-financial-feed
• d3fc-group
• d3fc-label-layout
• d3fc-pointer
• d3fc-random-data
• d3fc-rebind
• d3fc-sample
• d3fc-series
• d3fc-shape
• d3fc-technical-indicator
• d3fc-webgl
• d3fc-zoom

Examples can be found on theproject website. These same examples are alsoavailable offline.

Framework integration examples:

• Streaming Chart in React
• Streaming Chart in Angular
• Streaming Chart in Svelte

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 canview online here.

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

npm cinpm 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

This project is equipped with a Continuous Integration (CI) pipeline using GitHub Actions. It runs a series of checks whenever a pull request to master is opened. The pipeline includes the following steps:

• Build: Verify that the code can be successfully built.
• Test: Tests the application to ensure that new changes do not introduce regressions.
• Linting: The code is analyzed for adherence to coding standards and best practices, usingeslint,markdownlint, andcommitlint.

SeeConventional Commits for a more detailed explaination.

When opening a PR, be mindful of (and make necessary changes in accordance with) these checks.

Releases are managed via CI andChangesets.

When contributing to the project, developers should add a changeset.

A changeset is a Markdown file with YAML front matter. The contents of the Markdown is the change summary which will be written to the changelog and the YAML front matter describes what packages have changed and what SemVer bump types they should be

---"@d3fc":major"@d3fc/d3fc-annotation":minor---Change all the things

Changesets should include:

• WHAT the change is
• WHY the change was made
• HOW a consumer should update their code

To add a changeset, before putting up a PR, contributors should:

1. Run the command line scriptnpx changeset
2. Select the packages you want to include in the changeset using ↑ and ↓ to navigate to packages, and space to select a package.
3. Hit enter when all desired packages are selected.
4. You will be prompted to select a bump type for each selected package.
5. Select an appropriate bump type for the changes made. SeeSemVer Versioning

Your final prompt will be to provide a message to go alongside the changeset. This will be written into the changelog when the next release occurs.

Source

Dependabot updates should not affect the consumer, and so do not need a Changeset. These will have PATCH (x.x.1) version bumps.

FromSemVer -

1. MAJOR version when you make incompatible API changes (1.x.x)
2. MINOR version when you add functionality in a backward compatible manner (x.1.x)
3. PATCH version when you make backward compatible bug fixes (x.x.1)

Github tags and releases are done using theTag Release on Push action. By default, aminor version bump will be added. To override this, userelease:major,release:minor, orrelease:patch on PRs. Only one of these tags should be added to a PR.

FromSemVer -

1. MAJOR version when you make incompatible API changes
2. MINOR version when you add functionality in a backward compatible manner
3. PATCH version when you make backward compatible bug fixes

These components are licensed under theMIT License.

Project supported byScott Logic.