Awesome

Britecharts

Britecharts makes it easier to build stunning D3.js-powered interactive charts with little code.

<div align="center"> <a href="https://britecharts.github.io/britecharts/getting-started.html">Quickstart*</a> · <a href="https://britecharts.github.io/britecharts/tutorials-index.html">Tutorials*</a> · <a href="https://britecharts.github.io/britecharts/">Docs</a> · <a href="https://github.com/britecharts/britecharts-test-project">Test Project</a> · <a href="https://britecharts.github.io/britecharts/tutorial-kitchen-sink.html">Storybook*</a> · <a href="https://britecharts.github.io/britecharts/contributor-how-to-guides.html">Contribute*</a> Support: <a href="https://twitter.com/britecharts">Twitter</a>, <a href="https://github.com/britecharts/britecharts/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc">Issues</a> & <a href="https://d3js.slack.com/messages/tool-britecharts/">Slack</a> </div>

Britecharts is a client-side reusable Charting Library based on D3.js v5 that provides easy composition of charts and components to create amazing data visualizations.

Key Features

🛠 Reusable - Configure your charts to create different looks and behaviors.
🏗 Composable - Mix and match components to create insightful experiences.
🌈 Great design - Clean and vivid looks to amaze your users.
⚙️ Simple - The codebase is a regular D3.js code you can fork and modify.

Britecharts components have been written in ES2016 with a Test Driven methodology, so they are fully tested, and we are committed to keeping them that way.

Usage

The typical use of Britecharts involves creating a chart using its simple API, then rendering it on a container that has previously had data applied to it. The code will look like this:

    import { select } from 'd3-selection';
    import { bar } from '@britecharts/core';

    const barChart = bar();
    const barContainer = select('.bar-chart-container');
    const dataset = [...];

    barChart
        .width(500)
        .height(300);

    barContainer.datum(dataset).call(barChart);

To use Britecharts with React, you will need to use the @britecharts/react package. Also, if you use Angular, check out ngx-britecharts and their demos. We also include a set of wrappers in @britecharts/wrappers that you can use to employ Britecharts with other web frameworks.

API

All the components expose common API methods like width, height, and margin. Additionally, each component exposes specific methods you can find in the documentation:

API, Demo Line Chart
API, Demo Bar Chart
API, Demo Donut Chart
API, Demo Stacked Bar Chart
API, Demo Grouped Bar Chart
API, Demo Bullet Chart
API, Demo Brush Chart
API, Demo Scatter Plot
API, Demo Sparkline Chart
API, Demo Stacked Area Chart
API, Demo Step Chart
API, Demo Mini Tooltip
API, Demo Tooltip
API, Demo Legend

Installation

Britecharts components are distributed in UMD modules and ES modules, each one exposing a D3.js component written with the Reusable API pattern. To use any of the Britecharts modules, you will need to require the chart in your JS file using CommonJS modules, ES modules, or adding a <script> tag with the src pointing to the file or CDN bundle. You would also need to load the d3-selection submodule to select the chart container.

   npm install --save @britecharts/core d3-selection
   # or
   yarn add @britecharts/core d3-selection

Alternatively, you can load Britecharts from our CDN as we do in this demo page or play around in our CodePen demo projects.

Then, in your JavaScript module file you can now import and use charts:

import { bar } from '@britecharts/core';
import { select } from 'd3-selection';

const barChart = bar();
const container = select('#container');

const barData = [
    { name: 'Luminous', value: 2 },
    { name: 'Glittering', value: 5 },
    { name: 'Intense', value: 4 },
    { name: 'Radiant', value: 3 }
];

barChart
    .margin({ left: 100 })
    .isHorizontal(true)
    .height(400)
    .width(600);

container.datum(barData).call(barChart);

Britecharts comes with a basic set of CSS styles that you would load with a <link> tag in your page's <head>.

<link
    rel="stylesheet"
    href="./node_modules/britecharts/dist/css/britecharts.css"
/>*

You can customize CSS using new styles. Check our Styling Britecharts tutorial to get started.

Community Roadmap

This project is in active development. We want your input about what is important, for that, add your votes using the 👍 reaction:

How to Contribute

Whether you're helping us fix bugs, improving the docs, or spreading the word, we'd love to have you as part of the Britecharts community!

To give your feedback, you can open a new issue. You can also find us in the D3.js slack group, in the #tool-britecharts channel. We are looking for contributors and committers, so if you want to become a part of this project, check the contributing guide for ideas on contributing and get started today!

Code of Conduct

Britecharts is dedicated to building a welcoming, diverse, and safe community. We expect everyone participating in the Britecharts community to abide by our Code of Conduct. Please read it and follow it.

Acknowledgments

Sun Dai designs Britecharts, and two books inspired the code, Developing a D3.js Edge and Mastering D3.js. It also leveraged a significant number of examples and articles from the D3.js community overall.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

<table class="contributors-table"> <tr> <td align="center"><a href="http://dalerasrorov.github.io/"><img src="https://avatars2.githubusercontent.com/u/9118852?v=4" width="100px;" alt=""/> Daler Asrorov</a> <a href="https://github.com/britecharts/britecharts/commits?author=DalerAsrorov" title="Code">💻</a> <a href="https://github.com/britecharts/britecharts/commits?author=DalerAsrorov" title="Documentation">📖</a> <a href="#ideas-DalerAsrorov" title="Ideas, Planning, & Feedback">🤔</a> <a href="#maintenance-DalerAsrorov" title="Maintenance">🚧</a> <a href="https://github.com/britecharts/britecharts/pulls?q=is%3Apr+reviewed-by%3ADalerAsrorov" title="Reviewed Pull Requests">👀</a> <a href="https://github.com/britecharts/britecharts/commits?author=DalerAsrorov" title="Tests">⚠️</a></td> <td align="center"><a href="https://github.com/ryanwholey"><img src="https://avatars0.githubusercontent.com/u/8100360?v=4" width="100px;" alt=""/> Ryan Wholey</a> <a href="https://github.com/britecharts/britecharts/commits?author=ryanwholey" title="Code">💻</a> <a href="https://github.com/britecharts/britecharts/commits?author=ryanwholey" title="Documentation">📖</a> <a href="#ideas-ryanwholey" title="Ideas, Planning, & Feedback">🤔</a> <a href="#maintenance-ryanwholey" title="Maintenance">🚧</a> <a href="https://github.com/britecharts/britecharts/pulls?q=is%3Apr+reviewed-by%3Aryanwholey" title="Reviewed Pull Requests">👀</a> <a href="https://github.com/britecharts/britecharts/commits?author=ryanwholey" title="Tests">⚠️</a></td> <td align="center"><a href="https://github.com/jchen85"><img src="https://avatars2.githubusercontent.com/u/14088460?v=4" width="100px;" alt=""/> jchen85</a> <a href="https://github.com/britecharts/britecharts/commits?author=jchen85" title="Code">💻</a> <a href="#ideas-jchen85" title="Ideas, Planning, & Feedback">🤔</a> <a href="#maintenance-jchen85" title="Maintenance">🚧</a> <a href="https://github.com/britecharts/britecharts/pulls?q=is%3Apr+reviewed-by%3Ajchen85" title="Reviewed Pull Requests">👀</a> <a href="https://github.com/britecharts/britecharts/commits?author=jchen85" title="Tests">⚠️</a></td> <td align="center"><a href="https://github.com/ImADrafter"><img src="https://avatars3.githubusercontent.com/u/44379989?v=4" width="100px;" alt=""/> Marcos Gómez</a> <a href="https://github.com/britecharts/britecharts/commits?author=ImADrafter" title="Code">💻</a></td> <td align="center"><a href="https://github.com/ajdani"><img src="https://avatars1.githubusercontent.com/u/16606530?v=4" width="100px;" alt=""/> ajdani</a> <a href="https://github.com/britecharts/britecharts/issues?q=author%3Aajdani" title="Bug reports">🐛</a> <a href="https://github.com/britecharts/britecharts/commits?author=ajdani" title="Code">💻</a> <a href="#maintenance-ajdani" title="Maintenance">🚧</a></td> <td align="center"><a href="https://github.com/shayh"><img src="https://avatars3.githubusercontent.com/u/366321?v=4" width="100px;" alt=""/> shayh</a> <a href="https://github.com/britecharts/britecharts/commits?author=shayh" title="Code">💻</a></td> </tr> </table>

This project follows the all-contributors specification. Contributions of any kind are welcome!

License

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

https://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.