if you put your node dependencies into a package.json file then users can simply clone and type npm install in the repo or better yet you can publish this to the NPM registry so users can just npm install dc

By this I mean a div with a number. That number could be something the developer calculates from the query results of crossfilter (say mean, median, variance...etc).

Should this be done in dc.js (for example, creating the "calculate variance" function etc, and allow them to make their own value), if so consider leveraging Jason Davies' science.js.

This is not at all super important, but the raster lines render on top of the bars. Usually they only appear on the background.

Choropleth support with geojson projected map

Hi,
Thanks for ver 0.6.0, good work.

Just one thing to mention here (just before I go on holiday - not much time to submit propose a push) : I would suggest that _chart.anchor accept a dom arguments so that you can call the creation of a chart on a node that has already been selected.

_chart.anchor = function(a) {
        if (!arguments.length) return _anchor;
        if (a instanceof Object) {
            _anchor = a.anchor();
            _root = a.root();
        } else {
            _anchor = a;
            _root = d3.select(_anchor);
            dc.registerChart(_chart);
        }
        return _chart;
    };

This might do it (but there are certainly other ways) - not tested:

_chart.anchor = function(a) {
        if (!arguments.length) return _anchor;
        if (typeof a.anchor === 'function') { 
            _anchor = a.anchor();
            _root = a.root();
        } else {
            _anchor = a;
            _root = d3.select(_anchor);
            dc.registerChart(_chart);
        }
        return _chart;
    };

Cheers,
C.

Is there a way to preserve state so that I can make a selection and then share that selection with someone else? ie. If I select a certain range, a URL could be set that would preselect the same regions. This would be useful when wanting to collaboratively work on a dataset with someone.

If this isn't available, consider this a feature request.

Keep up the awesome work!

When hovering over the barchart or linechart, the mouse cursor changes into a cross, which is a visual indication that the plot is interactive and there can be clicked.

It would be nice to do something similar for the pie/bubble chart, when hovering over a clickable area of the plot. E.g. change the cursor in a hand or so. When displaying the pie-chart like this, it is not obvious that the chart is in fact interactive and can be clicked.

Maybe all it takes is simply to turn the pie-slides into svg (anchor) elements or so because then the browser automatically knows to treat is as a link (even though the actual handler might not be a real hyperlink)

I think it would be very useful, if it could visualize more then one graph simultaneously in the same chart. It's helpful when you analyse datas! Thanks!

Labels on pie charts get clipped under adjacent slices. Labels should probably be moved to a new 'g' in order to appear on top of all slices

Perhaps it's there and I'm missing it, but it would be nice to be able to select multiple segments in a pie chart, perhaps by using shift+click.

For the pie/donut chart: when a category is clicked that is currently already selected, the intuitive thing is that it unselects the category, i.e. resets the pie chart.

I think this could work for the bubble chart as well. This way you don't need the somewhat ugly 'reset' button for these charts.

I was wondering if it would be too much trouble to move the selected classes from the element itself, i.e. in the bubblechart the 'selected' class is added to the circle, and in the piechart it is added to the pie-slice path, to the g element which contains the selected element, so that the underlying html would look more or less like this:

   <g class='selected'><path></path></g>

The reason I ask this, is that doing more customized css transitions, especially for instances where there are multiple elements contained in that g element (i.e. there is a path and a text element), would be easier since you could just target the 'selected' g element and then target the nested children elements.

Thank you for the library by the way. It is really quite wonderful to work with.

Allow the user to interact with the table (click a column header for example) to determine the sorting by and order. This would add a TON of value to working with the data.

It also might be useful (though possibly muddled at the dc.js layer of abstraction) to allow for different top level locations. By this I mean moving the top 10, to the 10 below a certain quantile value (say the median) or some other statistical measurement. I'm not sure what kind of value this would add to analysis, but definitely something to think about.

Hi Nick,

I'm really enjoying playing with your dc.js package here. I've started right off on a bubbleChart, and I've run into this issue: I can define a color scale, but it's not clear to me how I can bind it to a dimension other than the one that is bound to the entire chart by the .dimension call.

I'm looking at your example, and I can't really glean from that (maybe I should just build it locally and look) by what domain the color range varies across. I can't detect a transition by years, or by percent gain/loss, or by point gain/loss. All colors seem to fill bubbles clustered near [0,0] on the graph.

I have four dimensions I want to display. X & Y obviously, then another that drives the size of the bubbles, and then a fourth that is a kind of heatmap on the bubbles. So I want to define a hot-to-cold color range (doable) and then apply it to a specific dimension somehow. Ways I could think of would either be to add some .colorDimension call or to define a .colorValueRetriever on the bubbleChart function and then stash associated color with a point during the reduceAdd.

I was thinking of exploring this idea in my own fork, but I wanted to run the idea past you as I'm very fresh to your code base (and to d3 (and to crossfilter (and to javascript!))) and could easily be missing something. If you think I am misguided, I'd love a pointer. If you think I'm on to something, then I'd love to hear that too and maybe you'll see a pull request soon.

thanks - Doug

I have ported most of my application from native crossfilter + d3 to dc.js, however I noticed that things have become considarably slower. Is there any additional overhead in using dc.js? Are there options in the chart constructors that I can tweak to boost performance?

The only value I've really seen of using a donut chart versus a pie chart is to allow the labels to lay inside of the chart itself, it might be useful to consider adding this support to not just that chart but letting developers choose the position via a method chained to the end. And also to allow the labels to be represented by data (not sure how one would use this).

Rename value retriever to accessor in dc API for better consistency with d3 convention

Simple barchart, in firefox looks ok:

But in chrome the axis seems to be placed 1px too much to the left, as well as to the top.

Note how in chrome, the left-most bar overlaps the y-axis, and also there is an additional line of whitespace between the bars and the x-axis. So the axis seems to be rendered 1px to far right and 1px to far down.

Currently dc.css contains a mix of chart layout and stuff specific to the example/demo. When it is included in an application without modifying, it results in side-effects.

Would it be possible to split this into two files? One general purpose dc.css that sets nice style defaults for classes .chart, .pie-slice, etc, and which can directly be included in applications? And then another one with stuff that is specific to your demo/examples?

Also, .chart is a very general purpose term. Maybe it would be better to do .dc-chart or add two classes .dc.chart. You could automatically add these classes to the element when the chart is initiated through dc.barChart or dc.pieChart.

I personally think the mapping of order to position on the pie chart is really awesome, and am not sure if I even agree with my proposed change. However, it might be useful to consider allowing the developer to choose which method they order the pie chart with (e.g the key or the value, or some order like day of the week).

i'm having a hard time getting your example to work, any chance you can whip up a simplified but fully working example with a single chart and put it in an /examples directory from your source? I've tried to grab the example from the github page and grabbed the data via wget ndx.csv but it will not render. Also it is very unclear if renderAll() fails as it does for me, how do you render a single chart? gainOrLossChart.render() and gainOrLossChart.doRender() don't seem to do anything but return a chart object. I have no svg anywhere in my source before or after trying to .render() or dc.renderAll()

As a side note your example shows data.csv which does not exist on github, so if you want to see what the data looks like it can be confusing as to where to find the csv file.

BTW the error I'm seeing is: Uncaught TypeError: Cannot set property 'group_index' of null dc.js:1554

When interacting with the preview, click loss on the days gain pie chart, the bubble chart will go out of range. I realize that this was set when calling the bubble chart to be a not-dynamic value, changing this (along with the way the value % is calculated in gain loss chart) will make users trust the library more. How could this be changed to accurately display the data? Should the domains change as the user interacts with the data or should it be the developers job to find an all encompassing domain? (Arguably both methods should be available but currently only one seems to be available).

Margins bottom is not working properly. The chart gets stretched if a large bottom margin is specified.

Not quite sure if this is a bug in dc.js or d3, but for some reason the following plot has x ticker label April where it should say Apr 01.

I am using:

   .x(d3.time.scale().domain([new Date(2012, 2, 23), new Date(2012, 5, 8)]).rangeRound([0, 10 * 77]))
   .round(d3.time.day.round)
   .xUnits(d3.time.days)

Use d3's stack layout in stackable-chart.js instead of a custom layout implementation.

Allow user to display custom title on bar chart as well as custom :hover css style

Create debug layer on bubble overlay chart to make finding x,y coordinate easier

I have a few bubblecharts tied to one dataset, and it appears that a selection in one bubblechart does not filter other bubblecharts to that single selection.
Is it also possible to have reset filter behavior similar to the other chart type (clicking outside of the selected area resets the filter)?

Hi,

I'm attempting to create a yearly bubble chart with 3 dimensions: total amount of transaction (summed by broker id), net transfer, and total fee amount.

I'm having an issue when I filter other associated charts, it changes the size of the bubbles. However, the x-axis increases by a factor of 1 each time I filter.

I think it's an issue with the init function in the brokerIdDimensionGroup, but I can't seem to pin it down.

I've got the following code for my dimension and group:

var brokerIdDimension = trans.dimension(function(d) {
            return d.broker_id;
        });

        var brokerIdDimensionGroup = brokerIdDimension.group().reduce(
            //add
            function(p,v) {
                ++p.count;
                p.totalAmount += Math.abs(v.total_amount);
                p.totalFeeAmount += Math.abs(v.total_fee_amount);
                p.netTransfer += Math.abs(v.net_transfer);
                return p;
            },
            //remove
            function(p,v) {
                --p.count;
                p.totalAmount += Math.abs(v.total_amount);
                p.totalFeeAmount += Math.abs(v.total_fee_amount);
                p.netTransfer += Math.abs(v.net_transfer);
                return p;
            },
            //init
            function() {
                return { count: 0, totalAmount: 0, totalFeeAmount: 0, netTransfer: 0 };
            }
        );

And my bubble chart:

var bubbleChart = dc.bubbleChart("#broker-id-bubble-chart")
            .width(1000) // (optional) define chart width, :default = 200
            .height(300) // (optional) define chart height, :default = 200
            .transitionDuration(1000) // (optional) define chart transition duration, :default = 1000
            // (optional) define margins
            .margins({top: 40, right: 100, bottom: 30, left: 80})
            .dimension(brokerIdDimension) // set dimension
            /* Bubble chart expect the groups are reduced to multiple values which would then be used
            * to generate x, y, and radius for each key (bubble) in the group */
            .group(brokerIdDimensionGroup)
            // (optional) define color domain to match your data domain if you want to bind data or color
            //.colorDomain([-1750, 1644])
            // closure used to retrieve x value from multi-value group
            .keyAccessor(function(p) {
                return p.value.totalAmount;
            })
            // closure used to retrieve y value from multi-value group
            .valueAccessor(function(p) {
                return p.value.netTransfer;
            })
            // closure used to retrieve radius value from multi-value group
            .radiusValueAccessor(function(p) {
                return p.value.totalFeeAmount;
            })
            // (optional) whether chart should rescale y axis to fit data, :default = false
            .elasticY(true)
            // (optional) whether chart should rescale x axis to fit data, :default = false
            .elasticX(true)
            .maxBubbleRelativeSize(5)
            .x(d3.scale.linear().domain([0, 3000000]))
            .y(d3.scale.linear().domain([0, 2000000]))
            .r(d3.scale.linear().domain([0, 50000]))
            // (optional) whether chart should render labels, :default = true
            .renderLabel(true)
            // (optional) closure to generate label per bubble, :default = group.key
            .label(function(p) {return p.key;})
            // (optional) whether chart should render titles, :default = false
            .renderTitle(true)
            // (optional) closure to generate title per bubble, :default = d.key + ": " + d.value
            .title(function(p) {
                return "a test title";
            })
            // (optional) render horizontal grid lines, :default=false
            .renderHorizontalGridLines(true)
            // (optional) render vertical grid lines, :default=false
            .renderVerticalGridLines(true);

Display mouse over tooltip on line/area chart, since standard svg title will not work in this case. Custom mouse over dot highlighting and tooltip display will need to be implemented.

Hi Nick:

Thank you for creating this great library.

I'm using the dataTable chart to showcase results for a data set, similar to your example. However, I'm not sure how the grouping feature actually works. The comments noted the following: data table does not use crossfilter group but rather a closure as a grouping function

Is there a built in ability to allow for grouping via dataset?

ie. I have a list of projects, some are 'liked', some are 'disliked'. Default state is 'normal'.

In the example above, the resulting dataTable chart (ideally) would show a listing organized as:

1. liked
2. liked
3. liked
4. normal
5. disliked
6. disliked

I'm able to do this with a single 'liked' scenario (ie. return !d.is_liked;), but not with multiple scenarios.

Is there a way to do this with dataTable group ?

David

Thanks for the library!
It seems that the enter/update/remove nodes for bubbleCharts are not consistent.
On enter, each data item creates a 'g.node', but on remove it only selects 'circle.bubble'.

bubble chart should allow configurable min radius for rendering label so user can choose when to not render label on bubbles.

It would be useful to be able to add custom events to dc.renderAll. For example if you want to do some custom document updates after the rendering every time there has been an interaction.

Use html table for data-table widget instead of div and span block element for better tabular view support.

There is a "slip of pen" in line 40 in env-data.js.
The function gives back »status« instead of »region«.

Support custom svg map with bubble overlay using x,y coordinates.

I want to suggest adding a feature to sort the values in the data table. The reason I'm requesting this is that I have multiple keys in my chart that happen on the same day. The days are sorted but the values in the days are only sorted by natural sort order (which is descending) and I want to visualize the them with the highest numbers first.

dc.dataTable("#data-table")
  // set dimension
  .dimension(dateDimension)
  // data table does not use crossfilter group but rather a closure
  // as a grouping function
  .group(function(d) {
    return d.dd.getFullYear() + "/" + (d.dd.getMonth() + 1);
  })
  // (optional) max number of records to be shown, :default = 25
  .size(10)
  // dynamic columns creation using an array of closures
  .columns([
    function(d) { return d.date; },
    function(d) { return d.open; },
    function(d) { return d.close; },
    function(d) { return Math.floor((d.close - d.open)/d.open*100) + "%"; },
    function(d) { return d.volume; }
  ])
  // (optional) sort using the given field, :default = function(d){return d;}
  .sortBy(function(d){ return d.dd; })
  // (optional) sort order, :default ascending
  .order(d3.ascending)
  // (optional) sort order of the close column of the table
  .sortValues(function(a,b) {
    return b.close - a.close
  });

New nestEntries

return d3.nest()
  .key(_chart.group())
  .sortKeys(_order)
  .sortValues(_chart.sortValues())
  .entries(_sort(entries, 0, entries.length));

New Sort Values function on Data Table

_chart.sortValues = function(_) {
  if (!arguments.length) return _sortValues;
  _sortValues = _;
  return _chart;
}

Use boostrap instead of custom css on example pages for better maintainability.

Distance between bars are not consistent.

you can specify colors for pie, but not bar charts, you may want to have consistent colors for both charts

I am trying to port a chart I previously made with crossfilter to dc.js. However the chart looks malformed:

I think the problem has to do with the rangeRound function? In the crossfilter examples, rangeRound is used in all bar charts. But this doesn't work in dc.js?

dc.barChart("#hour-chart")
.width(280) // (optional) define chart width, :default = 200
.height(120) // (optional) define chart height, :default = 200
.dimension(hour) // set dimension
.group(hours) // set group
.elasticY(true)
.x(d3.scale.linear().domain([0, 24]).rangeRound([0, 10 * 24]))

Really, really great to see this. Thanks !

One issue I see coming rapidly is the fact that charts are registered globally (under dc._charts). This will hit in the case you run multiple crossfilters in the same page (like you would do in a web-based analytic package) all associated with a set of different dc.charts.

You probably want to re-render/redraw only relevant charts (i.e. only those associated with crossfilter being filtered) after filtering. I do not see hot this would be possible with the current setup.

We maybe need another dc objects that would contain 1 crossfilter and its associated charts, and register the charts against it?

Cheers,
C.

I'm struggling to understand how to do a stacked chart

if my data looks like:

month,account,product,cost
1,a,foo,1
1,a,bar,2
2,a,foo,3
2,a,bar,4

how might i get a stacked chat which shows the monthly sum for each product type? I'm not clear on what .group and dimension are actually doing in your layout.

happy to provide real data source if you need it

Hi, I am using your framework and everything is working perfectly - except I am filtering externally like in example of crossfilter or my example below. If I am filtering externally (not using the charts, using the hyperlink), the dataset increases each time after filter and reset with plus 2 records. The data becomes this way inconsistency.
Could you test, if this data-inconsistency occurs at your server as well? And do you have might an advice for me?

Here is my code I used for showing a bunch of date on a bar-chart:

//Chart:
var recentlyChart = dc.barChart("#recently-chart");

//Dimension and group:
var recentlyAllDimension = ndx.dimension(function(d) { return d.dd; });
var recentlyAllGroup = recentlyAllDimension.group();

//Chart-Initialisation:
recentlyChart.width(440)
.height(180)
.dimension(recentlyAllDimension)
.group(recentlyAllGroup)
.round(d3.time.day.round)
.xUnits(d3.time.days)
.x(d3.time.scale().domain([minDate, maxDate]));

//Last month as an example:
var monthAgo = d3.time.day.offset(new Date(), -30);

//Filter-function for external use:
window.filter = function(filters) {
if(filters)
{
switch(filters)
{
case "monthAgo":
{
recentlyChart.filter([new Date(), monthAgo]);
break;
}
}
}
};

//Invoking the filter as a hyperlink:
< a href="javascript:filter('monthAgo');dc.redrawAll();">monthAgo< /a>

Implement view finder capability on all coordinate grid chart including composite chart

The blue mask that overlays the selected/blue area (i'm not sure what it is called) is covering the top-margin as well. I don't think this was the case in version 0.7. I created a very big top margin in the example above to show the issue.

It is probably better if it does not cover the top-margin area, just like it does not cover the left, right and bottom margin of the chart.

option to turn off brushes and add option to add brush titles.

sometimes you may want to see stack values in a bar chart . multiple brush on same time dimension is redundant

if you did this as a separate chart type that would also work.

single function that resets all the charts and their filters.