Public
Edited
Jul 15, 2024
Importers
viewof data = dataInput()
dataS = {
let d = new Map();
d.set(0,data.slice(0,500));
return d;
}
_staticsFunction = {
return {min: d3.min}
}
config = [
{
name: "peso 12",
var: "V389",
statistics : [
"mean","deviation"
],
comparison: [
"anova"
]
},
{
name: "CD12",
var: "CD12",
statistics: [
"mean","deviation","min"
],
comparison: [
"anova"
]
}
]
StatisticalCard(dataS,{config: config,_staticsFunctions : _staticsFunction, colorScale:d3.scaleOrdinal(d3.schemeAccent) })
function StatisticalCard(
datas,
{
config,
_staticsFunctions = {},
colorScale = d3.scaleOrdinal(d3.schemeCategory10)
}
) {
let div = d3
.create("div")
.style("display", "flex")
//.style("background-color", "gray")
.style("width", "fit-content");
let staticsFunction = {
mean: d3.mean,
deviation: d3.deviation,
min: d3.min,
max: d3.max,
..._staticsFunctions
};
let pData = generateGroups(datas, config);
addVisualDataGroup(pData);
function addVisualDataGroup(data) {
let groupDivs = div
.selectAll(".vContainet")
.data(data)
.join("div")
.attr("class", "vContainer")
.style("margin", "10px")
.style("background-color", (d) => colorScale(d.id))
.style("padding-right", "10px")
.style("padding-left", "10px")
.style("border-radius", "20px")
.style("border-style", "solid");
groupDivs.append("span").text((g) => "Count: " + g.count);
groupDivs.each(function (g) {
let varDivs = d3
.select(this)
.selectAll(".var")
.data(g.variables)
.join("div")
.attr("class", "var");
varDivs.append("span").text((d) => d.name + ":");
varDivs
.append("ul")
.style("margin-top", "0px")
.selectAll(".statistics")
.data((d) => d.statistics)
.join("li")
.attr("class", "statistics")
.text((d) => d.name + ": " + d.value?.toFixed(2));
});
}
function generateGroups(datas, config) {
let outData = [];
datas.forEach((data, i) => {
let variablesCalculated = [];
config.forEach((variable) => {
let statisticCalculated = [];
variable.statistics.forEach((statistic) => {
statisticCalculated.push({
name: statistic,
value: computeStatistic(data, variable.var, statistic)
});
});
variablesCalculated.push({
name: variable.name,
statistics: statisticCalculated
});
});
outData.push({
id: i,
variables: variablesCalculated,
count: data.length
});
});
return outData;
}
function computeStatistic(data, varName, statistic) {
return staticsFunction[statistic](data, (d) => d[varName]);
}
return div.node();
}
d3 = require("d3@7")
import { dataInput } from "@john-guerra/data-input"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
