Britecharts: D3.js based charting library of components(eventbrite.github.io)
eventbrite.github.io
Britecharts: D3.js based charting library of components
http://eventbrite.github.io/britecharts/
86 comments
The declarative markup is interesting for custom datasets. But without some sort of UI builder it's unusable by clients.
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?
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?
Have you looked at ECharts? https://ecomfe.github.io/echarts-examples/public/index.html#...
Exactly this, thanks!
How does this compare to highcharts? Both use a JSON configuration to generate charts.
https://www.highcharts.com/
https://www.highcharts.com/
Highcharts requires a paid license.
Wow, this is great. Thanks for sharing the link.
How does this compare to nvd3 etc?
Very different, nvd3 and pretty much all charting libraries are built around the idea of charting templates. What Vega (and its simplified cousin Vega-lite) provide is a grammar for describing the mapping between the data space and the visual space.
What this essentially means is that you are able to build your own visualisations. If you for instance check this sample[1], and in the JSON editor, inside the "encoding" section you swap x with y, and y with x, then click on the parse button, the chart will be redrawn with the x and y axis flipped.
[1] https://vega.github.io/new-editor/?mode=vega-lite&spec=bar_a...
What this essentially means is that you are able to build your own visualisations. If you for instance check this sample[1], and in the JSON editor, inside the "encoding" section you swap x with y, and y with x, then click on the parse button, the chart will be redrawn with the x and y axis flipped.
[1] https://vega.github.io/new-editor/?mode=vega-lite&spec=bar_a...
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...
There is some more sample code and charts in the introductory blog post at https://www.eventbrite.com/engineering/introducing-britechar...
Genuinely curious-- why did they decide to create yet another charting library?
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...
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...
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".
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".
you should check out 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
disclaimer: I'm the founder of plotdb.com
The article mentions only d3 in comparison, what does Britecharts have that the ones you mention don't?
UPDATE: Ah, it's (somewhat) in a third post: https://www.eventbrite.com/engineering/introducing-britechar...
UPDATE: Ah, it's (somewhat) in a third post: https://www.eventbrite.com/engineering/introducing-britechar...
How does this compare to http://c3js.org/, also a reusable charting library using D3.js?
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.
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.
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.
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.
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.
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.
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.
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
Edit: actually every demo keeps restating itself when I scroll up and down on iPhone
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!
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!
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
I'm an author of a JS charting library myself, so here is something I'm proud of - https://worldoscope.cxjs.io/8nhpbo6
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".
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".
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
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
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
Thanks for the reply. I guess that would be dashboard use.
As a Steam player myself, how can I see my own stats? I tried searching by my username, but couldn't find it...
As a Steam player myself, how can I see my own stats? I tried searching by my username, but couldn't find it...
It'll only track your stats if you're signed up, so hit the log in button! Steam doesn't provide any history data (either they don't collect it or they don't share it) so I have to manually request the profile of each user I'm tracking from their API.
relevant logging code: https://github.com/veggiedefender/steamlog/blob/master/steam...
relevant logging code: https://github.com/veggiedefender/steamlog/blob/master/steam...
> 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/
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/
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!
Sure, it's written on the About page. It's CxJS - https://cxjs.io/.
Your stuff looks very nice.
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.
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/
[1] - http://c3js.org/ [2] - http://www.chartjs.org/
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..
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..
Quite a coincidence but we just made a live Gantt chart with a raw d3+canvas and websockets in production, works quite well.
Nice! This one 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?
Can you explain what you mean by D3 + canvas? A secondary view?
Hi forvelin,
Britecharts use case would be essentially the same. If you need a simple chart, you can use one of them out of the box. Although if you know a bit about D3, you could easily fork the chart and customize it to your needs, making use of our Demo page as a sandboxed test space and our current test suite for keeping the quality of your chart high!
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.
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.
[deleted]
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:
> 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);>D3.js is quite low-level library, it's basically a wrapper around SVG with some sugar like animations and enter/exit/update.
While D3 is low level, it's in no way just a "wrapper around SVG with some sugar thrown in".
Besides the tons and tons of helpers for scales, mapping, projections, calculations and all that jazz (including the animation stuff with enter/exit etc which you did mention), it's also a whole functional concept on top of the drawing primitives.
One could theoretically even remove SVG and add another rendering backend with D3 with the same top level primitives.
While D3 is low level, it's in no way just a "wrapper around SVG with some sugar thrown in".
Besides the tons and tons of helpers for scales, mapping, projections, calculations and all that jazz (including the animation stuff with enter/exit etc which you did mention), it's also a whole functional concept on top of the drawing primitives.
One could theoretically even remove SVG and add another rendering backend with D3 with the same top level primitives.
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.
Low level? D3 has some of the most jargony docs I've ever read for a JavaScript library. Not to mention the steep learning curve to make anything of value using available data, that is, if the data is formatted correctly.
And don't even get me started on trying to make D3 charts responsive ;)
And don't even get me started on trying to make D3 charts responsive ;)
What meaning of low level are you objecting to?
You have to work with the DOM + JS at fairly low abstraction level in order to get an output out of D3. It is be definition reusable.
It is extremely powerful though!
You have to work with the DOM + JS at fairly low abstraction level in order to get an output out of D3. It is be definition reusable.
It is extremely powerful though!
That's interesting, I've run across the "make the chart responsive" request before. My impression, after beating responsiveness into the code with a sledgehammer, is that it's really not meant for that. You can, but why?
And, on most screens - even smartphones - they don't need to be responsive at ordinary dimensions.
Usually, the request seems to indicate a fundamental lack of understanding of how D3 is meant to be used, or design/page layout flaws that get dumped on the chart code.
And, on most screens - even smartphones - they don't need to be responsive at ordinary dimensions.
Usually, the request seems to indicate a fundamental lack of understanding of how D3 is meant to be used, or design/page layout flaws that get dumped on the chart code.
Recommendation: put several examples of charts on the front page.
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?
Multiple links to demos are easily accessible from the linked page. Better than most submissions.
I felt the same way. The examples are accessible, but a better overview would be helpful.
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?
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?
[deleted]
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.
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!
Someone else linked Sucrose, which has a tree chart. Looks like the expand/collapse nodes isn't working though.
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?
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
In that link you can find some references about accessibility on other libraries and best practices.
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
In that link you can find some references about accessibility on other libraries and best practices.
[deleted]
[deleted]
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?
And also we can extend it to support say drilldown charts?
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...), 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!
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...), 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!
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.
Thanks a lot!! :)
Awesome! Do you have an simple one page example where you're pulling the lib from a CDN?
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!
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.
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.
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).
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).
[deleted]
Another viable addition to https://github.com/fasouto/awesome-dataviz#charting-librarie...
Oh nice, finally a D3.js based charting library of reusable components!
Well technically http://recharts.org was there first :)
Actually, Britecharts is some months older than recharts ;)
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.
It's a wrapper around both D3.js and crossfilter.js and makes building linked interactive charts / dashboards really easy.
DC.js is amazing. I am not sure if it will get d3v4ed any time soon though.
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) as a charting library: https://www.webcomponents.org/element/PolymerEl/multi-verse
Can this be used in React Native apps?
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/
I read Breitbart at first.
[1] https://vega.github.io/