colourizer()

in src/js/modules/choropleth.js [541:680]

• 69 lines of code
• 15 McCabe index (conditional complexity)

    colourizer() {

        var self = this

        this.scaleType = self.database.mapping[self.database.currentIndex].scale.toLowerCase()

        this.database.election = (this.scaleType === "election") ? true : false ;

        this.database.swing = (this.scaleType === "swing") ? true : false ;

        this.database.key = (this.scaleType != "election" && this.scaleType != "swing") ? true : false ;

        this.keyColors = splitArray(self.database.mapping[self.database.currentIndex].colours);

        this.thresholds = self.database.mapping[self.database.currentIndex].values.split(","); //self.database.key.map( (item) => item.value);

        this.min = d3.min( self.database.data, (item) => item[self.database.currentKey]);

        this.max = d3.max( self.database.data, (item) => item[self.database.currentKey]);

        if (this.thresholds) {
            if (this.thresholds.length == 2) {
                this.min = this.thresholds[0]
                this.max = this.thresholds[1]
            }
        }

        this.median = d3.median( self.database.data, (item) => item[self.database.currentKey]);

        this.mean = d3.mean( self.database.data, (item) => item[self.database.currentKey]);

        this.range = self.database.data.map( (item) => item[self.database.currentKey]);

        if (this.scaleType === "threshold") {
            let thresholds2 = this.thresholds.slice(1, -1); // Remove first and last elements
            console.log("thresholds2", thresholds2)
            console.log("keyColors", self.keyColors)
            this.domain = thresholds2;
            this.color = d3.scaleThreshold().domain(thresholds2).range(self.keyColors)
        }

        else if (this.scaleType === "election") {


                var marginQuint = [6, 12, 18, 24];

                var colBlue = ['rgb(189,215,231)','rgb(107,174,214)','rgb(49,130,189)','rgb(8,81,156)'];
                var colRed = ['rgb(252,174,145)','rgb(251,106,74)','rgb(222,45,38)','rgb(165,15,21)'];
                var colPurple = ['rgb(203,201,226)','rgb(158,154,200)','rgb(117,107,177)','rgb(84,39,143)'];

                var scaleBlue = d3.scaleThreshold()
                                .domain(marginQuint)
                                .range(colBlue);

                var scaleRed = d3.scaleThreshold()
                                .domain(marginQuint)
                                .range(colRed);

                var scalePurple = d3.scaleThreshold()
                                .domain(marginQuint)
                                .range(colPurple); 
        

                this.color = function(margin,party) {
                    if (party === "NAT" | party === "LIB" | party === "LNP") {
                        return scaleBlue(margin)
                    }

                    else if (party === "ALP") {
                        return scaleRed(margin)
                    }

                    else {
                        return scalePurple(margin)
                    }
                }

        }

        //https://interactive.guim.co.uk/embed/iframeable/2019/03/choropleth_map_maker-swingtest-v2/html/index.html
        else if (this.scaleType === "swing") {

            this.colBlue = ['rgb(189,215,231)','rgb(8,81,156)'];

            this.colRed = ['rgb(252,174,145)','rgb(165,15,21)'];

            this.scaleBlue = d3.scaleLinear().domain([0, 10]).range(self.colBlue);

            this.scaleRed = d3.scaleLinear().domain([0, 10]).range(self.colRed);       

            this.color = function(swing, prediction) {

                return (swing < 0) ? self.scaleRed(Math.abs(swing)) : self.scaleBlue(swing) ;               

            }

        } else if (this.scaleType === "ordinal") {

            console.log(self.thresholds, self.keyColors)
            // this.domain = [self.min, self.max]

            this.color = d3.scaleOrdinal().domain(self.thresholds).range(self.keyColors)

        } else if (this.scaleType === "linear median") { // Median

            this.domain = [self.min, self.median, self.max]

            this.color = d3.scaleLinear().domain([self.min, self.median, self.max]).range(self.keyColors);

        } else if (this.scaleType === "linear mean") { // Mean

            this.domain = [self.min, self.mean, self.max]

            this.color = d3.scaleLinear().domain([self.min, self.mean, self.max]).range(self.keyColors);

        } else if (this.scaleType === "quantile") {

            this.domain = [self.min, self.max]

            this.color = d3.scaleQuantile().domain(this.domain).range(self.keyColors);

        } else if (this.scaleType === "quantize") {

            this.domain = [self.min, self.max]

            this.color = d3.scaleQuantize().domain(self.min, self.max).range(self.keyColors);

        } else { // Linear by default

            this.scaleType = "linear"

            this.domain = [self.min, self.max]

            this.color = d3.scaleLinear().domain([self.min, self.max]).range(self.keyColors);

        }

        var output = `Scale type: ${this.scaleType}\nColours: ${self.keyColors}\nThresholds: ${self.thresholds}\nMin: ${this.min}\nMax: ${this.max}\nMedian: ${this.median}\nMean: ${this.mean}\n\n------------------`

    }