Dc.js – Dimensional Charting JavaScript Library

http://dc-js.github.io/dc.js/

by awjr • 12 years ago

132 38 12 years ago

dc-js.github.io

rfergie• 12 years 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

awjr6• 12 years 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/ 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 :)

magicalist2• 12 years 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?

awjr6• 12 years 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).

webmaven2• 12 years 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.

awjr6• 12 years 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).

kelv2• 12 years 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?

webmaven2• 12 years 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• 12 years ago

It definitely suffers from the monolithic design that plagues nvd3 and other d3 chart libraries.

SimeVidas• 12 years 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

cturhan2• 12 years ago

Lol, I thought it was D3 Charts :)

zenocon4• 12 years 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

zenocon4• 12 years 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.

awjr6• 12 years ago

TBH I was kinda surprised when it accepted my submission.

joeblau• 12 years 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.

cturhan2• 12 years 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.

viggity2• 12 years 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...

The plan is to use the github model - free public boards, private boards will be a small monthly fee.

kelv2• 12 years ago

Very cool tool. Signed up to the list, and keen to see how the service can simplify the data viz process.

viggity2• 12 years 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 - 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.

peterchon3• 12 years 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?

gparted4• 12 years ago

One reason: Not everyone has access to those services within the firewall, so it's nice to have this as an option.

gparted4• 12 years ago

Just curious why this would be downvoted. I was trying to be helpful.

zenocon4• 12 years ago

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

peterchon3• 12 years ago

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?

Zikes• 12 years 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.

peterchon3• 12 years 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.

gparted4• 12 years 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• 12 years ago

Yes. Tableau, QlikView, and SpotFire all provide this functionality.

gparted4• 12 years 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.

EGreg• 12 years ago

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

awjr6• 12 years ago

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

Dc.js – Dimensional Charting JavaScript Library

Related Stories