Hacker News Reader

Comment by untilHellbanned | Hacker News Reader

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.

View on HN

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/

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

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?

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.

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.

I use D3 for all kinds of non SVG DOM work.

I am interested on that, do you have some snippets or examples of it?

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 ;)

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!

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.

Reply on news.ycombinator.com