Britecharts: D3.js based charting library of components

[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/

[tenken]

The declarative markup is interesting for custom datasets. But without some sort of UI builder it's unusable by clients.

[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?

[capkutay]

How does this compare to highcharts? Both use a JSON configuration to generate charts.

https://www.highcharts.com/

[earlyriser]

Wow, this is great. Thanks for sharing the link.

[EGreg]

How does this compare to nvd3 etc?

[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...

[Dowwie]

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

[welder]

How does this compare to 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.

[verbify]

There's also NVD3 - http://nvd3.org/ - https://github.com/novus/nvd3. And there's a product based off NVD3 called sucrose - http://sucrose.io/ and https://github.com/sugarcrm/sucrose.

[mshenfield]

The blog post introducing Britecharts has a good discussion of the difference between it and other reusable charting options: https://www.eventbrite.com/engineering/introducing-britechar....

One other big difference is that Britecharts is compatible with the latest version of D3. D3 V4 underwent a major refactor to increase modularity. NVD3 is actively looking for volunteers to help them get there though - https://github.com/novus/nvd3#do-we-support-d3-v4x.

Disclaimer: I work with the folks who develop Britecharts.

[mparr4]

c3 is decent, but it is no longer maintained and with 675 issues and counting, it's the wrong choice for any new project.

We've had it in production for a couple of years now. The best thing about it was it got us off the ground quickly but at this point I think we've likely sunk more hours into debugging issues and hacking features than it would have cost us to have built it with d3.

[usaphp]

When I scroll on iPhone on this page: 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

[Golodhros]

Hi usaphp,

Thanks for the bug report! I will create a ticket for it and check it out soon.

From what you said, it seems scrolling is triggering a viewport resize, so we will review our viewport resize listener on the demos (it's not really inside Britecharts).

Thanks again!

[amingilani]

Same on Nexus 6P Android 7.1.2 Chrome

[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

[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".

[eat_veggies]

I'm building a web app for tracking your steam gaming habits. I don't really play games anymore so my profile is boringly empty but here's a page for a guy I know who plays a lot:

http://162.243.163.202/profiles/76561198074712603

I'm using chart.js but since I only have two charts so far I'm free to change my charting library. Maybe even to OP's Britecharts or your library.

Here's the source btw: https://github.com/veggiedefender/steamlog

[mparr4]

> what is the common use of JS charting libraries these days?

For my day job I maintain a web analytics dashboard for car dealerships. We use c3js with React, and aren't crazy about it. Actively looking for a replacement.

Outside of work I use d3 for more interesting stuff: http://www.matthewparrilla.com/mansfield-stake/

[shroom]

Hey! Nice page i Love your table solution. Havn't tried it on desktop but it works grest in mobile and scrolling is fast. Care to share it or spread some light om what solution you're using? Thanks!

[91bananas]

Your stuff looks very nice.

[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/ [2] - http://www.chartjs.org/

[Golodhros]

Hi UntilHellBanned,

Thanks, we are super excited about releasing this project as Open Source, it's been such a trip!

Totally, D3.js is a fantastic low-level library and is super reusable in all senses (examples, low-level plugins, different reusability patterns). However, one of D3.js usability problems comes from its main advantage, how powerful it is!

This means that D3 has a very low-level granularity and a huge API, making it hard for newcomers to create a simple chart for a dashboard or a one-off data viz.

That's one of the reasons why we created Britecharts, to democratize D3.js charts, and at the same time, serve as a stepping stone to those who want to learn more about D3.

In our mind, using Britecharts, a junior developer could render a chart quickly, just doing d3 selections. Then, she can start tinkering with one of the charts and even create a new one, learning d3.js in the process.

[ar15saveslives]

D3.js is quite low-level library, it's basically a wrapper around SVG with some sugar like animations and enter/exit/update.

> Is the most apparent benefit less lines of code?

Yes! With "reusable components" you don't need to write (or copypaste) a line chart over and over.

From their demos:

    brushChart
        .width(containerWidth)
        .height(300)
        .onBrush(function(brushExtent) {
        // Do something with the brushExtent
        });

    brushContainer.datum(dataset).call(brushChart);

[jordache]

d3.js is a very low level api. Out of the box, it is not re-usable at the level of this and other charting libraries like c3 or highcharts.

[jacobolus]

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

[maccard]

https://eventbrite.github.io/britecharts/tutorial-kitchen-si...

[Golodhros]

Thanks for the feedback Jacobolus! We will try to sneak something there soon! In your case, you would want it to see the 'looks' of the charts, or you would also want them to be editable?

[vuldin]

Multiple links to demos are easily accessible from the linked page. Better than most submissions.

[cessor]

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

[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!

[gasbag]

Someone else linked Sucrose, which has a tree chart. Looks like the expand/collapse nodes isn't working though.

[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?

[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?

[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?

[Dowwie]

Another viable addition to https://github.com/fasouto/awesome-dataviz#charting-librarie...

[aw3c2]

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

[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.

[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/

[skocznymroczny]

I read Breitbart at first.