passing an intricate function to .aggs

[pachadotdev]

Hello

I am working with a chilean team that is in charge of analyzing the process of a Constitutional Reform in Chile. I have decided that D3Plus is the best tool to present the results of this process.

This is somehow an interesting project as we are analyzing a process that goes like this:

• Chilean groups from different regions are meeting themselves to discuss the changes to our constitution.
• Lots of people are included here: medical doctors, the police, retired teachers, politicians, LGBT groups, underrepresented religions, etc.
• Every group must submit a report of their thoughts to [www.constitucionabierta.cl](Constitución Abierta).

I still have not uploaded a beautiful result to the official website, but here I have the alpha version of the final visualizations.

I have figured out how to present the results in spanish, with spanish locale, for a spanish speaking audience. What I cannot figure out is how to do a custom aggregation of a certain variable.

The platform (I don't have access to modify how it stores the statistics) registers these principal variables:

• encuentros (number of meetings)
• encuentros_10000hab (number of meetings by geographic division every 10.000 inhabitants)
• idh (human development index by geographic division)

I could find the population of the geographic divisions in another data set to create a treemap divided by population and it looks great:

Now I need to create a treemap divided by "encuentros_10000hab" and "encuentros". Doing a division by "encuentros" is ok but doing a division by "encuentros_10000hab" is not ok as it returns a number that is not correct at depth(0). For example, "Región Metropolitana" should have a value of encuentros_10000hab = 10,000*(encounters/population) = 12.687 and the treemap shows this:

Clearly that region does not have a value of encuentros_10000hab = 701 but at level(1) that variable is correctly displayed:

I was thinking on writing .aggs({"encuentros_10000hab":"mean"}) to obtain a better value at depth(0) but that will be biased.

I guess that I should pass a function that behaves like doing this in Excel:

• population = sumif(...)
• encounters = sumif(...)
• encounters_10000 = 10000*encounters/population

Here is my complete code. Maybe this is useful for an "advanced" example on D3Plus website.

var data = "datos_totales.json";
var visualization = d3plus.viz()
.container("#encuentros_por_regiones_pob")
.data(data)
.type("treemap")
.width(false)
.height(false)
.resize(true)
.id(["region","comuna"])
.size("poblacion")
.color("color")
.format({
  "text": function(text, params) {
    if (text === "poblacion") {
      return "Población";
    }
    if (text === "encuentros") {
      return "Encuentros locales";
    }    
    if (text === "encuentros_10000hab") {
      return "Encuentros locales por cada 10.000 habitantes";
    }
    if (text === "idh") {
      return "Índice de Desarrollo Humano";
    }
    else {
      return d3plus.string.title(text, params);
    }
  },
  "number": function(number, params) {
    var myLocale = {
      "decimal": ",",
      "thousands": ".",
      "grouping": [3],
      "currency": ["$", ""],
      "dateTime": "%a %b %e %X %Y",
      "date": "%m/%d/%Y",
      "time": "%H:%M:%S",
      "periods": ["AM", "PM"],
      "days": ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
      "shortDays": ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
      "months": ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"],
      "shortMonths": ["Ene", "Feb", "Mar", "Abr", "May", "Jun", "Jul", "Ago", "Sep", "Oct", "Nov", "Dic"]
    };
    var localeFormatter = d3.locale(myLocale);
    var numberFormat = localeFormatter.numberFormat(",.2r");
    var formatted = d3plus.number.format(number, params);
      if (params.key === "encuentros") {
        return numberFormat(number);
      }
      if (params.key === "poblacion") {
        return numberFormat(number);
      }
      else {
        return formatted;
      }
  },
  "locale": "es_ES"
})
.font({"family": "Roboto"})
.title("Encuentros locales por región")
.title({"sub": "Divisiones de acuerdo a la población por zona geográfica respecto del total del país"})
.tooltip(["encuentros"])
.tooltip({"share": false})
.labels({"align": "left", "valign": "top"})
.legend(false)
.messages({"branding":true})
.draw();

[davelandry]

A custom function can be passed to .aggs( ) and you can give it any logic you want. The function will be passed an array of the data points to be aggregated. For example, here is what doing a manual sum would look like:

.aggs({"value": function(leaves) {
  return d3.sum(leaves, function(d) { return d.value; });
}})

Additionally, I just found a bug with displaying these custom aggregations in the tooltip, and will be pushing a fix as part of next release.