I am new in d3.js started learning two-three weeks ago and would like to know how I can aggregate multiple columns of a json file that is loaded?
Here is what I tried so far:
d3.json("https://data.cityofnewyork.us/resource/jb7j-dtam.json").then(loadData);
function loadData(data) {
let aggregate = ExtentValues(data);
return aggregate;
}
const ExtentValues = function(data) {
let min = d3.min(data, (fn) => {return [fn. year, fn.deaths, fn.death_rate, fn.age_adjusted_death_rate] });
let max = d3.max(data, (fn) => {return [fn. year, fn.deaths, fn.death_rate, fn.age_adjusted_death_rate] });
let mean = d3.mean(data, (fn) => {return [fn.deaths, fn.death_rate, fn.age_adjusted_death_rate] });
let median = d3.median(data, (fn) => {return [fn.deaths, fn.death_rate, fn.age_adjusted_death_rate] });
let sum = d3.sum(data, (fn) => {return [fn.deaths, fn.death_rate, fn.age_adjusted_death_rate] });
let std = d3.deviation(data, (fn) => {return [fn.deaths, fn.death_rate, fn.age_adjusted_death_rate] });
return ["Minimum: ", min, "Maximum: ", max, "Mean/Avg: ", Number(d3.format(",.3f")(mean)), "Median: ", median, "Summary: ", sum, "Std: ",Number(d3.format(",.3f")(std))]
}
// The output min and max returns the expected values, but the rest are NaN
I browsed on internet to find out a solution for that, but there is not much information about.
Hi, I’ve loaded the dataset in this notebook Aggregating data / recifs / Observable to try and answer, but it would be useful to get more details about the type of results you are looking for.
To get the average age_adjusted_death_rate, for example, you could write
d3.mean(data, (d) => +d.age_adjusted_death_rate)
but this is an average across all rows, and I’m not sure about what it might mean as a statistics.
Don’t hesitate to play with that notebook to get a sense of how d3 functions work.
Thanks for your reply. Indeed, the data aggregation perfectly works for a single column as you showed and it is also undeniable. I am trying to aggregate multiple columns instead of typing each column seperately that I have only succeeded with min and max.
I think there is a way to get average, median, sum, std values of all numeric column values in d3.js like in other programming languages e.g. (Py, R, Java). By iterating the data I got null for all columns.
Or by nesting the data to get aggregation of multiple columns the result undefined:
const ExtentValues = function(data) {
let metrics = d3.nest()
.key(function(v) { return v.year; })
.rollup(function(dv) { return {
min : d3.min(dv, fn => {+fn.deaths, +fn.death_rate, +fn.age_adjusted_death_rate} ),
max : d3.max(dv, fn => {+fn.deaths, +fn.death_rate, +fn.age_adjusted_death_rate} ),
avg: d3.mean(dv, fn => {+fn.deaths, +fn.death_rate, +fn.age_adjusted_death_rate} ),
median: d3.median(dv, fn => {+fn.deaths, +fn.death_rate, +fn.age_adjusted_death_rate} ),
std : d3.deviation(dv, fn => {+fn.deaths, +fn.death_rate, +fn.age_adjusted_death_rate} ),
sum: d3.sum(dv, fn => {+fn.deaths, +fn.death_rate, +fn.age_adjusted_death_rate} )
};
}).entries(data).sort((a, b) => b.year - a.year);
return metrics;
}
// result undefined of sorted in descending order column year
The purpose of the aggregation multiple numeric column values is I would like to display an exploration statistics on a page when the users mouse over the column.
Can you give me a bit direction or sources to solve it?
Thanks Fil for the direction how to iterate columns in d3.js. In the notebook of d3.js you code works perfectly and I am getting the point behind the code.
However, if I run your code on my PC (win10) D3.js V5, the code does not work, namely it throws traceback either d3.count() and d3.min, max, mean etc are a function- strange.
I also tried to check the logic of the code in the notebook you created, but it failed too. Here is a screenshot:
