Creating thumbnails of dc.js charts

Question

Hi I want to have thumbnails of my dc.js charts that on clicking give me the full view of the chart. Right now I am creating 2 charts one with a smaller size(thumbnail) and one with the actual size. The problem I am facing is that the filtering done on the big chart is not reflected in the thumbnail charts.

I would like the thumbnail chart to reflect the filter that has been applied on the larger chart.

The thumbnail could also be interactive or passive.

How are you making the filter now? You might just use a saved svg for the thumbnail, then a rendered d3 chart for the full. — Union find, Jun 29 '14 at 01:11
dc.js has a .filter() method associated with a chart. Now I can create 2 seperate charts and call .filter() on the other one when filtering is done on one. I was wondering if there is a better way — Ganesh Iyer, Jun 29 '14 at 07:48
On click just change the size of the chart? My saved svg method also would work. — Union find, Jun 29 '14 at 12:30

score 0 · Accepted Answer · edited May 23 '17 at 12:29

I believe you are running into a common confusion about charts built on the same dimension From https://github.com/square/crossfilter/wiki/API-Reference:

Note: a grouping intersects the crossfilter's current filters, except for the associated dimension's filter. Thus, group methods consider only records that satisfy every filter except this dimension's filter. So, if the crossfilter of payments is filtered by type and total, then group by total only observes the filter by type.

I created a quick example of this here: http://jsfiddle.net/djmartin_umich/94UHh/

    teamMemberChart
        .width(270)
        .height(220)
        .dimension(teamMemberDimension)
        .group(teamMemberGroup)
        .elasticX(true);

    teamMemberChart2
        .width(540)
        .height(440)
        .dimension(teamMemberDimension)
        .group(teamMemberGroup)
        .elasticX(true);

One common solution to this is to create a second dimension and group, using the same field. This won't quite be what you are looking for, however, since the second chart will display only the filtered results... where what the original chart should both the selected and unselected values.

Instead I suggest you try out the accepted answer to this question: Whats the best way to make a d3.js visualisation layout responsive?

In that approach, the svg element is adjusted to fit the outer container. Perhaps you could adjust that approach to your needs.

Creating thumbnails of dc.js charts

1 Answers1