9 ms·

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 t

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 9y ago
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 9y ago
  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 9y ago
    Quite a coincidence but we just made a live Gantt chart with a raw d3+canvas and websockets in production, works quite well.
    - swah 9y ago
      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?
- Golodhros 9y ago
  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!
jordache 9y ago
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.
- catacombs 9y ago
  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 ;)
  - jordache 9y ago
    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!
  - zebraflask 9y ago
    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.
ar15saveslives 9y ago
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);
- coldtea 9y ago
  >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.
  - myrryr 9y ago
    I use D3 for all kinds of non SVG DOM work.
    - Golodhros 9y ago
      I am interested on that, do you have some snippets or examples of it?
Golodhros 9y ago
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.
- deleted 9y ago
  [deleted]

forvelin 9y ago

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 9y ago
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 9y ago
  Quite a coincidence but we just made a live Gantt chart with a raw d3+canvas and websockets in production, works quite well.
  - swah 9y ago
    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?
Golodhros 9y ago
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!

jordache 9y ago

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.

catacombs 9y ago
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 ;)
- jordache 9y ago
  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!
- zebraflask 9y ago
  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.

ar15saveslives 9y ago

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

coldtea 9y ago
>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.
- myrryr 9y ago
  I use D3 for all kinds of non SVG DOM work.
  - Golodhros 9y ago
    I am interested on that, do you have some snippets or examples of it?

Golodhros 9y ago

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.

deleted 9y ago
[deleted]