5 ms·

Dc.js – Dimensional Charting JavaScript Library

132 points by awjr 12y ago

rfergie 12y ago
I am a massive fan of dc.js. Crossfilter is an amazing library, but my JS-fu isn't good enough to use its power without the help from DC. An example of what I was able to do: http://www.eanalytica.com/google-analytics-cube/ http://www.eanalytica.com/google-analytics-cube/ uses the dc, crossfilter and the Google Analytics API to make a simple visualisation
awjr 12y ago
I posted this as I've spent the last month with this library and it has made the creation of a multi tab dashboard a breeze. Once you get your head around http://square.github.io/crossfilter/ http://square.github.io/crossfilter/ and the manipulations you can do with groups, dc.js really makes rendering the data very simple. 1.7 has just been released and 2.0 is 'around the corner'. It's a fantastic library and massive kudos to the people working on it. You make me look awesome :)
- magicalist 12y ago
  Can you explain what you found were the advantages of it over just using crossfilter and d3? It's not immediately apparent from the page. Is it that it wraps some of the complexities of d3 so you don't have to deal with them?
  - awjr 12y ago
    dc.js is the 'glue' that holds d3 and crossfilter together. So I can create a crossfilter, generate multiple dimensions, group those dimensions, then render multiple charts. Applying a filter to one chart (e.g. clicking on Saturday) then get's reflected in the display of all the other charts. Note you can also override the group().reduce() function if your data is a lot more complex. In fact I went a bit crazy and had one set of reduce() functions create me the struct array I needed from which to create another crossfilter and apply that to a subset of charts. I'm hopeful that, based on conversations in the dc group, crossfilter will just become the default data engine and this will be replaceable, but crossfilter is very powerful. I'll be honest here and state that I don't have a deep knowledge of D3. dc.js had me producing a 'limited' set of charts within days. What I have noticed is that the linechart really does not like you pushing too many data points to it. (I have 24 temperature min/max/avg points over a day for 8 sensors going back a year) however I think this may be a browser SVG limitation (6 other charts on the page). In this case, on a dashboard, this type of chart is nonsensical for what I am doing anyway (decision taken 30minutes ago).
webmaven 12y ago
DC.js is great, but ironically it's deep integration with crossfilter makes it much more difficult to use with other d3.js-based charting libraries. A team I am on ended up switching to another charting library and handling the data manipulation and filtering with crossfilter ourselves.
- awjr 12y ago
  There is somebody working on this issue right now to extract the filtering library. They also had issues with crossfilter. I've been able to code around some of the issues crossfilter presents (e.g. removal of specific groups from filtered group if they had a non-sensical values).
- kelv 12y ago
  Interesting to hear your experience. I'm wondering which library you switched to and how's the experience been with the two separate libraries?
  - webmaven 12y ago
    We switched to C3, and as a charting library it is very nice to use (the declarative approach worked better for us than DC's (and D3's) imperative one) and were able to combine it with crossfilter as well as other libraries for a few missing chart types. However, we ultimately had to switch again to a solution that was mandated by another part of the organization for IE8 compatibility and internal UI standards.
- bicknergseng 12y ago
  It definitely suffers from the monolithic design that plagues nvd3 and other d3 chart libraries.
SimeVidas 12y ago
I Google-searched "dimensional charting" to get more information about this term. Guess what? All the results on page 1 are related to Dc.js. Looks like they'll have to write the definition themselves :-P
- cturhan 12y ago
  Lol, I thought it was D3 Charts :)
- zenocon 12y ago
  The use of the word dimension here more than likely stems from dimensional modeling / data warehouse / OLAP design [1], where designing your database in a star/cube schema will allow you to query it easily across many "dimensions". With crossfilter.js your data gets structured similarly and then bound to d3.js svg charts. dc.js provides the glue between the two to make it easier to work with. This allows you to interactively select part of a chart and immediately see other charts bound to that data get filtered at the same time. It allows for an interesting way to explore / visualize data. [1] https://en.wikipedia.org/wiki/Dimensional_modeling https://en.wikipedia.org/wiki/Dimensional_modeling
zenocon 12y ago
Wow, I am surprised this has never hit HN before. I've been using the combo of dc.js/crossfilter.js/d3.js for a while now to great success. If you need to make interactive charts for things like dashboards -- this is an amazing triplet. The dev team behind dc.js is also super nice and very responsive to questions / prs.
- awjr 12y ago
  TBH I was kinda surprised when it accepted my submission.
joeblau 12y ago
I used this for creating a full featured data pipeline a little over a year ago and it was great. We processed real-time data but our visualizations only pulled from a cache. It made it extremely easy for a non-tech team member to see what was going on with our system. That being said, I did find a few bugs which I had to patch in the system, but I don't even remember what they are anymore and I wasn't a heavy GitHub user at the time so I never submitted any PR's.
cturhan 12y ago
This is one of the libraries I that I said "wow". I've been watching any improvements on github since I found it. It has a very active repo. This weekend I got 70+ notifications. I've used dc for a twitter data visualization and I got many positive responses.
viggity 12y ago
I love dc.js. In fact, I just released a data viz tool (www.machete.io) yesterday that lets lay people create charts/dashboards with dc.js. If you're a dev, you'll obviously have a lot more flexibility by crafting dcjs exactly to your liking, but machete would can help you rapidly prototype. Example: All 3,025 Penalties in the NFL 2013 Season - http://www.machete.io/board/view/NFL_2013_Penalties/3731630c-e064-4d4c-a152-82d92997713f http://www.machete.io/board/view/NFL_2013_Penalties/3731630c... The plan is to use the github model - free public boards, private boards will be a small monthly fee.
- kelv 12y ago
  Very cool tool. Signed up to the list, and keen to see how the service can simplify the data viz process.
  - viggity 12y ago
    Thanks! As I've been creating other examples (yet to be released), I've discovered there are always going to be little quirks with the way you want certain data pre-filtered or grouped, aggregated and then grouped again. But in general my time creating my first board went from two weeks (http://stonefinch.com/Projects/Medicare http://stonefinch.com/Projects/Medicare - 19mb download, it'll take a while), down to 1-2 days, then down to 4 hours. Now with machete I can knock out a new board in less than an hour. I typically spend a lot more time just munging together data.
peterchon 12y ago
Could anyone explain the benefit of using Dc.js vs google charts API or d3.js? Crossfilter seems really cool - but since it's another library, what is it that Dc is offering?
- Zikes 12y ago
  Google Charts API is an external resource, and you're limited to the capabilities of that API, whereas d3.js lets you do just about anything you'd want to do with SVG/Canvas & javascript including animations and interactions. The benefits of crossfilter or dc.js over plain d3.js is the layer of abstraction making it easier to use.
  - peterchon 12y ago
    I never understood why the external resource is such a concern for devs - most of your application will be online with online access. Google is not making a call out to send data, but to retrieve what it needs to render the different chart formats, it saves time.
    - pp19dd 12y ago
      Well, it's all fun and games with various APIs and remotely-hosted solutions, until those solutions start breaking and changing. For example, for awhile the news world loved making apps (simple infographics, interactives, etc) that used tabletop.js, which in turn pulled data from a google doc (spreadsheet, etc, which made it easier for text changes: programmers could program and editors could edit.) Then, bugs surfaced after google altered login procedures. What should have been a simple JSONP call was replaced with a broken login page being returned instead of JSONP, that is: only if you hadn't logged into your google account for awhile. People who've never logged in or were logged into a google service were fine. Then they started throttling connections - per computer, per account, random without announcing it, etc. Debugging these things was frustrating. So, in other words, a convenient feature becomes a liability very quickly.
- gparted 12y ago
  One reason: Not everyone has access to those services within the firewall, so it's nice to have this as an option.
gparted 12y ago
Are there any commercial offerings that do some of the grunt work for you, like colors and resizing of page, zoom on maps, click to see just one chart, etc? I'd pay for that.
- meGetEducated 12y ago
  Yes. Tableau, QlikView, and SpotFire all provide this functionality.
  - gparted 12y ago
    No. I meant a commercial version that uses D3.js and is editable by users. I don't want a black box, but i also don't want to spend much time fixing quirks. For example long text is a problem with charts and svg (in my experience). I'd like to pay for a version that fixes these things.
    - floatrock 12y ago
      Highcharts might be up your alley. Highcharts.com It's not D3-based, but it's one of the most popular JS charting libraries out there because it's has a well documented API and it's very customizable. We've had a lot of success with it producing visualizations at DataHero.com D3 is like a paintbrush -- you can make anything with it if you're DaVinci, but it's a very low-level tool so you need to be a master if you want to make anything that's not my drippy kindergarten giraffe drawing.
  - deleted 12y ago
    [deleted]
EGreg 12y ago
Is this compatible with d3? Why would I use one vs the other? etc. Just curious.
- awjr 12y ago
  dc.js sits on top of D3 and provides glue that between multiple D3 charts and crossfilter.

132 points by awjr 12y ago

I am a massive fan of dc.js. Crossfilter is an amazing library, but my JS-fu isn't good enough to use its power without the help from DC. An example of what I was able to do: http://www.eanalytica.com/google-analytics-cube/ http://www.eanalytica.com/google-analytics-cube/ uses the dc, crossfilter and the Google Analytics API to make a simple visualisation

awjr 12y ago

I posted this as I've spent the last month with this library and it has made the creation of a multi tab dashboard a breeze. Once you get your head around http://square.github.io/crossfilter/ http://square.github.io/crossfilter/ and the manipulations you can do with groups, dc.js really makes rendering the data very simple. 1.7 has just been released and 2.0 is 'around the corner'. It's a fantastic library and massive kudos to the people working on it. You make me look awesome :)

magicalist 12y ago
Can you explain what you found were the advantages of it over just using crossfilter and d3? It's not immediately apparent from the page. Is it that it wraps some of the complexities of d3 so you don't have to deal with them?
- awjr 12y ago
  dc.js is the 'glue' that holds d3 and crossfilter together. So I can create a crossfilter, generate multiple dimensions, group those dimensions, then render multiple charts. Applying a filter to one chart (e.g. clicking on Saturday) then get's reflected in the display of all the other charts. Note you can also override the group().reduce() function if your data is a lot more complex. In fact I went a bit crazy and had one set of reduce() functions create me the struct array I needed from which to create another crossfilter and apply that to a subset of charts. I'm hopeful that, based on conversations in the dc group, crossfilter will just become the default data engine and this will be replaceable, but crossfilter is very powerful. I'll be honest here and state that I don't have a deep knowledge of D3. dc.js had me producing a 'limited' set of charts within days. What I have noticed is that the linechart really does not like you pushing too many data points to it. (I have 24 temperature min/max/avg points over a day for 8 sensors going back a year) however I think this may be a browser SVG limitation (6 other charts on the page). In this case, on a dashboard, this type of chart is nonsensical for what I am doing anyway (decision taken 30minutes ago).

webmaven 12y ago

DC.js is great, but ironically it's deep integration with crossfilter makes it much more difficult to use with other d3.js-based charting libraries. A team I am on ended up switching to another charting library and handling the data manipulation and filtering with crossfilter ourselves.

awjr 12y ago
There is somebody working on this issue right now to extract the filtering library. They also had issues with crossfilter. I've been able to code around some of the issues crossfilter presents (e.g. removal of specific groups from filtered group if they had a non-sensical values).
kelv 12y ago
Interesting to hear your experience. I'm wondering which library you switched to and how's the experience been with the two separate libraries?
- webmaven 12y ago
  We switched to C3, and as a charting library it is very nice to use (the declarative approach worked better for us than DC's (and D3's) imperative one) and were able to combine it with crossfilter as well as other libraries for a few missing chart types. However, we ultimately had to switch again to a solution that was mandated by another part of the organization for IE8 compatibility and internal UI standards.
bicknergseng 12y ago
It definitely suffers from the monolithic design that plagues nvd3 and other d3 chart libraries.

SimeVidas 12y ago

I Google-searched "dimensional charting" to get more information about this term. Guess what? All the results on page 1 are related to Dc.js. Looks like they'll have to write the definition themselves :-P

cturhan 12y ago
Lol, I thought it was D3 Charts :)
zenocon 12y ago
The use of the word dimension here more than likely stems from dimensional modeling / data warehouse / OLAP design [1], where designing your database in a star/cube schema will allow you to query it easily across many "dimensions". With crossfilter.js your data gets structured similarly and then bound to d3.js svg charts. dc.js provides the glue between the two to make it easier to work with. This allows you to interactively select part of a chart and immediately see other charts bound to that data get filtered at the same time. It allows for an interesting way to explore / visualize data. [1] https://en.wikipedia.org/wiki/Dimensional_modeling https://en.wikipedia.org/wiki/Dimensional_modeling

zenocon 12y ago

Wow, I am surprised this has never hit HN before. I've been using the combo of dc.js/crossfilter.js/d3.js for a while now to great success. If you need to make interactive charts for things like dashboards -- this is an amazing triplet. The dev team behind dc.js is also super nice and very responsive to questions / prs.

awjr 12y ago
TBH I was kinda surprised when it accepted my submission.

joeblau 12y ago

I used this for creating a full featured data pipeline a little over a year ago and it was great. We processed real-time data but our visualizations only pulled from a cache. It made it extremely easy for a non-tech team member to see what was going on with our system. That being said, I did find a few bugs which I had to patch in the system, but I don't even remember what they are anymore and I wasn't a heavy GitHub user at the time so I never submitted any PR's.

cturhan 12y ago

This is one of the libraries I that I said "wow". I've been watching any improvements on github since I found it. It has a very active repo. This weekend I got 70+ notifications. I've used dc for a twitter data visualization and I got many positive responses.

viggity 12y ago

I love dc.js. In fact, I just released a data viz tool (www.machete.io) yesterday that lets lay people create charts/dashboards with dc.js. If you're a dev, you'll obviously have a lot more flexibility by crafting dcjs exactly to your liking, but machete would can help you rapidly prototype. Example: All 3,025 Penalties in the NFL 2013 Season - http://www.machete.io/board/view/NFL_2013_Penalties/3731630c-e064-4d4c-a152-82d92997713f http://www.machete.io/board/view/NFL_2013_Penalties/3731630c... The plan is to use the github model - free public boards, private boards will be a small monthly fee.

kelv 12y ago
Very cool tool. Signed up to the list, and keen to see how the service can simplify the data viz process.
- viggity 12y ago
  Thanks! As I've been creating other examples (yet to be released), I've discovered there are always going to be little quirks with the way you want certain data pre-filtered or grouped, aggregated and then grouped again. But in general my time creating my first board went from two weeks (http://stonefinch.com/Projects/Medicare http://stonefinch.com/Projects/Medicare - 19mb download, it'll take a while), down to 1-2 days, then down to 4 hours. Now with machete I can knock out a new board in less than an hour. I typically spend a lot more time just munging together data.

peterchon 12y ago

Could anyone explain the benefit of using Dc.js vs google charts API or d3.js? Crossfilter seems really cool - but since it's another library, what is it that Dc is offering?

Zikes 12y ago
Google Charts API is an external resource, and you're limited to the capabilities of that API, whereas d3.js lets you do just about anything you'd want to do with SVG/Canvas & javascript including animations and interactions. The benefits of crossfilter or dc.js over plain d3.js is the layer of abstraction making it easier to use.
- peterchon 12y ago
  I never understood why the external resource is such a concern for devs - most of your application will be online with online access. Google is not making a call out to send data, but to retrieve what it needs to render the different chart formats, it saves time.
  - pp19dd 12y ago
    Well, it's all fun and games with various APIs and remotely-hosted solutions, until those solutions start breaking and changing. For example, for awhile the news world loved making apps (simple infographics, interactives, etc) that used tabletop.js, which in turn pulled data from a google doc (spreadsheet, etc, which made it easier for text changes: programmers could program and editors could edit.) Then, bugs surfaced after google altered login procedures. What should have been a simple JSONP call was replaced with a broken login page being returned instead of JSONP, that is: only if you hadn't logged into your google account for awhile. People who've never logged in or were logged into a google service were fine. Then they started throttling connections - per computer, per account, random without announcing it, etc. Debugging these things was frustrating. So, in other words, a convenient feature becomes a liability very quickly.
gparted 12y ago
One reason: Not everyone has access to those services within the firewall, so it's nice to have this as an option.

gparted 12y ago

Are there any commercial offerings that do some of the grunt work for you, like colors and resizing of page, zoom on maps, click to see just one chart, etc? I'd pay for that.

meGetEducated 12y ago
Yes. Tableau, QlikView, and SpotFire all provide this functionality.
- gparted 12y ago
  No. I meant a commercial version that uses D3.js and is editable by users. I don't want a black box, but i also don't want to spend much time fixing quirks. For example long text is a problem with charts and svg (in my experience). I'd like to pay for a version that fixes these things.
  - floatrock 12y ago
    Highcharts might be up your alley. Highcharts.com It's not D3-based, but it's one of the most popular JS charting libraries out there because it's has a well documented API and it's very customizable. We've had a lot of success with it producing visualizations at DataHero.com D3 is like a paintbrush -- you can make anything with it if you're DaVinci, but it's a very low-level tool so you need to be a master if you want to make anything that's not my drippy kindergarten giraffe drawing.
- deleted 12y ago
  [deleted]

EGreg 12y ago

Is this compatible with d3? Why would I use one vs the other? etc. Just curious.

awjr 12y ago
dc.js sits on top of D3 and provides glue that between multiple D3 charts and crossfilter.