Public
Edited
Nov 7
1 fork
Importers
viewof alphaSelectMinPct = Inputs.range([0.01, 1], {
value: 0.01,
label: "alphaScale min Percentage of Opacity",
step: 0.01
})
selected.brushes
viewof selected = {
const tsEle = TimeSearcher({
target: divTimeSearcher,
brushesControlsElement,
showBrushesControls: true,
y: yAttr,
x: xAttr,
id: IdAttr,
xLabel: "→ " + labelX,
yLabel: "↑ " + labelY,
width: width,
height: 400,
brushCoordinatesElement,
fmtX,
fmtY,
detailsElement: divDetails,
detailsWidth: width / 2,
detailsHeight: 200,
maxdetailsRecords: 100,
maxTimelines,
medianNumBins: 10,
hasDetails,
_this: this,
autoUpdate: false,
showGroupMedian: false
});
// see update
// https://observablehq.com/@ivelascog/timesearcher-plus-usabilidad#selected
tsEle.ts.doubleYlegend = doubleYlegend;
tsEle.ts.margin.right = 50;
tsEle.ts.showGrid = showGrid;
tsEle.ts.stepX = 1;
tsEle.ts.stepY = 100;
tsEle.ts.data(data);
tsEle.ts.addReferenceCurves(curvas);
return tsEle;
}
divTimeSearcher = {
maxTimelines; dataStages; hasDetails; data; xAttr; yAttr; IdAttr; labelX; labelY; showGrid; doubleYlegend;
return htl.html`<div></div>`;
}
brushesControlsElement = {
maxTimelines; dataStages; hasDetails; data; xAttr; yAttr; IdAttr; labelX; labelY; showGrid; doubleYlegend;
return htl.html`<div></div>`
}
// Passively update the widget without recreating it
update = {
const tsEle = viewof selected;
tsEle.ts.defaultAlpha = defaultAlpha;
tsEle.ts.selectedAlpha = selectedAlpha;
tsEle.ts.noSelectedAlpha = noSelectedAlpha;
tsEle.ts.alphaScale.exponent(exp).range([1, alphaSelectMinPct]);
tsEle.ts.showGrid = showGrid;
tsEle.ts.hasDetails = hasDetails;
viewof selected.ts.noSelectedColor = nonSelectedColor;
viewof selected.ts.selectedColor = selectedColor;
viewof selected.ts.defaultColor = defaultColor;
// viewof selected.ts.noSelectedAlpha = 0.6
// viewof selected.ts.selectedColor = "#e0e8fb"
tsEle.ts.render();
}
viewof hasDetails = Inputs.toggle({label: "Show Details", value: true})
viewof showGrid = Inputs.toggle({label: "Show Grid", value: true})
viewof doubleYlegend = Inputs.toggle({label: "Show Double Y Legend", value: true})
brushCoordinatesElement = {
maxTimelines; dataStages; hasDetails; data; xAttr; yAttr; IdAttr; labelX; labelY; showGrid; doubleYlegend;
return htl.html`<div>`
}
viewof IdAttr = Inputs.select(attribs, {
value: "Code",
label: "ID variable"
})
viewof xAttr = Inputs.select(attribs, {
value: "__time",
label: "X Variable"
})
viewof yAttr = Inputs.select(attribs, {
value: "peso",
label: "Y variable"
})
viewof labelX = Inputs.text({label: "Label X: ", value: "Gestational Age (weeks)"})
viewof labelY = Inputs.text({label: "Label Y: ", value: "Weight (gr)"})
viewof data = dataInput({value: dataStages})
dataStages
fmtY = d3.format(".2d")
fmtX = d3.format(".1f")
selected
width = 700
dataStages = transformData(dDataFilter, "Code", stages)
.filter(
(d) => d["peso"] < 15000 && d["__time"] > 20 && d["__time"] < 93
)
dataF = data.slice(0,maxTimelines)
attribs = Object.keys(data[0])
dDataFilter = defaultData.filter(d => d["ERN_Ballard"] < 50 && d["ERN_Ballard"] > 20)
defaultData = 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 }))
curvas = FileAttachment("curvasv2.json").json()
import {transformData,stages} from "@ivelascog/to-stages"
import { dataInput } from "@john-guerra/data-input"
TimeSearcher = {
try {
return await require(`http://localhost:8080/dist/TimeSearcher.js?${Date.now()}`);
} catch (e) {
return await require(await FileAttachment("TimeSearcher@16.js").url());
}
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.