Map and Pie color not filtering when selected

[Musa I Malik]

Hi Gordon,

This is a follow up to my question on the previous thread. I've linked a small demo of the issue. There is no problem with filtering just with the color for the map and pie. I had this version of code running in a Javascript project and it worked perfectly. My projected wanted a transfer to angular 8 and thats when I noticed this. I'm also putting my .ts component code below. Thank you!!

https://drive.google.com/file/d/1PD4-4pSsDEGjLKhy_1Ewlr-G7S0vlVoP/view?usp=sharing

import { Component, AfterContentInit } from '@angular/core';

import * as d3 from 'd3';

import * as dc from 'dc';

import crossfilter from 'crossfilter2';

import { Dimension } from 'crossfilter2';

@Component({

  selector: 'app-charts-one',

  templateUrl: './charts-one.component.html',

  styleUrls: ['./charts-one.component.css']

})

export class ChartsOneComponent {

  constructor() {

  }

  ngAfterContentInit() {

    var scatterChart = dc.scatterPlot('#scatter-chart');

    var worldChart = dc.geoChoroplethChart('#world-chart');

    var zoneChart = dc.pieChart('#zone-chart');

    var govChart = dc.pieChart('#gov-chart');

    var incomeChart = dc.pieChart('#income-chart');

    var numbChart = dc.numberDisplay('#number-chart');

    var tableChart = dc.dataTable("#table-chart");

    d3.csv('assets/FPGR.csv').then(function(csv){

      console.log(csv);

      var data = crossfilter(csv);

      var country = data.dimension(function(d){

        return d['COUNTRY'];

      });

      var rank = country.group().reduceSum(function(d){

        return d['RANK_FREEDOM'];

      });

      var zone = data.dimension(function(d){

        return d['ZONE'];

      });

      var zoneGroup = zone.group().reduceCount();

      var gov = data.dimension(function(d){

        return d['REGIME'];

      });

      var govGroup = gov.group().reduceCount();

      var income = data.dimension(function(d){

        return d['IncomeGroup'];

      });

      var incomeGroup = income.group().reduceCount();

      var numberZone = data.dimension(function(d){

        return d['ZONE'];

      });

      var numberGroup = numberZone.groupAll().reduceSum(function(d){

        return parseFloat(d['ABUSE_SCORE']);

      });

      var scatter = data.dimension(function(d) {

        return [parseFloat(d['PROGRESS_FREEDOM']), parseFloat(d['RANK_FREEDOM'])];

      });

      var scatterGroup = scatter.group().reduceCount();

      var table = data.dimension(function(d) {

        return parseFloat(d['RANK_FREEDOM']);

      });

      d3.json('assets/countries.geo.json').then(function (countryJson) {

              worldChart.width(900)

                  .height(430)

                  .dimension(country)

                  .group(rank)

                  .colors(d3.scaleQuantize().range(['#67001f', '#b2182b','#d6604d','#f4a582','#fddbc7','#d1e5f0',

                        '#92c5de','#4393c3','#2166ac','#053061'].reverse()))

                  .colorDomain([0, 180])

                  .colorCalculator(function (d) { return d ? worldChart.colors()(d) : '#ccc'; })

                  .projection(d3.geoNaturalEarth1()

                    .scale(160))

                  .overlayGeoJson(countryJson.features, 'country',

                      function (d) {

                        return d.properties.name;

                      });

              scatterChart.width(700)

                  .height(430)

                  .x(d3.scaleLinear().domain([-40, 45]))

                  .y(d3.scaleLinear().domain([0, 200]))

                  .xAxisLabel("CHANGE IN RANK")

                  .yAxisLabel("RANK 2019")

                  .symbolSize(6)

                  .clipPadding(10)

                  .dimension(scatter)

                  .group(scatterGroup);

              zoneChart.innerRadius(40)

                  .width(300)

                  .dimension(zone)

                  .group(zoneGroup);

              govChart.innerRadius(40)

                  .width(300)

                  .dimension(gov)

                  .group(govGroup);

              numbChart.formatNumber(d3.format('.1d'))

                  .valueAccessor(function(d){

                    return d;

                  })

                  .group(numberGroup);

              incomeChart.innerRadius(40)

                  .width(300)

                  .dimension(income)

                  .group(incomeGroup);

              tableChart.dimension(table)

                  .section(function(d){

                    return "Press Index";

                  })

                  .size(Infinity)

                  .showSections(false)

                  .columns([

                      function(d){ return d['RANK_FREEDOM']; },

                      function(d){ return d['COUNTRY']; },

                      function(d){ return d['ZONE']; },

                      function(d){ return d['REGIME']; },

                      function(d){ return d['IncomeGroup']; },

                      function(d){ return parseFloat(d['ABUSE_SCORE']); },

                      function(d){ return d['PROGRESS_FREEDOM']; }

                    ]);

      dc.renderAll();

    });

  });

}

}

[Gordon Woodhull]

From your video, it looks like the CSS is not getting properly applied for the choropleth, but otherwise it seems to work, right?

As I said before, I can't really help very well without a running example - otherwise I have no way of running your code and troubleshooting what is going wrong.

But please look at this example:

http://dc-js.github.io/dc.js/vc/index.html

Right-click one of the states and inspect the DOM in the devtools.

If you click that state, the enclosing <g> gets the .selected CSS class added.

If you click on a different state, the enclosing <g> gets the .deselected class added.

The deselected class is supposed to trigger this rule:

.dc-chart g.deselected path {

 fill: #808080;

}

https://github.com/dc-js/dc.js/blob/53970802da771768a39fcba8d81b823eeacd8eb7/style/dc.scss#L133-L140

You could either figure out why the CSS rules are not getting triggered, or you could write new CSS rules that pick up on this class being added/removed

 

--
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/c0e07c05-9846-426c-a64e-db7d0f6a6b88%40googlegroups.com.

[Musa I Malik]

You were spot on. Thank you Gordon!

I was not importing the dc.css file correctly in my global stylesheet. I thought doing it at the component level would be sufficient but now it all works great. Thanks again!

To unsubscribe from this group and stop receiving emails from it, send an email to dc-js-us...@googlegroups.com.

[Tejas R]

Hi Musa I Malik 

am trying to create a angular app with dc-js, but am getting errors for crossfilter functions like saying ccrossfilter2__WEBPACK_IMPORTED_MODULE_3__ is not a function,  Can you please help me to solve this. or any dc-js angular examples in a public git

[vivek raju]

Hi Tejas, 

     

1. Run this command in your project directory npm i dc @types/dc crossfilter2 d3 @types/d3 , this will install dc.js, d3.js, crossfilter.js and it's dependencies.

2. Go the to node modules folder and navigate to crossfilter2 folder, find index.d.ts file and replace the line export = crossfilter with export default crossfiler

3. Remember to import the dc.css file in your global stylesheet.

4. Go to any of your app components and import the following 

  import * as d3 from 'd3';

  import * as dc from 'dc';

  import * as crossfilter from 'crossfilter2';

5. Run a sample dc.js https://github.com/dc-js/dc.js/blob/master/web-src/examples/bar.html example in your app.component.ts

Also the latest version of dc.js does not use the charts as constructor anymore, so drop  the `new` key word before dc.Barchart you can instead write dc.barChart('#div')

 

 

[Gordon Woodhull]

Thanks Vivek. It’s too bad these workarounds are needed!

No harm in it, but your last comment is backward. In the past dc.js did not use classes and the old syntax is dc.barChart(...)

As of 4.0 it does use classes and the new syntax is new dc.BarChart(...) 

It doesn’t matter, either syntax should be valid for years going forward.

On Apr 18, 2020, at 2:08 PM, vivek raju <rapsta...@gmail.com> 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/7da223f2-d058-4782-b943-f8ac2e361a83%40googlegroups.com.