7 ms·

D3.compose – compose reusable charts and components with D3.js

288 points by sebg 11y ago

currywurst 11y ago
The logical conclusion of this approach is the Vega visualization grammar :http://vega.github.io/vega/ http://vega.github.io/vega/ It gives you a declarative means of specifying the visualization and comes from the the same lab that created d3
- deleted 11y ago
  [deleted]
- smrtinsert 11y ago
  I think vega lite is where the action should be. http://vega.github.io/vega-lite/ http://vega.github.io/vega-lite/
k__ 11y ago
I was just looking after something like this the other day. D3 is super for customization, but it's really really low-level.
- softawre 11y ago
  There are many D3 wrappers for quick starting D3. dc.js is a good one.
  - placeybordeaux 11y ago
    I really enjoyed using dc.js. It also rolls in crossfilter which is awesome for drilling down into data.
    - sean_the_geek 11y ago
      thanks for mentioning dc.js. I am looking for D3 wrappers which will make life a bit more simple. Care to mention more?
      - infie 11y ago
        nvd3 (https://github.com/novus/nvd3 https://github.com/novus/nvd3) is also pretty good.
      - bbaumgar 11y ago
        We've really enjoyed c3.js (http://c3js.org/ http://c3js.org/). It has a wide offering of visualizations types and come with nice on-hover tooltips, which is something that I've had trouble finding anywhere else. Unfortunately it's difficult to customize their offerings, but they've covered 90% of our usecases.
  - awjr 11y ago
    dc.js is one of those libraries that completely blows client's minds. The hard thing to do as a developer is not to try and filter the data too much. dc.js lets the end-user filter the data interactively and create their own stories, you just have to work out the questions each chart lets the user ask. http://dc-js.github.io/dc.js/ http://dc-js.github.io/dc.js/ As it sits on top of crossfilter (http://square.github.io/crossfilter/ http://square.github.io/crossfilter/) you can also do unusual things behind the scenes to the data sets. As an example, I used google maps to restrict datasets to the current map view. Worked surprisingly well. http://www.bathhacked.org/projects/hacked21-food-standards/ http://www.bathhacked.org/projects/hacked21-food-standards/
    - elsherbini 11y ago
      It looks like the link to the project on that article is down (http://www.sure-sense.com/fhrs/ http://www.sure-sense.com/fhrs/). Is it hosted elsewhere? I'd love to take a look.
      - awjr 11y ago
        Yeah sadly, it was a hackathon hack I repurposed afterwards for a startup I was working for. Will try and dig it out.
- krebby 11y ago
  I hear this often but I'm not sure I agree. With almost all of these charting libraries you quickly run into the law of leaky abstractions. Most of the examples of things you'd want to do are written pretty clearly by Mike himself. They are easy to adapt by changing a few things around, instead of sticking with an inflexible abstraction.
forrestthewoods 11y ago
I swear many people would be better off just manually generating paths on their own. It's not difficult. D3 is pretty awesome and all but it is NOT a charting library. It's a data binding framework. It adds several layers of incredibly hard to follow abstraction. It's super duper cool when it does exactly what you want and all you desire is to drop your in your data. A+++ would recommend. But if you want to do something slightly different it's a huge pain in the ass. At the end of the day it's just a handful of SVG primitives. Draw them yourself and move on with your day. I promise you it's easier.
- jwr 11y ago
  I wondered if I was the only one who thought that way — apparently not. I also found D3 to be very inflexible, with abstractions doing strange things behind your back. In general, a lot of "magic" was happening behind the scenes. I mostly write in ClojureScript, so the data binding wasn't that attractive — I can do all of that work better anyway. I guess what I'm looking for is a library with graphics/charting primitives written in ClojureScript, possibly using React. Hmm.
  - krebby 11y ago
    The next version of D3 will be modular, with the different parts broken out into separate packages (i.e. shape utils separate from databinding utils). Currently I'm using D3 piecemeal with React with a good deal of success.
- SonicSoul 11y ago
  Can you elaborate on "manually generating paths"?
  - forrestthewoods 11y ago
    The end result is an <svg> element with a bunch of with a bunch of <path> <line> <rect> children. Sometimes you can wrangle D3 to generate the <path>s you want. Sometimes it's easier to more directly make them yourself.
  - 11y ago
cogware 11y ago
Plottable.js (http://plottablejs.org/examples/ http://plottablejs.org/examples/) is another library that takes a similar approach: reusable components written in D3, and a table-based composable layout system.
- tomasien 11y ago
  I've been using Plottable recently and it's great. Hope it gets more widely used so there's more material out there about it - it's SUPER powerful but the documentation is hard to understand if you're really trying to extend it.
spankalee 11y ago
Hopefully HTML custom elements is the future here, where you can just define new SVG tags like you can HTML tags, and then build up a graphics from reusable components. There are still a few kinks to work out, like making sure <template> is supported in SVG documents, but once that's working something like SVG + Polymer data binding will be better than D3.
- Joeri 11y ago
  The key functionality of D3 is the ability to join a data series against a dom tree, adding, transforming and removing content as needed. Even with polymer and rich components there's still a place for D3.
roadnottaken 11y ago
How come error-bars are so unusual in these sorts of libraries? I'm a scientist and NEVER make charts without error-bars on it, but they're rarely included in charting libraries and when they are it feels like an afterthought.
- mrits 11y ago
  I've never used a graphing package without an error-bar. It would be easy to add one in d3.compose but I don't see it in the API.
- timhall 11y ago
  (author here) Here's a quick implementation of error bars for d3.compose [1]. The general goal of d3.compose was to provide the foundation for creating reusable charts and components while keeping the standard library of charts/components relatively small and focused. With that said, there are plenty of charts/components in the pipeline (scatter, area, and callout to name a few) and I'll make sure error bars are added as well. 1: http://bl.ocks.org/timhall/87aee92992f6f7892a1d http://bl.ocks.org/timhall/87aee92992f6f7892a1d
- trjordan 11y ago
  Most of the data visualized by these types of libraries don't have any sort of variance or confidence interval behind the data. You're looking at things like sales forecasts, server latency, number of employee hours, or other precisely measurable quantities. The whole context around those numbers never talks about the notion of variability or reproducibility, so the idea of putting error bars on there doesn't help communicate anything. Why don't scientists use these libraries, making error bars an appealing thing to add? In my experience, D3 isn't a great too for interactive analysis: plot, stare, tweak, re-plot. I get bogged down in the details of the visualization, vs something like Matlab that almost always throws up a reasonable plot with interactive controls. Since D3 doesn't encourage the type of workflow that results in a graph with error bars, you get a self-reinforcing dynamic where nobody who works with D3 is interested in making it easy to create graphs with error bars.
ohitsdom 11y ago
D3 always looks really interesting to me, but I still just use Highcharts for generating charts (easy to use, great documentation). Any reason to try out D3 for basic charting, or is it best suited for more custom scenarios?
- untog 11y ago
  Definitely more suited for custom scenarios. That said, once you've got the basics in D3 it's really easy to start adding pieces of knowledge and customize. Highcharts is a lot more abstracted away.
- snowwrestler 11y ago
  The Atlantic's Quartz website has open-sourced a simple D3-based charting program called Chartbuilder. It's not as full-featured as Highcharts, but it's free at any usage level and customizable. Code: https://github.com/Quartz/Chartbuilder https://github.com/Quartz/Chartbuilder Try it: https://quartz.github.io/Chartbuilder/ https://quartz.github.io/Chartbuilder/

288 points by sebg 11y ago

The logical conclusion of this approach is the Vega visualization grammar :http://vega.github.io/vega/ http://vega.github.io/vega/ It gives you a declarative means of specifying the visualization and comes from the the same lab that created d3

deleted 11y ago
[deleted]
smrtinsert 11y ago
I think vega lite is where the action should be. http://vega.github.io/vega-lite/ http://vega.github.io/vega-lite/

k__ 11y ago

I was just looking after something like this the other day. D3 is super for customization, but it's really really low-level.

softawre 11y ago
There are many D3 wrappers for quick starting D3. dc.js is a good one.
- placeybordeaux 11y ago
  I really enjoyed using dc.js. It also rolls in crossfilter which is awesome for drilling down into data.
  - sean_the_geek 11y ago
    thanks for mentioning dc.js. I am looking for D3 wrappers which will make life a bit more simple. Care to mention more?
    - infie 11y ago
      nvd3 (https://github.com/novus/nvd3 https://github.com/novus/nvd3) is also pretty good.
    - bbaumgar 11y ago
      We've really enjoyed c3.js (http://c3js.org/ http://c3js.org/). It has a wide offering of visualizations types and come with nice on-hover tooltips, which is something that I've had trouble finding anywhere else. Unfortunately it's difficult to customize their offerings, but they've covered 90% of our usecases.
- awjr 11y ago
  dc.js is one of those libraries that completely blows client's minds. The hard thing to do as a developer is not to try and filter the data too much. dc.js lets the end-user filter the data interactively and create their own stories, you just have to work out the questions each chart lets the user ask. http://dc-js.github.io/dc.js/ http://dc-js.github.io/dc.js/ As it sits on top of crossfilter (http://square.github.io/crossfilter/ http://square.github.io/crossfilter/) you can also do unusual things behind the scenes to the data sets. As an example, I used google maps to restrict datasets to the current map view. Worked surprisingly well. http://www.bathhacked.org/projects/hacked21-food-standards/ http://www.bathhacked.org/projects/hacked21-food-standards/
  - elsherbini 11y ago
    It looks like the link to the project on that article is down (http://www.sure-sense.com/fhrs/ http://www.sure-sense.com/fhrs/). Is it hosted elsewhere? I'd love to take a look.
    - awjr 11y ago
      Yeah sadly, it was a hackathon hack I repurposed afterwards for a startup I was working for. Will try and dig it out.
krebby 11y ago
I hear this often but I'm not sure I agree. With almost all of these charting libraries you quickly run into the law of leaky abstractions. Most of the examples of things you'd want to do are written pretty clearly by Mike himself. They are easy to adapt by changing a few things around, instead of sticking with an inflexible abstraction.

forrestthewoods 11y ago

I swear many people would be better off just manually generating paths on their own. It's not difficult. D3 is pretty awesome and all but it is NOT a charting library. It's a data binding framework. It adds several layers of incredibly hard to follow abstraction. It's super duper cool when it does exactly what you want and all you desire is to drop your in your data. A+++ would recommend. But if you want to do something slightly different it's a huge pain in the ass. At the end of the day it's just a handful of SVG primitives. Draw them yourself and move on with your day. I promise you it's easier.

jwr 11y ago
I wondered if I was the only one who thought that way — apparently not. I also found D3 to be very inflexible, with abstractions doing strange things behind your back. In general, a lot of "magic" was happening behind the scenes. I mostly write in ClojureScript, so the data binding wasn't that attractive — I can do all of that work better anyway. I guess what I'm looking for is a library with graphics/charting primitives written in ClojureScript, possibly using React. Hmm.
- krebby 11y ago
  The next version of D3 will be modular, with the different parts broken out into separate packages (i.e. shape utils separate from databinding utils). Currently I'm using D3 piecemeal with React with a good deal of success.
SonicSoul 11y ago
Can you elaborate on "manually generating paths"?
- forrestthewoods 11y ago
  The end result is an <svg> element with a bunch of with a bunch of <path> <line> <rect> children. Sometimes you can wrangle D3 to generate the <path>s you want. Sometimes it's easier to more directly make them yourself.
- 11y ago

cogware 11y ago

Plottable.js (http://plottablejs.org/examples/ http://plottablejs.org/examples/) is another library that takes a similar approach: reusable components written in D3, and a table-based composable layout system.

tomasien 11y ago
I've been using Plottable recently and it's great. Hope it gets more widely used so there's more material out there about it - it's SUPER powerful but the documentation is hard to understand if you're really trying to extend it.

spankalee 11y ago

Hopefully HTML custom elements is the future here, where you can just define new SVG tags like you can HTML tags, and then build up a graphics from reusable components. There are still a few kinks to work out, like making sure <template> is supported in SVG documents, but once that's working something like SVG + Polymer data binding will be better than D3.

Joeri 11y ago
The key functionality of D3 is the ability to join a data series against a dom tree, adding, transforming and removing content as needed. Even with polymer and rich components there's still a place for D3.

roadnottaken 11y ago

How come error-bars are so unusual in these sorts of libraries? I'm a scientist and NEVER make charts without error-bars on it, but they're rarely included in charting libraries and when they are it feels like an afterthought.

mrits 11y ago
I've never used a graphing package without an error-bar. It would be easy to add one in d3.compose but I don't see it in the API.
timhall 11y ago
(author here) Here's a quick implementation of error bars for d3.compose [1]. The general goal of d3.compose was to provide the foundation for creating reusable charts and components while keeping the standard library of charts/components relatively small and focused. With that said, there are plenty of charts/components in the pipeline (scatter, area, and callout to name a few) and I'll make sure error bars are added as well. 1: http://bl.ocks.org/timhall/87aee92992f6f7892a1d http://bl.ocks.org/timhall/87aee92992f6f7892a1d
trjordan 11y ago
Most of the data visualized by these types of libraries don't have any sort of variance or confidence interval behind the data. You're looking at things like sales forecasts, server latency, number of employee hours, or other precisely measurable quantities. The whole context around those numbers never talks about the notion of variability or reproducibility, so the idea of putting error bars on there doesn't help communicate anything. Why don't scientists use these libraries, making error bars an appealing thing to add? In my experience, D3 isn't a great too for interactive analysis: plot, stare, tweak, re-plot. I get bogged down in the details of the visualization, vs something like Matlab that almost always throws up a reasonable plot with interactive controls. Since D3 doesn't encourage the type of workflow that results in a graph with error bars, you get a self-reinforcing dynamic where nobody who works with D3 is interested in making it easy to create graphs with error bars.

ohitsdom 11y ago

D3 always looks really interesting to me, but I still just use Highcharts for generating charts (easy to use, great documentation). Any reason to try out D3 for basic charting, or is it best suited for more custom scenarios?

untog 11y ago
Definitely more suited for custom scenarios. That said, once you've got the basics in D3 it's really easy to start adding pieces of knowledge and customize. Highcharts is a lot more abstracted away.
snowwrestler 11y ago
The Atlantic's Quartz website has open-sourced a simple D3-based charting program called Chartbuilder. It's not as full-featured as Highcharts, but it's free at any usage level and customizable. Code: https://github.com/Quartz/Chartbuilder https://github.com/Quartz/Chartbuilder Try it: https://quartz.github.io/Chartbuilder/ https://quartz.github.io/Chartbuilder/