My journey into dc.js and the ideas that came up

[Tablel352]

Hi,

I'm a data analyst / visualization consultant and since a few months I'm working with the dc.js library. And I really like it. D3 is too low level for me, and I think the crossfiltering functionality is a natural/intuïtive way of looking at data.

With this discussion I want to share some thoughts, and I'm happy to hear yours on it too.

1. The "Bullet chart" (added bullet chart #923) would be a great feature. It is an idea from dashboard guru Steven Few. They take up much less space than radial gauges. It's actually a barchart with extra context information. Very useful in business contexts. I hope bullet graphs will be implemented some time. Here is the Plotly.js example: https://plotly.com/javascript/bullet-charts/

2. The "Choroplet" is a nice feature in dc. Maps are quite appealing for users, also on a dashboard. What could be a nice addition is a map with points on it. With the radius and color based on the data. I general, I like the leaflet.js library for creating interactive maps. But I haven't seen them as part of a broader dashboard. Maybe there is an (integration) opportunity here, with all the zoom, pan etc.. capabilities that come with it.

3. To understand a dashboard it can be useful to see the underlying data in table-ish form. For this the datatable feature is there to support. In my journey I tried the dc out-of-the-box functionality, but for me this didn't suit the use case. I tried two plugins, they also didn't bring the desired result. I think as a user you want at least two controls for view the data: search/filter and pagination. And for the advance user some extra "criteria parameters" (like "equal to", "less than", ..) which can be use on certain column(s), dependent of the data type of that column. This would also bring some new (user customized) filtering capabilities.

Cheers!

[gordonwoodhull]

Thanks for the ideas!

For the last point, please check out dc-tableview or dc.datatables.js. I don’t think a full implementation of data tables is in scope for this project; it’s better to integrate with something that already exists.

There have been a couple of bullet charts contributed, but they needed work and did not get merged. For example please see #923.

[Tablel352]

Thanks. I have been studying both dc-tableview and dc.datatables.js, but to me it's not exactly clear what the difference is. The readme's state:

• dc.datatables.js: ..integrate the powerful UI, styling, and plugins of DataTables with dc.js filtered data.. ..dc-tableview has a lot more features than this library..
• dc-tableview: ..It is build on top of well known DataTables jQuery plugin..

So both use the DataTables jQuery plugin.

What is the difference, and what use cases do they suit? I'm looking for something stable and well styled, where I can easily add/remove DataTables.js functionality.

[Tablel352]

Regarding point 2: this stackoverflow question is related: https://stackoverflow.com/questions/33039404/geochoroplethchart-map-that-displays-cities-points-of-interest-with-tags

[gordonwoodhull]

Right, the two DataTables libraries are two implementations of the same concept. I think it would be better to merge the libraries, but we just haven't gotten around to it.

Yes, that choropleth layering is probably the best way to add points to a choropleth. There is also dc.leaflet.js which supports choropleth and points individually, but unfortunately does not support layering of different marks / data sets. (Easy to implement but some architectural design needed, because each layer would be an independent chart as far as dc.js is concerned.)

[Tablel352]

Regarding my previous question about the datatable (outside the standard datatable in dc.js):

I started with dc-datatables.js, but ended up with tableview (v2.0.1, I couldn't find a CDN with 2.0.2). Both have their advantages, but the reason I choose tableview are the following:

A:

1. (Main reason) tableview support export to CSV, Excel, PDF en print out the box. I really like this, because a user can set afilter and download the filtered data for further processing (for example in Excel).
2. the filterAll() issue in dc.datatables.js I encountered: dc-datatables size() method  dc.datatables.js#16
3. size() issue in dc.datatables.js I encountered: dc-datatables size() method  dc.datatables.js#16

For both libraries I didn't find a way to access the datatables.js (https://datatables.net/) object, to have access to all the features it provides. For example, I would have liked to:

B.

1. (conditional) format the numbers in the datatable (dots between thousands, red for negative numbers, and so on)
2. customize the standard strings (https://datatables.net/examples/basic_init/language.html)
3. make more records visible on the page, by default

At the end, I'm happy with the result. Also read this about issue about "deprecate this library in favor of dc-tableview" (dc-js/dc.datatables.js#8).

It might be an idea to have good/stable/basic integration with datatables.js (https://datatables.net/), and do all the customization via the datatables.js (https://datatables.net/) API.

side note: dc.js is absolutely great!

[Tablel352]

In addition, in tableview I encountered one issue I can't work around, and has quite some impact on the user. That is this one, which is still open: karenpommeroy/dc-tableview#12

I'm using version 2.0.1. of tableview, because there is no CDN with version 2.0.2. Is there a workaround?

[gordonwoodhull]

If using npm, it allows git repo URLs instead of versions. There are also CDNs that source directly from GitHub.

Since @MHeisoku has checked in the artifacts in their fork, this should work.

[gordonwoodhull]

I agree, dc-tableview is better fleshed out. I wrote dc.datatables.js as a proof of concept, because various people got the integration to work but I hadn't seen a wrapper library for it. Somehow I missed that dc-tableview already existed.

The bugs you point out would be easy to fix. It looks like the size is unused.

The underlying DataTables object is available in both libraries; in dc-tableview there is the .getDataTable() method. In dc.datatables.js it is called .dt()

I agree, it's probably better to use the DataTables object for any customizations, rather than duplicating any API on the wrapper. (The design question is how much of the dc.dataTable interface to implement, for people who are migrating from the built-in table.)

If any customizations don't work, please raise an issue on the appropriate repo.