
Britecharts: D3.js based charting library of components - petercooper
http://eventbrite.github.io/britecharts/
======
asabil
Slightly off topic, but after discovering Vega[1], I can't quite imagine using
a template based charting library again.

[1] [https://vega.github.io/](https://vega.github.io/)

~~~
mholmes680
Oh wow, thanks for this!

Side note: Anyone know why "calendars" don't qualify as part of these
packages? I just have a series of data and want to render it on a calendar-
graph instead of some typical data rendering... too abstract?

~~~
lucisferre
Have you looked at ECharts? [https://ecomfe.github.io/echarts-
examples/public/index.html#...](https://ecomfe.github.io/echarts-
examples/public/index.html#chart-type-calendar)

~~~
mholmes680
Exactly this, thanks!

------
sciurus
It's cool to see my coworkers' efforts on the front page!

There is some more sample code and charts in the introductory blog post at
[https://www.eventbrite.com/engineering/introducing-
britechar...](https://www.eventbrite.com/engineering/introducing-britecharts/)

~~~
Dowwie
Genuinely curious-- why did they decide to create yet another charting
library?

~~~
rwholey
Britecharts was conceived a bit over two years ago. We needed something that
was fully tested with the flexibility to freely customize the look and feel.
There were (and still are!) plenty of great libraries out there nvd3, c3,
highcharts, etc. but nothing that quite fit the bill for what we needed at
Eventbrite at the time. So we rolled our own and rather than keep it to
ourselves, we decided to share it with the community!

My colleague posted a followup to a question on a blog post he wrote that goes
into more detail about this topic if you're interested:

[https://www.eventbrite.com/engineering/introducing-
britechar...](https://www.eventbrite.com/engineering/introducing-britecharts/)

~~~
andybak
I hit this a couple of years ago and hoped things had improved.

d3 was too low-level for my tastes (There are two types of programmers -
builders and disassemblers. I'm the latter in that I like to start with
something working and figure out how to take it apart).

I toyed with Vega, nv3d, Bokeh and they all had great things going for them
but nothing felt like it had nailed "making the easy things easy, and the hard
things possible".

~~~
zbryikt
you should check out [https://plotdb.com](https://plotdb.com) it abstracts
simple things into GUI yet still gives you the power to modify source code to
do the hard things.

disclaimer: I'm the founder of plotdb.com

------
welder
How does this compare to [http://c3js.org/](http://c3js.org/), also a reusable
charting library using D3.js?

~~~
Golodhros
That's a great question, and we are preparing a write-up talking about the D3
libraries ecosystem at this moment. There is certainly a good amount of D3
libraries out there, and it could be frustrating to do some research on so
many!

Specifically, stacked against C3, Britecharts has a more 'D3-like' API, while
C3 is a lot more declarative. This means that on C3, we will render charts by
passing large configuration objects, while in Britecharts we strive to use a
different API, chaining settings like we do on D3.

Also, C3 hasn't been updated to D3 v4, and we can say it is an inactive
project.

------
usaphp
When I scroll on iPhone on this page:
[https://eventbrite.github.io/britecharts/tutorial-
donut.html](https://eventbrite.github.io/britecharts/tutorial-donut.html) the
chart keeps redrawing itself.

Edit: actually every demo keeps restating itself when I scroll up and down on
iPhone

~~~
amingilani
Same on Nexus 6P Android 7.1.2 Chrome

~~~
Golodhros
It should be fixed!

------
mstijak
Slightly off topic, but I'm curious what is the common use of JS charting
libraries these days? Is it for making dashboards with simple graphs or
complex data visualizations?

I'm an author of a JS charting library myself, so here is something I'm proud
of -
[https://worldoscope.cxjs.io/8nhpbo6](https://worldoscope.cxjs.io/8nhpbo6)

~~~
bigger_cheese
I messed around with Javascript based charting libraries a few years ago
because I wanted to trend some instrument data at our industrial plant.
Something we could leave alone on a dedicated screen in a control room and it
would continuously update in real time as the instrument supplied data.

I decided I'd use Javascript for it because I thought it would be simple and
have very few dependencies (ideally only a web browser required). Normally
we'd use commercial packages. The vendors of our control system software
supplied a Microsoft Sharepoint plugin that could do live trending straight
out of control system. But required an adobe SVG viewer plugin to be installed
on the computer. There were some issues with deploying (needed specific
versions of browser etc would have been a nightmare to update absolutely
everything. The plant IS people were extremely conservative insisted on LTS
versions of everything did not like upgrading software, especially not in
somewhere like a control room). So I thought I'd skirt around the issue by
using Javascript.

My only other experience writing trending packages was using a very ancient
library called "SL-GMS" we used this software to write in house operator
guidance screens. It is C++ based but very powerful I didn't want to write a
full c++ program just to trend something.

At the time I found the project utterly infuriating. Not so much the trending
packages although I hit issues with a few a lot of them used sVG as well :(

The javascript language around the trending package was where I found most
issues. Esecpially trying to interface with the data. It was a really really
frustrating language to program in.

It was my first time trying to write javascript and I got bitten by absolutely
every bug you could think of. So I was probably a bit naive thinking
Javascript would be "simple".

~~~
pwang
Have you checked out Bokeh? It's a Python and R library, but it's exactly
designed for the kind of "industrial / engineering data visualization", and it
doesn't require you to do a whole pile of Javascript.

[http://bokeh.pydata.org](http://bokeh.pydata.org)

------
untilHellbanned
Very grateful for the open source solution. D3.js itself seems "reusable". Can
you maybe explain the benefits of this another way and/or in greater detail?
Is the most apparent benefit less lines of code? I'm not familiar as to why
transpiling with Babel would be a selling point.

~~~
forvelin
I think it is like C3.js [1] or Chart.js [2], just yet another layer of
abstraction. If you don't want to do something extra-special, just a simple
bar chart or so, those two were my go-to libraries. I wonder what does this
one offer ?

[1] - [http://c3js.org/](http://c3js.org/) [2] -
[http://www.chartjs.org/](http://www.chartjs.org/)

~~~
swah
IIRC Chart.js is canvas based, and D3.js SVG based.

What would you use for a very custom chart (something like a Gantt, say) ? D3
or something like snapsvg.io ?

I used to like Raphael a few years ago..

~~~
forvelin
Quite a coincidence but we just made a live Gantt chart with a raw d3+canvas
and websockets in production, works quite well.

~~~
swah
Nice! This one
[https://frappe.github.io/gantt/](https://frappe.github.io/gantt/) looks good
but simple, and D3 is probably better for doing customizations.

Can you explain what you mean by D3 + canvas? A secondary view?

------
jacobolus
Recommendation: put several examples of charts on the front page.

~~~
cessor
I felt the same way. The examples are accessible, but a better overview would
be helpful.

~~~
Golodhros
Hi Cessor, thanks for the feedback!

We are super interested to know what we can do better on our docs, any
feedback would be great!

What do you find is missing on the examples? Would you like more info about
when to use each chart? Or more examples of the different configuration
options?

------
saltysalty
What about trees? I think none of the wrappers around d3.js support trees.
That's one area you guys could improve and differentiate from others.

~~~
Golodhros
Hi Saltysalty, Thanks for the feedback! Totally, we want trees too!! Recently
we saw an application for them in our product, so we will be pushing to
include this chart on Britecharts soon!

------
mgkimsal
What's the accessibility story with this? And, while we're at it, what's the
accessibility story for other charting tools? Are there good open source
charting tools that can be used in section 508 situations?

~~~
Golodhros
Hi Mgkimsal,

That's a great question! We at Eventbrite are looking into improving our
accessibility, our designer Sun is pushing for it on this issue:
[https://github.com/eventbrite/britecharts/issues/168](https://github.com/eventbrite/britecharts/issues/168)

In that link you can find some references about accessibility on other
libraries and best practices.

~~~
mgkimsal
thanks. accessibility has been an increasing theme of several projects over
the last 2-3 years, and it's now something I know some of my clients want to
have answers for before we commit to certain components.

~~~
Golodhros
Makes sense! It's also good to know that this feature is such important!

------
antoaravinth
We are currently writing a BI report module and want to use any open source
library for creating charts. This looks really nice. But I want to understand
whether we could able to extend it to create say custom chart? Is that
possible?

And also we can extend it to support say drilldown charts?

~~~
Golodhros
Hi antoaravinth, thanks for the question!

Totally! You could fork the library and modify the charts if that's what you
need. The source code is based on the reusable API
([https://www.eventbrite.com/engineering/leveling-up-d3-the-
re...](https://www.eventbrite.com/engineering/leveling-up-d3-the-reusable-
chart-api/)), and it should be easy for D3 developers to understand the code
and extend it. Our development environment also provides with the demo pages
that can be used as a sandboxed context, and you can make use of our current
tests to keep the code well tested!

Regarding the drill down charts, in theory, is possible!

------
yllus
This is terrific work - like many others I found myself needing to use
Chart.js or some other abstraction layer on top of D3 in order to get
anywhere. Britecharts seems to have everything its competitors does, but also
looks utterly fantastic from a visual point of view. Well done guys and gals.

~~~
Golodhros
Thanks a lot!! :)

------
mrborgen
Awesome! Do you have an simple one page example where you're pulling the lib
from a CDN?

~~~
Golodhros
It's coming! We have an issue with our webpack configuration and the way we
create the 'whole' bundle, but it will be ready soon!

~~~
metafunctor
I spent a few moments trying to use this as a standalone JS library for
showing a simple chart, but couldn't make it work. I cannot see anything
useful being exported from dist/bundled/britecharts.min.js.

I'd prefer to simply load d3.js, then britecharts.js on top of that, and be on
my way. This is how metricsgraphics.js worked, and it was super simple to take
into use.

~~~
Golodhros
Hi Metafunctor, thanks for checking out Britecharts!

I am sorry that you just find our current bug with the build! We have an issue
about that, and we will be trying to fix it ASAP. I totally understand, having
all the charts available in one file is an important use case.

In the meanwhile, you can use the individual chart bundles, like
'/dist/umd/bar.min.js' and either load it with require/commonJS or load it
with a script tag (it would be assigned to document.britecharts.bar).

------
Dowwie
Another viable addition to [https://github.com/fasouto/awesome-
dataviz#charting-librarie...](https://github.com/fasouto/awesome-
dataviz#charting-libraries)

------
aw3c2
Oh nice, finally a D3.js based charting library of reusable components!

~~~
caccialdo
Well technically [http://recharts.org](http://recharts.org) was there first :)

~~~
Golodhros
Actually, Britecharts is some months older than recharts ;)

------
markovbling
I've had a great time using DC.js - highly recommended...

It's a wrapper around both D3.js and crossfilter.js and makes building linked
interactive charts / dashboards really easy.

~~~
myrryr
DC.js is amazing. I am not sure if it will get d3v4ed any time soon though.

~~~
krikou
Humbly tried a polymer/webcomponents approach for composing similar
vizualisation than dc.js. it uses d3v4 and multi-chart
([https://www.webcomponents.org/element/PolymerEl/multi-
chart](https://www.webcomponents.org/element/PolymerEl/multi-chart)) as a
charting library: [https://www.webcomponents.org/element/PolymerEl/multi-
verse](https://www.webcomponents.org/element/PolymerEl/multi-verse)

------
magsafe
Can this be used in React Native apps?

~~~
Golodhros
Hi Magsafe, Sadly not, and we don't have a mid-term plan to do it. From my
research, the only charting library that supports React Native at the moment
is Victoryjs: [https://formidable.com/open-
source/victory/](https://formidable.com/open-source/victory/)

------
skocznymroczny
I read Breitbart at first.

