Dc.js – Dimensional Charting JavaScript Library(dc-js.github.io)
dc-js.github.io
Dc.js – Dimensional Charting JavaScript Library
http://dc-js.github.io/dc.js/
11 comments
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?
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).
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).
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/ uses the dc, crossfilter and the Google Analytics API to make a simple visualisation
An example of what I was able to do: http://www.eanalytica.com/google-analytics-cube/ uses the dc, crossfilter and the Google Analytics API to make a simple visualisation
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...
The plan is to use the github model - free public boards, private boards will be a small monthly fee.
Example: All 3,025 Penalties in the NFL 2013 Season - 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.
Very cool tool. Signed up to the list, and keen to see how the service can simplify the data viz process.
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 - 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.
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.
The dev team behind dc.js is also super nice and very responsive to questions / prs.
TBH I was kinda surprised when it accepted my submission.
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
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
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
Lol, I thought it was D3 Charts :)
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.
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).
It definitely suffers from the monolithic design that plagues nvd3 and other d3 chart libraries.
Interesting to hear your experience. I'm wondering which library you switched to and how's the experience been with the two separate libraries?
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.
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.
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.
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.
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.
Yes. Tableau, QlikView, and SpotFire all provide this functionality.
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.
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.
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.
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]
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?
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.
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.
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.
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.
see my post a couple down https://news.ycombinator.com/item?id=7868603
dc.js marries crossfilter.js with d3.js -- that's it in a nutshell.
crossfilter allows you to group and filter your data in-memory very quickly, and potentially for a LOT of data See http://bl.ocks.org/milroc/7032589 for a good intro to crossfilter (launch the demo on slide #39 -- loads 36M flight records).
you likely already know what d3 does. dc.js makes it easy to generate dashboards where the user can interact with the charts (e.g. filter by Q1, Q2...see the NASDAQ example at https://dc-js.github.io/dc.js/)
dc.js marries crossfilter.js with d3.js -- that's it in a nutshell.
crossfilter allows you to group and filter your data in-memory very quickly, and potentially for a LOT of data See http://bl.ocks.org/milroc/7032589 for a good intro to crossfilter (launch the demo on slide #39 -- loads 36M flight records).
you likely already know what d3 does. dc.js makes it easy to generate dashboards where the user can interact with the charts (e.g. filter by Q1, Q2...see the NASDAQ example at https://dc-js.github.io/dc.js/)
I guess there in lies my question - d3 makes it easy to marry the data to a dom, making it easy to add interactivity. So, i guess why would I chose to use Dc rather than to use d3 with crossfilter.js?
Consider this example: https://square.github.io/crossfilter/#charts and this example https://dc-js.github.io/dc.js/#yearly-bubble-chart -- sure, you could probably do this without dc.js and crossfilter.js but it would be _a lot_ of work, and likely not re-usable.
If you don't need interactive charts that you can drill-down into, don't use it. If you do, this is the best of breed right now for this kind of thing. dc.js doesn't abstract away the d3 api -- you can still use it to your hearts content, but it sure makes these kinds of examples really easy to spin up with minimal code.
If you don't need interactive charts that you can drill-down into, don't use it. If you do, this is the best of breed right now for this kind of thing. dc.js doesn't abstract away the d3 api -- you can still use it to your hearts content, but it sure makes these kinds of examples really easy to spin up with minimal code.
I think you're missing the parent's point, at least in your first sentence. They said they could just use d3 and crossfilter instead of dc.js (which is exactly what your first example is doing, no dc.js there).
Your second paragraph appears to be the answer to their question, however. dc.js looks like it provides higher level constructs, so you're joining data to a bar chart, not data to a series of rectangles that you need to then make into a bar chart. That's great for people that don't have the time or inclination to learn d3, and since it sounds like you can still get access to the full d3 API, it sounds like it could be useful to people that do know d3, as it would give them good starting points for a bunch of types of graphs that they could then tweak at will.
Your second paragraph appears to be the answer to their question, however. dc.js looks like it provides higher level constructs, so you're joining data to a bar chart, not data to a series of rectangles that you need to then make into a bar chart. That's great for people that don't have the time or inclination to learn d3, and since it sounds like you can still get access to the full d3 API, it sounds like it could be useful to people that do know d3, as it would give them good starting points for a bunch of types of graphs that they could then tweak at will.
Dc provides a set of tools for very quick delivery of a set of charts married to a crossfilter. Most importantly it allows those charts to interact based on filters applied in one chart being reflected across all other charts.
Of note Dc generates d3 charts...so you can manipulate them to your hearts content. In my case, part of the tabbing functionality (context switch) is to destroy any in memory crossfilters AND hunt through the DOM for any d3 svg elements and delete them to aid browser performance.
Of note Dc generates d3 charts...so you can manipulate them to your hearts content. In my case, part of the tabbing functionality (context switch) is to destroy any in memory crossfilters AND hunt through the DOM for any d3 svg elements and delete them to aid browser performance.
One reason: Not everyone has access to those services within the firewall, so it's nice to have this as an option.
Just curious why this would be downvoted. I was trying to be helpful.
Once you get your head around 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 :)