Angular and DC/Crossfilter

[Isaac Thimbleby]

Hi,

I've got my Crossfilter/D3/DC code working on pure JS. However I'm now trying to move it across to angular. 

I am attempting to follow the advice in responses to these two questions on stack exchange:

 - https://stackoverflow.com/questions/48042039/how-to-put-dc-js-and-crossfilter-js-html-page-in-a-angular-component

 - https://stackoverflow.com/questions/48104529/dc-js-charts-with-angular2.

However calling dimension.group().reduceCount() causes chrome to pause the code, and offer stepping through the crossfilter code (starting at a line 851, just after the comment '// While new keys remain…') as it believes it has entered an infinite loop - and it certainly appears to have done so. I haven't yet been able to find any help specific to this problem, and wondered if someone here could help?

I've included an excerpt of my current code below, though I'm sure there will be multiple things wrong with it, even after solving this problem.

  

    export class ChartComponent implements OnInit {

        CountryChart   = dc.pieChart("#HollowPie1");

        CarbonChart    = dc.pieChart("#HollowPie2");

    

        initData() {

            var data = this.mergeQus(QUESTION1, QUESTION2);

            console.log(data)

    

            var ndx = crossfilter(data);

            console.log('ndx done');

            var countryDim  = ndx.dimension(function(d) {return d.TradingCountryAddress;});

            console.log('countryDim done');

            console.log(countryDim)

            var countryGroup = countryDim.group().reduceCount();

            console.log('countryGroup done');

            var carbonDim  = ndx.dimension(function(d) {return d.CarbonFootprint;});

            console.log('carbonDim done');

            var carbonGroup = carbonDim.group().reduceCount();

            console.log('carbonGroup done');

    

            this.CountryChart

                .width(200).height(200)

                .dimension(countryDim)

                .group(countryGroup)

                .innerRadius(50)

                .slicesCap(5)

                .on('pretransition', function(chart) {

                    chart.selectAll('g.pie-slice')

                            .attr('stroke-width', 1.5)

                            .attr('stroke', 'white')

                })

        

            this.CarbonChart

                .width(200).height(200)

                .dimension(carbonDim)

                .group(carbonGroup)

                .innerRadius(50)

                .slicesCap(5)

                .on('pretransition', function(chart) {

                    chart.selectAll('g.pie-slice')

                            .attr('stroke-width', 1.5)

                            .attr('stroke', 'white')

                })

    

            dc.renderAll();

        }

        constructor() {}

        ngOnInit() {

            this.initData()

        }

    }

[Isaac Thimbleby]

* the line of code:

            var data = this.mergeQus(QUESTION1, QUESTION2); 

works, so I omitted the function mergeQus.

[Gordon Woodhull]

I'm not too familiar with these angular wrappers, but it's hard to think of any way that angular could be involved in this problem, since there isn't any reason for crossfilter to call into angular.  

Infinite recursion in crossfilter is usually caused by unsortable keys. Specifically crossfilter requires "naturally ordered values" with no nulls, NaNs, or mixed types:  

https://github.com/crossfilter/crossfilter/wiki/Crossfilter-Gotchas#natural-ordering-of-dimension-and-group-values  

I don't think I have seen infinite loops but this seems like the thing to check first.

Although you got your code working outside of angular, maybe something changed in the way you read your data, such that the relevant dimension key is not always valid?

If it turns out to be something else, I'd be glad to diagnose a running example. Kind of hard to guess what is going wrong without running code.

P.S. Not that it's likely to matter, but I think you must have an old version of crossfilter - that line appears much later than one 851 in the versions I consulted.

--
You received this message because you are subscribed to the Google Groups "dc-js user group" group.
To unsubscribe from this group and stop receiving emails from it, send an email to dc-js-user-gro...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/dc-js-user-group/10e28507-81ef-45f6-8534-ca31ce7c4a56%40googlegroups.com.

[Isaac Thimbleby]

I think you are probably right. When I step through the crossfilter code, a number of things get labeled as undefined.

 Which I find curious, as when I console.log the data it looks identical to how it looked in the non-angular version. I will investigate further now I have some direction.


Also thanks for catching that my Crossfilter was out of date.

[Isaac Thimbleby]

You were right. Angular doesn't wait for code to finish before moving on to the next line of code.

As a result although the first 100 lines of the crossfilter looked ok, after that was undefined. 

This was happening as the merge on the data hadn't finished running when I tried to pass it to crossfilter.

[Gordon Woodhull]

That's interesting. I didn't know that Angular could have effects on the execution order of code. Good to know.

Thanks for following up!

--

You received this message because you are subscribed to the Google Groups "dc-js user group" group.
To unsubscribe from this group and stop receiving emails from it, send an email to dc-js-user-gro...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/dc-js-user-group/404b3912-5e03-49cd-a14c-c6fbb55d9bb0%40googlegroups.com.

[Isaac Thimbleby]

No problem - thank you for being so responsive and helpful!

It is working now - generally speaking.

However some functionality has changed from the non-angular version; specifically that when I click on a segment, although all charts have a smooth transition to their new sizes, the non-selected segments on that pie no longer grey out.

I'm not too worried about this right at the moment (eventually I'd want to fix it), but wondered if you had a guess as to what might be happening?

Another change is in how the charts are labeled, and possibly also how nan values are handled. 

Is it possible that some of these changes are due to using a more recent version of dcjs?

[Gordon Woodhull]

Did you include dc.css?

--

You received this message because you are subscribed to the Google Groups "dc-js user group" group.
To unsubscribe from this group and stop receiving emails from it, send an email to dc-js-user-gro...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/dc-js-user-group/c45ecd9e-8bbf-4eaf-8635-83b462268798%40googlegroups.com.

[Isaac Thimbleby]

Nope! 

I have now, and it fixes it perfectly. Thank you again!

[Musa I Malik]

Hello!

I am facing a similar issue, specifically when creating a geochoropleth world chart in angular 8. Countries only grey out when filtered by some other chart, however if I click on a specific country individually, it does not bring that country into focus like you would expect. Do you have any idea what might be up? I added the dc.css file to styles in my .ts component file, but that didn't help..

[Gordon Woodhull]

Hi Musa!

This sounds like a different problem. 

Does anything at all happen when you click on a country? (Does it cause filtering?)

Is it possible for you to share a running example, either your site or a block or fiddle or something?

The geochoropleth does work slightly differently from the other charts, as explained in this issue: https://github.com/dc-js/dc.js/issues/1268

I doubt if that is related to what you’re talking about though. Kind of hard to guess what might be going wrong without a running example, sorry.

On Jan 22, 2020, at 4:29 AM, Musa I Malik <mim...@nyu.edu> wrote:



--

You received this message because you are subscribed to the Google Groups "dc-js user group" group.
To unsubscribe from this group and stop receiving emails from it, send an email to dc-js-user-gro...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/dc-js-user-group/b454286b-3336-43b0-b2db-459a842d0a70%40googlegroups.com.