Public
Edited
Apr 18, 2023
//viewof selected = navio(data, { height, attribWidth, attribs })
groupsScale = d3.scaleOrdinal(d3.schemeGreys[3])
brushesScale = d3.scaleOrdinal(d3.schemeAccent)
{
G1; G2 // make it reactive on filter updates
return Swatches(groupsScale, {label: "Grupos"})
}
{
G1; G2 // make it reactive on filter updates
return Swatches(brushesScale, {label: "Grupos"})
}
SelectedTime[0][0].__group
configImpact
/*TimeSearcher(transformData(SelectedTime[0],"Code",stages,"CD12").filter(d => d["peso"] < 15000 && d["__time"] > 20 && d["__time"] < 93),"__time","peso","Code",{
defaultAlpha: 0.5,
noSelectedAlpha: 0.01,
selectedAlpha: 0.5,
colorScale: d3.interpolateCool,
doubleYlegend: true,
showGrid: true,
hasDetailed: false,
margin: {left :60,top: 20, bottom: 50, right: 40},
groupAttr: "CD12",
autoUpdate: true,
//curves: curvas
}) */
// Treemap(
// d3.group(data, (d) => d.Iden_Sede),
// {
// // path: (d) => d.name.replaceAll(".", "/"), // e.g. flare/animate/Easing
// // label: (d) => d.name.split(".").pop(), // display text
// // group: (d) => d.name.split(".")[1], // for color; e.g. animate
// // value: (d) => d?.size, // area of each rect
// // title: (d, n) => [n.id, n.value.toLocaleString()].join("\n"), // hover text
// width,
// height: 500
// }
// )
import { navio } from "@john-guerra/navio"
// data
data = FileAttachment("KMC-50k-Base 1993-2022 Jul -20220929.csv.zip")
.zip()
.then((res) => res.file("KMC-50k-Base 1993-2022 Jul -20220929.csv").csv({ typed: true }))
// data10k = FileAttachment("Kanguro_2021_09_26_10k.csv").csv({ typed: true })
data1k = FileAttachment("KMC-1k-Base 1993-2022 Jul -20220929.csv").csv({ typed: true})
curvas = FileAttachment("curvasv2.json").json()
selectedStages = transformData(G1G2, "Code", stages, "__group").filter(
(d) => d["peso"] < 15000 && d["__time"] > 20 && d["__time"] < 93
)
G1G2 = G1.concat(G2)
SelectedTime = {
let aux = [];
SelectedTimeId.forEach((g) => {
let gIds = new Set(g.map((d) => d[0]));
let gData = dataF.filter((d) => gIds.has(d["Code"]) && d["V389"] < 16000);
aux.push(gData);
});
return aux;
}
dataF = data.filter(d => d["ERN_Ballard"] < 50 && d["ERN_Ballard"] > 20)
G1.forEach(d => d["__group"] = nameG1)
G2.forEach(d => d["__group"] = nameG2)
import {Treemap} from "@d3/treemap"
import {searchCheckbox} from "@john-guerra/search-checkbox"
import {TimeSearcher} from "@ivelascog/timesearcher-npm"
import {transformData,stages} from "@ivelascog/to-stages"
import {StatisticalCard, config} from "@ivelascog/statistical-card"
import {comparisionCard} from "@ivelascog/comparison-cards"
import { Swatches } from "@d3/color-legend"
import {FacetedSearch} from "@john-guerra/faceted-search"
import {ViolinPlot, FacetViolinPlot} from "@john-guerra/violin-plot"
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.
