D3js - return metrics of multiple columns

JavaScript
1

Hi all,

Can someone please have a look at the script below and give me a direction / hint what’s wrong with it?

This part works.

<html>
  <body>
        <table id="table_data">
        </table>
  </body>
<script scr="d3v5/d3.js"></script>  // using D3 V5

 <script type="text/javascript">
// Data
    d3.json("https://data.cityofnewyork.us/resource/jb7j-dtam.json").then(ShowData)

      // LoadData in html table
      let dct = {};
      function htmlTable(data) {
      for (let i=0; i< data.length; i++) {
      dct.test = data[i];
      };
      const table = d3.select("#table_data") //.attr("cellspacing", "2").attr('cellpadding', "2")
      const thead = table.append("thead")
      .append("tr")       
      .selectAll("th")
      .data( d3.keys(dct.test) )   
                   
      const tbody = table.append("tbody").attr("class", "data_tbody_tbl").selectAll("td").data(data).enter().append("tr")
      // Columns
      thead.enter().append("th").text(function(k) { return k} ).style("background-color", "lightblue")
      // Values of each columns
      tbody.append("td").text(function(v) { return v['year']})
      tbody.append("td").text(function(k) { return k["leading_cause"] })
      tbody.append("td").text(function(k) { return k["sex"] })
      tbody.append("td").text(function(k) { return k["race_ethnicity"] })
      tbody.append("td").text(function(k) { return k["deaths"] })
      tbody.append("td").text(function(k) { return k["death_rate"] })
      tbody.append("td").text(function(k) { return k["age_adjusted_death_rate"] })
      // Adding a bit interactive style
      tbody.on("mouseover", function(k) {
      d3.select(this).style("background-color", "lightgray")
      
      })
      .on("mouseleave", function() {
      d3.select(this).style("background-color", "white")
      })
      }

I am encountering the issue in this part of script. The min and max values returning decimal output which is not a case, then those values are integer.

      // Aggregation
      const ExtentValues = function(data) {
      let metrics = d3.nest()
      .key(function(v) { return v.year; })
      .sortKeys(d3.descending)
      .rollup(function(dv) { return {
            // min : d3.map(col => d3.min(dv, (fn) => {return +fn[col] } ) )
            min : d3.min(dv, fn => {return +fn.deaths, Number(d3.format(",.3f")(+fn.death_rate)), Number(d3.format(",.3f")(+fn.age_adjusted_death_rate)) }),
            max : d3.max(dv, fn => {return +fn.deaths, Number(d3.format(",.3f")(+fn.death_rate)), Number(d3.format(",.3f")(+fn.age_adjusted_death_rate)) } ),
            avg: d3.mean(dv, fn => {return +fn.deaths, Number(d3.format(",.3f")(+fn.death_rate)), Number(d3.format(",.3f")(+fn.age_adjusted_death_rate)) } ),
            median: d3.median(dv, fn => {return +fn.deaths, Number(d3.format(",.3f")(+fn.death_rate)), Number(d3.format(",.3f")(+fn.age_adjusted_death_rate)) } ),
            std : d3.deviation(dv, fn => {return +fn.deaths, Number(d3.format(",.3f")(+fn.death_rate)), Number(d3.format(",.3f")(+fn.age_adjusted_death_rate)) } ),
            sum: d3.sum(dv, fn => {return +fn.deaths, +fn.death_rate, +fn.age_adjusted_death_rate })
      };
      }).entries(data)
      return metrics;
      }
      
      function ShowData(data) {
      htmlTable(data);
      return console.log(ExtentValues(data) );
      }
      // return  decimal  output of min and max
</html>

I am looking the metrics of each numerical columns and not the rows.

Thanks in advance.

Best regards,
Kanatbek

2

So far I have figured out the expected result for nested/ grouped value by column

//  grouped by Year
const groupedValues = function(data) {
          let metrics = d3.nest()
                  .key(function(col) { return col.year; })
                  .sortKeys(d3.descending)
                  .rollup(function(dv) { return {
                        metircs : lst_keys.map(column => {
                          return {
                              column,
                              rows: data.length,
                              min: d3.min(dv, (fn) => {return +fn[column] }),
                              max: d3.max(dv, (fn) => {return +fn[column] }),
                              avg: d3.mean(dv, (fn) => {return +fn[column] }),
                              median: d3.median(dv, (fn) => {return +fn[column] }),
                              std: d3.deviation(dv, (fn) => {return +fn[column] }),
                              total: d3.sum(dv, (fn) => {return +fn[column] }),
                              // cumsum: d3.cumsum(dv, (fn) => {return +fn[column] })
          };
          })
          };
          }).entries(data)
           return metrics;
}

But the same logic does not work for each column - general metrics:

/ Trying to get metrics  without grouping by year, sex leading_causes
let lst_keys = ["deaths", "death_rate", "age_adjusted_death_rate"];
const ExtentValues= function(value) {
                lst_keys.map(function(col) {
                   const val = d3.map(value, (out) => +out[col]);
                       return {
                          col,
                          rows: val.length,     
                          min: d3.min(val),
                          max: d3.max(val),
                          avg: d3.mean(val),
                         std: d3.deviation(val),
                         total: d3.sum(val),
                     // cumsum: d3.cumsum(val)  // traceback d3.cumsum() is not a function
};
});
}

I appreciate any hint.

Best regards,
Kanatbek

3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.