
Dc.js – Dimensional Charting JavaScript Library - awjr
http://dc-js.github.io/dc.js/
======
awjr
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
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
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).

------
rfergie
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

------
viggity
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...](http://www.machete.io/board/view/NFL_2013_Penalties/3731630c-e064-4d4c-a152-82d92997713f)

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

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

~~~
viggity
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.

------
zenocon
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
TBH I was kinda surprised when it accepted my submission.

------
SimeVidas
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

~~~
zenocon
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)

------
webmaven
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.

~~~
kelv
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
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.

------
cturhan
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.

------
joeblau
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.

------
gparted
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
Yes. Tableau, QlikView, and SpotFire all provide this functionality.

~~~
gparted
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
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.

------
peterchon
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
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
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
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.

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

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

