Britecharts, Eventbrite’s D3 based charting library, has grown with additional charts contributed by the community. It is now a mature library, but it still lacks some charts used in today’s standard DataViz suites. We want to add these charts, and that means we will experience some growing pains. We wondered, how we could make that process easier?

Britecharts 2.0 is a breaking release which, among some new accessors and bug fixes, aims to help in the creation of new charts. For that reason, we have improved our API and set up rules to keep it consistent.

API Changes

Naming is hard. Some of us struggle when facing the decision of assigning a name to a method that will be part of a public API – sometimes even for a simple private variable. It is usually a complicated decision. We need to take into account not only what the method is doing, but also how we named the other methods in that module – and in the rest of the library.

We want to make it easy for contributors to help to grow Britecharts, streamlining their decisions and reducing the back-and-forth during code reviews. That’s why we decided to create an API Guidelines document that will make it easy to solve naming discrepancies and keep the library’s API consistent.

To do this, we gathered all the chart’s APIs with some screenshots of our documentation:

Then we analyzed them and came up with a set of rules to create APIs in Britecharts. This is a summary of those rules:

Boolean variables

We want them to be ‘predicates.’ We will prefix them with one of the following words: should, has or is. This rule implies that, for example, we will move from horizontal to isHorizontal or from usePercentage to hasPercentage.

Removing “force”

At some point in the past, we introduced the force prefix, to mark an override in the defaults. The problem with this, is that it wasn’t clear when to use it, so we decided to simplify it by removing all of them. This means that we will move from forceAxisFormat to xAxisFormat or from forceDateRange to dateFormat.

Axis and Tick accessors

We felt we needed more consistency on these variables, so the new rule is to simply add “Ticks” at the end of the variables. Examples are: from numOfHorizontalTicks into xTicks and from verticalTicks to yTicks.

Dispatchers and Custom Events

Instead of using callbacks for our command methods, we are going to capture events. This means that the onBrush callback definition method is transformed into .on(‘customBrushEnd’, callbackFunction), making it consistent with the rest of custom events triggered by other charts.

We have also made the custom events function signature more coherent, hoping to provide a more intuitive interface for our users. In the next release, we will try to make them even more consistent by merging our tooltip and mini-tooltip, making them more visually appealing.

Color Schemas

Britecharts v2 changes the names of the color schemas, moving them into less verbose versions of the same names: from britechartsColorSchema to britecharts; from extendedOrangeColorSchema to orange.

All of this refactoring has introduced breaking changes into the library that we hope our users will be OK within the end. You can find the full list of them in the release notes, which includes a list of changes by chart type.

New Charts and Features

The grouped and stacked bar charts were present during the previous minor releases, and we have finally deemed them ready for production!

In addition, Britecharts v2 added some new accessors contributed by the community —the number format for the Legend chart, shouldReverseColorList for the Bar chart and a custom number formatting option for the main Tooltip.

Bug Fixes

In this release, we normalized the chart names between the britecharts bundle and the individual UMD packages. We also updated our ESLint configuration, added tests and polished the stacked and grouped bar charts and amended a rounding error in the tooltip component.

Documentation

On the doc side, we created the Code Styleguide document that includes the API Guidelines. We will update it with more code writing guidelines soon. Also, we updated and added a license badge to the main page, as well as the Contributing Guide, which needed a bit of love.

Summing-up

After this second major release, we feel Britecharts are now better prepared to succeed. We provided steps to streamline the contribution workflow and make it easy to grow and support more charts, lowering the entry barrier for new contributors and improving their developer experience.

We are super excited about what lies down the road, with a new React wrapper with a set of new features like:

• New charts: Scatter plot, Heatmap, bullet charts and more!
• More interactivity with charts
• Improved tooltips

Lastly, we want to thank all the contributors that made this possible: Ryan Wholey, Sun Dai, Martin Manzo, Harris Reynolds, Nikky St Onge, Per Borgen, Aurelio and Bung.