Public
Edited
Jun 14, 2023
renderView = {
maxTimelines; hasDetails; data; xAttr; yAttr; IdAttr; labelX; labelY; showGrid; doubleYlegend; noSelectedAlpha; selectedAlpha; color
return htl.html`
<div>
<div style="display:flex">
<div flex=3>${divTimeSearcher}</div>
<div flex=1>
${brushCoordinatesElement}
<br/>
${brushesControlsElement}
</div>
</div>
<div>${hasDetails ? htl.html`<h3>Details:</h3>${divDetails}`: ""}</div>
</div>
`
}
industries
viewof color = Inputs.color({label:"Non selected Color", value: "#dce0e5"})
viewof defaultColor = Inputs.color({label:"Default Color", value: "#999"})
viewof selected = {
const tsEle = TimeSearcher({
target: divTimeSearcher,
brushesControlsElement,
showBrushesControls: true,
y: yAttr,
x: xAttr,
id: IdAttr,
xLabel: "→ " + labelX,
yLabel: "↑ " + labelY,
overviewWidth: width,
brushCoordinatesElement,
fmtX: d3.timeFormat(fmtXAttr),
fmtY,
detailsElement: divDetails,
detailsWidth: width,
detailsHeight: 200,
// maxTimelines,
showGroupMedian: false,
hasDetails: hasDetails,
maxDetailsRecords:10
});
// see update
// https://observablehq.com/@ivelascog/timesearcher-plus-usabilidad#selected
tsEle.ts.doubleYlegend = doubleYlegend;
tsEle.ts.alphaScale = d3.scalePow().exponent(0.5).range([1, 0.3]);
// tsEle.ts.noSelectedAlpha = 0.9;
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; hasDetails; data; xAttr; yAttr; IdAttr; labelX; labelY; showGrid; doubleYlegend; noSelectedAlpha; selectedAlpha; color
return htl.html`<div></div>`;
}
brushesControlsElement = {
maxTimelines; hasDetails; data; xAttr; yAttr; IdAttr; labelX; labelY; showGrid; doubleYlegend; noSelectedAlpha; selectedAlpha; color
return htl.html`<div></div>`
}
update = {
const tsEle = viewof selected;
tsEle.ts.defaultAlpha = defaultAlpha;
tsEle.ts.selectedAlpha = selectedAlpha;
tsEle.ts.noSelectedAlpha = noSelectedAlpha;
tsEle.ts.showGrid = showGrid;
tsEle.ts.hasDetails = hasDetails;
tsEle.ts.noSelectedColor = color;
tsEle.ts.defaultColor = defaultColor;
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})
viewof maxTimelines = Inputs.range([1, data.length], {
label: "Max Lines",
value: this?.value || 1000,
step: 100,
submit: true
})
viewof exp = Inputs.range([0, 3], {value: 1, label: "alphaScale Exponent"})
{
// viewof selected.ts.alphaScale = d3
// // .scaleLinear()
// .scalePow()
// .exponent(exp)
// .range([1, 0.01])
// .domain([0, maxTimelines]);
// viewof selected.ts.alphaScale.exponent(exp)
viewof selected.ts.noSelectedColor = color
// viewof selected.ts.noSelectedAlpha = 0.6
// viewof selected.ts.selectedColor = "#e0e8fb"
viewof selected.ts.render();
const s = viewof selected.ts.alphaScale;
exp;
const fmt = d3.format(".2%");
const max = viewof selected.ts.alphaScale.domain()[1];
return htl.html`<h3>Alpha Color Scale</h3>
${d3.range(0, max + 1, max / 10).map(
(n) => htl.html`
<div>${n} ${fmt(s(
n
))} <div style="display: inline-block; background-color:black; opacity:${s(
n
)}; width: 20px; height: 20px;"/ ></div></div>
`
)}`;
}
brushCoordinatesElement = {
maxTimelines; hasDetails; data; xAttr; yAttr; IdAttr; labelX; labelY; showGrid; doubleYlegend; noSelectedAlpha; selectedAlpha; color
return htl.html`<div>`
}
viewof IdAttr = Inputs.select(attribs, {
value: "industry",
label: "ID variable"
})
viewof xAttr = Inputs.select(attribs, {
value: "date",
label: "X Variable"
})
width = 700
viewof yAttr = Inputs.select(attribs, {
value: "unemployed",
label: "Y variable"
})
viewof labelX = Inputs.text({label: "Label X: ", value: "Time"})
viewof labelY = Inputs.text({label: "Label Y: ", value: "unemployed"})
viewof data = dataInput({value: industries})
divDetails = {
maxTimelines; hasDetails; data; xAttr; yAttr; IdAttr; labelX; labelY; showGrid; doubleYlegend; noSelectedAlpha; selectedAlpha; color
return htl.html`<div></div>`;
}
dataF = data.slice(0,maxTimelines)
fmtY = d3.format(".2d")
viewof fmtXAttr = Inputs.text({label: "timeFormat: ", value: "%x"})
attribs = Object.keys(data[0])
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@1.js").url())
// }
// }
import {TimeSearcher} from "@ivelascog/timesearcher-plus-usabilidad"
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.
