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?
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.
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:
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".
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.
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.
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).
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 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".
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.
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:
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.
> 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.
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!
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 ?
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!
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.
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);
>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.
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 ;)
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.
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?
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?
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!
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?
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.
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?
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.
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.
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).
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/
[1] https://vega.github.io/