4 ms·

I worked on a project that required some pretty standard line charts, but with the addition of an overlaid set of horizontal "benchmark" lines -- and some callo

by mhale 8y ago

I worked on a project that required some pretty standard line charts, but with the addition of an overlaid set of horizontal "benchmark" lines -- and some callouts. After struggling (and failing) to get what we wanted out of two different off-the-shelf graphing libraries (one of which was built on top of D3), we finally bit the bullet and just built the charts we wanted in D3 "from scratch". Once I wrapped my head around the model, it was such a pleasant experience. D3 is soooo nice and well thought out. You mayneed to level up in SVG, but it is so freeing to be able to bind data and display it basically any way you want. In hindsight, I wish we started with D3 from the beginning and I would not hesitate to pick it up for even simple charts again. It really is worth climbing the learning curve, which isn't as big and scary as it appears at first sight.

EarthIsHome 8y ago
How do you recommend leveling up in SVG?
- kjeetgill 8y ago
  Thank this example: https://bl.ocks.org/mbostock/e3f4376d54e02d5d43ae32a7cf0e6aa9 https://bl.ocks.org/mbostock/e3f4376d54e02d5d43ae32a7cf0e6aa... ... svg.insert("g", "g") .attr("fill", "none") .attr("stroke", "steelblue") .attr("stroke-linejoin", "round") .selectAll("path") ... You might assume that g, fill, or stroke might be d3 terminology but it's really SVG! A quick Google of "svg g" will get you to https://developer.mozilla.org/en-US/docs/Web/SVG/Element/g https://developer.mozilla.org/en-US/docs/Web/SVG/Element/g It blew my mind open, hope to share the same.
  - staticautomatic 8y ago
    To my untrained eye that looks like css had a baby with js and the baby is an svg.
    - klodolph 8y ago
      SVG is tied closely to CSS, so you can go in your CSS and create a style for your D3 graphs and do things like: .chartline { stroke-width: 3px; color: red; } D3 has some convenience functions in JS for creating SVG, but you don't have to use them, you could write SVG just like HTML, it will look more like this in the DOM: <g fill="none" stroke="steelblue" stroke-linejoin="round"> ... </g>
- tmcw 8y ago
  Gratuitous self-link, but I wrote this article about the SVG basics, what's useful to learn, and how it's different from HTML: https://macwright.org/2013/06/25/just-enough-svg.html https://macwright.org/2013/06/25/just-enough-svg.html
amelius 8y ago
How much extra work would it have been, percentage-wise, to write the whole thing from scratch? What features did D3 give you for free?
- teachrdan 8y ago
  Not OP, but a someone who uses D3 every day, it gives you (almost) total freedom. You can decide where to put your x and y axes, legends, labels, etc. You can decide how data determines not just how something appears on the screen (like a bar chart of y height) but how the underlying data determines its classes and styling, etc. D3 is awe-inspiring in its scope, and learning to use it has a steep learning curve. But for anything beyond trivial use cases the freedom it affords you is worth the effort.
  - shostack 8y ago
    Any beginner resources you'd recommend for someone looking to get started with D3 and beginner coding experience?
    - jacobolus 8y ago
      Go to https://beta.observablehq.com https://beta.observablehq.com and dive in: just start forking other people’s examples and fiddling and looking up stuff in the docs or asking for help whenever you get stuck.
  - bulldoa 8y ago
    do you have any recommendation on resources on d3 for beginners? Personally I find d3.js very challenging, there is tons of example out there and simple tutorials, but I don't think there are tutorials that bridge those harder examples for beginners.
    - BigJono 8y ago
      The documentation. https://github.com/d3/d3/wiki/Tutorials https://github.com/d3/d3/wiki/Tutorials
mthmohan 8y ago
Would it possible at all for you to write up how you did that? Would help me and perhaps a lot of others as well.
ryan-allen 8y ago
I had a similar experience, off the shelf didn't do what the customer wanted, so I delved into D3, which to be fair has the strangest API on first glance. After learning how it works, and more importantly why, it's more obvious why it's useful. It's a chart building toolkit, not a chart builder, and you can dream up all sorts of interesting things with it. The upside is that the author has a huge library of examples you can build from [0]. It's a great tool! [0] https://github.com/d3/d3/wiki/gallery https://github.com/d3/d3/wiki/gallery
kodablah 8y ago
I had a project with the same requirements and settled on echarts[0] (version 2 at the time, now on 4). Its adoption was, at that time, very diminished due to everything being in Chinese. Its base graphics library, zrender[1], still suffers this issue. Were it to become more introduced to westerners, it could take the place of d3 for many of these use cases since its API is much easier to grok. Granted it's all canvas, but most uses don't care how it's rendered. Edit: well, browsing zrender's source, I see svg logic too 0 - https://github.com/apache/incubator-echarts https://github.com/apache/incubator-echarts 1 - https://github.com/ecomfe/zrender https://github.com/ecomfe/zrender
bpicolo 8y ago
I find that Google Charts is great when I need simple charts: https://developers.google.com/chart/ https://developers.google.com/chart/ High quality, very good browser support, good docs, and well-maintained. There are wrappers out there for React/Vue/whatever too
jordache 8y ago
what you described is an outlier. For the vast majority of data visualizations that are of the standard type, d3 is a not a scalable way to do it. The lack of high level abstractions means developers can't be as productive can be, and the code base implemented for one svg visualization is likely not usable for another, unless you put abstraction wrappers around it, which is basically nvd3, or other d3 wrapper libraries..
- _coveredInBees 8y ago
  Yeah, but then you just end up making another charting library which is less flexible and limited by the constraints forced by your abstractions. There is a fundamental reason why D3 has remained relevant for so long in an ever-changing JS/Web landscape. If you want reusability, build your abstractions or use a charting library, but recognize that this will in-turn limit the flexibility of your reusable code. You can't have your cake and eat it too. It's the very reason why D3 is still so relevant today.
  - jordache 8y ago
    you basically re-iterated what I said... the d3 wrapper libraries are likely sufficient for 85% of the use cases out there. For the others, you either do everything in D3, or you extend those wrapper libraries to give you what you need.
    - _coveredInBees 8y ago
      Not exactly. "Extend those wrapper libraries" is not at all trivial or easy because when the wrapper library / charting library creates abstractions, it also places some limitations on the overall customizability. So when the wrapper or charting lib isn't cutting it, trying to shoe-horn the feature you need is not always easy and usually involves ugly hacks that reduce the overall simplicity of the code if you had just rolled your own D3 implementation from scratch.
      - jordache 8y ago
_coveredInBees 8y ago
I could not agree more with you. So many folks here seem to be missing the actual utility of D3 and why it still remains relevant and useful in todays JS/Web landscape. If you need standard stuff, there are plenty of awesome plotting libraries that utilize D3 on the back-end while abstracting the complexity away from you. Some even try to give you some amount of flexibility and composability to customize them, but they are always going to have limitations compared to the raw power and flexibility you have if you roll your own D3 visualization. You can't have it both ways, and that's something a lot of people don't seem to understand. If you're absolutely sure that a visualization library can support all your requirements, then it is absolutely the easier way to go about doing things. But you just have to be really sure that your requirements aren't going to change past the limitations of the visualization library of choice.

by mhale 8y ago

EarthIsHome 8y ago

How do you recommend leveling up in SVG?

kjeetgill 8y ago
Thank this example: https://bl.ocks.org/mbostock/e3f4376d54e02d5d43ae32a7cf0e6aa9 https://bl.ocks.org/mbostock/e3f4376d54e02d5d43ae32a7cf0e6aa... ... svg.insert("g", "g") .attr("fill", "none") .attr("stroke", "steelblue") .attr("stroke-linejoin", "round") .selectAll("path") ... You might assume that g, fill, or stroke might be d3 terminology but it's really SVG! A quick Google of "svg g" will get you to https://developer.mozilla.org/en-US/docs/Web/SVG/Element/g https://developer.mozilla.org/en-US/docs/Web/SVG/Element/g It blew my mind open, hope to share the same.
- staticautomatic 8y ago
  To my untrained eye that looks like css had a baby with js and the baby is an svg.
  - klodolph 8y ago
    SVG is tied closely to CSS, so you can go in your CSS and create a style for your D3 graphs and do things like: .chartline { stroke-width: 3px; color: red; } D3 has some convenience functions in JS for creating SVG, but you don't have to use them, you could write SVG just like HTML, it will look more like this in the DOM: <g fill="none" stroke="steelblue" stroke-linejoin="round"> ... </g>
tmcw 8y ago
Gratuitous self-link, but I wrote this article about the SVG basics, what's useful to learn, and how it's different from HTML: https://macwright.org/2013/06/25/just-enough-svg.html https://macwright.org/2013/06/25/just-enough-svg.html

amelius 8y ago

How much extra work would it have been, percentage-wise, to write the whole thing from scratch? What features did D3 give you for free?

teachrdan 8y ago
Not OP, but a someone who uses D3 every day, it gives you (almost) total freedom. You can decide where to put your x and y axes, legends, labels, etc. You can decide how data determines not just how something appears on the screen (like a bar chart of y height) but how the underlying data determines its classes and styling, etc. D3 is awe-inspiring in its scope, and learning to use it has a steep learning curve. But for anything beyond trivial use cases the freedom it affords you is worth the effort.
- shostack 8y ago
  Any beginner resources you'd recommend for someone looking to get started with D3 and beginner coding experience?
  - jacobolus 8y ago
    Go to https://beta.observablehq.com https://beta.observablehq.com and dive in: just start forking other people’s examples and fiddling and looking up stuff in the docs or asking for help whenever you get stuck.
- bulldoa 8y ago
  do you have any recommendation on resources on d3 for beginners? Personally I find d3.js very challenging, there is tons of example out there and simple tutorials, but I don't think there are tutorials that bridge those harder examples for beginners.
  - BigJono 8y ago
    The documentation. https://github.com/d3/d3/wiki/Tutorials https://github.com/d3/d3/wiki/Tutorials

mthmohan 8y ago

Would it possible at all for you to write up how you did that? Would help me and perhaps a lot of others as well.

ryan-allen 8y ago

I had a similar experience, off the shelf didn't do what the customer wanted, so I delved into D3, which to be fair has the strangest API on first glance. After learning how it works, and more importantly why, it's more obvious why it's useful. It's a chart building toolkit, not a chart builder, and you can dream up all sorts of interesting things with it. The upside is that the author has a huge library of examples you can build from [0]. It's a great tool! [0] https://github.com/d3/d3/wiki/gallery https://github.com/d3/d3/wiki/gallery

kodablah 8y ago

I had a project with the same requirements and settled on echarts[0] (version 2 at the time, now on 4). Its adoption was, at that time, very diminished due to everything being in Chinese. Its base graphics library, zrender[1], still suffers this issue. Were it to become more introduced to westerners, it could take the place of d3 for many of these use cases since its API is much easier to grok. Granted it's all canvas, but most uses don't care how it's rendered. Edit: well, browsing zrender's source, I see svg logic too 0 - https://github.com/apache/incubator-echarts https://github.com/apache/incubator-echarts 1 - https://github.com/ecomfe/zrender https://github.com/ecomfe/zrender

bpicolo 8y ago

I find that Google Charts is great when I need simple charts: https://developers.google.com/chart/ https://developers.google.com/chart/ High quality, very good browser support, good docs, and well-maintained. There are wrappers out there for React/Vue/whatever too

jordache 8y ago

what you described is an outlier. For the vast majority of data visualizations that are of the standard type, d3 is a not a scalable way to do it. The lack of high level abstractions means developers can't be as productive can be, and the code base implemented for one svg visualization is likely not usable for another, unless you put abstraction wrappers around it, which is basically nvd3, or other d3 wrapper libraries..

_coveredInBees 8y ago
Yeah, but then you just end up making another charting library which is less flexible and limited by the constraints forced by your abstractions. There is a fundamental reason why D3 has remained relevant for so long in an ever-changing JS/Web landscape. If you want reusability, build your abstractions or use a charting library, but recognize that this will in-turn limit the flexibility of your reusable code. You can't have your cake and eat it too. It's the very reason why D3 is still so relevant today.
- jordache 8y ago
  you basically re-iterated what I said... the d3 wrapper libraries are likely sufficient for 85% of the use cases out there. For the others, you either do everything in D3, or you extend those wrapper libraries to give you what you need.
  - _coveredInBees 8y ago
    Not exactly. "Extend those wrapper libraries" is not at all trivial or easy because when the wrapper library / charting library creates abstractions, it also places some limitations on the overall customizability. So when the wrapper or charting lib isn't cutting it, trying to shoe-horn the feature you need is not always easy and usually involves ugly hacks that reduce the overall simplicity of the code if you had just rolled your own D3 implementation from scratch.
    - jordache 8y ago

_coveredInBees 8y ago

I could not agree more with you. So many folks here seem to be missing the actual utility of D3 and why it still remains relevant and useful in todays JS/Web landscape. If you need standard stuff, there are plenty of awesome plotting libraries that utilize D3 on the back-end while abstracting the complexity away from you. Some even try to give you some amount of flexibility and composability to customize them, but they are always going to have limitations compared to the raw power and flexibility you have if you roll your own D3 visualization. You can't have it both ways, and that's something a lot of people don't seem to understand. If you're absolutely sure that a visualization library can support all your requirements, then it is absolutely the easier way to go about doing things. But you just have to be really sure that your requirements aren't going to change past the limitations of the visualization library of choice.