Conditional Formatting Break By Chart

[intapiuser]

In this post we will cover two scenarios:

1. Legend-Based Color: conditionally format the elements in order that they appear in the legend (alphanumerically)
2. Value-Based Color: conditionally format the elements by their total sum (or an aggregation of your choosing) 

Example Widgets below are based on Sample Ecommerce

xAxis: Years
Value: Running Sum of Cost
Break By: Country

Legend Based Color

STEPS FOR IMPLEMENTATION:

1. Copy the script below
2. Open the widget you would like to format
3. Open the edit script window from the widget menu
4. Paste the script
5. (optional) Modify the chromatic scale you want to use in the code
6. (optional) Modify the intensity of the scale you want to use
7. For reversing the chromatic scale flip the left and right bounds 
8. left:0, right:1 or left 1, right:0

widget.on('initialized', function(widget){
$('head').append("<script src='https://d3js.org/d3.v5.min.js'></script>")
})

// select color theme from --> https://github.com/d3/d3-scale-chromatic
var colorTheme = 'interpolateRdYlBu';
var leftColorIntensity =0;
var rightColorIntensity = 1;

widget.on("processresult", function(w, args){
   myScale = d3.scaleLinear()
   .domain([0, args.result.series.length])
   .range([leftColorIntensity,rightColorIntensity]);
   args.result.series.forEach(function(v,i){
      var scaled = myScale(i);
      console.log(scaled);
      v.color = d3[colorTheme](scaled);
   })
})

Value Based Color

STEPS FOR IMPLEMENTATION:

1. Copy the script below
2. Open the widget you would like to format
3. Open the edit script window from the widget menu
4. Paste the script
5. (optional) Modify the chromatic scale you want to use in the code
6. (optional) Modify the intensity of the scale you want to use
7. For reversing the chromatic scale flip the left and right bounds 
8. left:0, right:1 or left 1, right:0

widget.on('initialized', (widget) => {
$('head').append("<script src='https://d3js.org/d3.v5.min.js'></script>")
})


// select color theme from --> https://github.com/d3/d3-scale-chromatic
var colorTheme = 'interpolateSpectral';
var leftColorIntensity = 1;
var rightColorIntensity = 0;

widget.on("processresult", function(w, args) {

var originalSeries = args.result.series;
var dict = {};
var counter = 0;

function getSum(total, num) {
return total + num;
}

originalSeries.forEach(
function(i) {
var mySeries = [];
i.data.forEach(function(datapoint) {
mySeries.push(datapoint["y"])
});
var total = mySeries.reduce(getSum);
dict[counter] = total;
counter++;
})

var items = Object.keys(dict).map(function(key) {
return [key, dict[key]];
});

var OrderArray = items.sort(function(first, second) {
return second[1] - first[1];
});

var newSeries = [];

for (var i = 0; i < originalSeries.length; i++) {
var SeriesIndex = parseInt(OrderArray[i][0]);
newSeries.push(originalSeries[SeriesIndex]);
};

counter = 0;
newSeries.forEach(function(item) {
if (counter.toString().length == 1) {
counter = "0" + counter;
}
item["sortData"] = counter.toString() + item["sortData"];
counter++;
});

args.result.series = newSeries;


myScale = d3.scaleLinear()
.domain([0, args.result.series.length])
.range([leftColorIntensity, rightColorIntensity]);

args.result.series.forEach(function(v, i) {
var scaled = myScale(i);
console.log(scaled);
v.color = d3[colorTheme](scaled);
})

})

This post is based on two entries. 

These describe the code components in more detail.

• Sort Chart by Break By Value
• Dynamic Pivot Table Heat Map