2b:null 2c:["$","title",null,{"children":"TimeSarcher+ load your data | ivan velasco | Observable"}] 31:T436,controls = { return htl.html`

Load your own CSV data: ${viewof data}

Select the attributes to render and the maximun records

${viewof IdAttr}	${viewof xAttr}	${viewof yAttr}
${viewof maxTimelines}

More configuration parameters

${viewof hasDetails}	${viewof showGrid}	${viewof doubleYlegend}
${viewof labelX}	${viewof labelY}

Render parameters

${viewof noSelectedAlpha}

${viewof selectedAlpha}

`; }32:[] 2f:{"id":"c8cea138774afdcb","slug":null,"title":"TimeSarcher+ load your data","thumbnail":"6e503ff418c488405bdfd1a2cd173e219d60c6e3234f057236eb4a995b96fca7","access_level":"public","create_time":"$D2023-06-14T20:00:54.854Z","update_time":"$D2023-06-14T20:00:54.854Z","view_time":null,"first_public_time":"$D2023-06-14T20:00:54.854Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"930819e3d82545cf","login":"ivelascog","name":"ivan velasco","avatar_url":"https://avatars-next.observableusercontent.com/11cb2b20d527ce9932eb883698b460726569e061b766cf88e90af76b7d255d72","tier":"starter_2024","bio":""},"version":237,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"21806eb61954f66f","login":"ivelascog","name":"ivan velasco","avatar_url":"https://avatars-next.observableusercontent.com/11cb2b20d527ce9932eb883698b460726569e061b766cf88e90af76b7d255d72","tier":null,"bio":""}],"members":[{"type":"individual","id":"21806eb61954f66f","login":"ivelascog","name":"ivan velasco","avatar_url":"https://avatars-next.observableusercontent.com/11cb2b20d527ce9932eb883698b460726569e061b766cf88e90af76b7d255d72","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"TimeSarcher+ load your data","cells":[{"id":0,"value":"# TimeSarcher+ load your data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"renderView = {\n maxTimelines; hasDetails; data; xAttr; yAttr; IdAttr; labelX; labelY; showGrid; doubleYlegend; noSelectedAlpha; selectedAlpha; color\n return htl.html`\n

${divTimeSearcher}

\n ${brushCoordinatesElement}\n
\n ${brushesControlsElement} \n

\n \n

${hasDetails ? htl.html`

Details:

${divDetails}`: \"\"}

\n`\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"industries","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"viewof selectedAlpha = Inputs.range([0, 1], {label: \"Selected Alpha\", value: 1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"viewof noSelectedAlpha = Inputs.range([0, 1], {label: \"Non Selected Alpha\", value: 0.8})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"viewof color = Inputs.color({label:\"Non selected Color\", value: \"#dce0e5\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"viewof defaultColor = Inputs.color({label:\"Default Color\", value: \"#999\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"viewof selected = {\n const tsEle = TimeSearcher({\n target: divTimeSearcher,\n brushesControlsElement,\n showBrushesControls: true,\n y: yAttr,\n x: xAttr,\n id: IdAttr,\n xLabel: \"→ \" + labelX,\n yLabel: \"↑ \" + labelY,\n overviewWidth: width,\n brushCoordinatesElement,\n fmtX: d3.timeFormat(fmtXAttr),\n fmtY,\n detailsElement: divDetails,\n detailsWidth: width,\n detailsHeight: 200,\n // maxTimelines,\n showGroupMedian: false,\n hasDetails: hasDetails,\n maxDetailsRecords:10\n });\n\n // see update\n // https://observablehq.com/@ivelascog/timesearcher-plus-usabilidad#selected\n tsEle.ts.doubleYlegend = doubleYlegend;\n tsEle.ts.alphaScale = d3.scalePow().exponent(0.5).range([1, 0.3]);\n // tsEle.ts.noSelectedAlpha = 0.9;\n tsEle.ts.margin.right = 50;\n tsEle.ts.showGrid = showGrid;\n tsEle.ts.stepX = 1;\n tsEle.ts.stepY = 100;\n tsEle.ts.data(data);\n //tsEle.ts.addReferenceCurves(curvas);\n\n return tsEle;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"divTimeSearcher = {\n maxTimelines; hasDetails; data; xAttr; yAttr; IdAttr; labelX; labelY; showGrid; doubleYlegend; noSelectedAlpha; selectedAlpha; color\n return htl.html`

`\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"update = {\n const tsEle = viewof selected;\n tsEle.ts.defaultAlpha = defaultAlpha;\n tsEle.ts.selectedAlpha = selectedAlpha;\n tsEle.ts.noSelectedAlpha = noSelectedAlpha;\n tsEle.ts.showGrid = showGrid;\n tsEle.ts.hasDetails = hasDetails;\n tsEle.ts.noSelectedColor = color;\n tsEle.ts.defaultColor = defaultColor;\n\n tsEle.ts.render();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"viewof hasDetails = Inputs.toggle({label: \"Show Details\", value: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"viewof showGrid = Inputs.toggle({label: \"Show Grid\", value: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"viewof doubleYlegend = Inputs.toggle({label: \"Show Double Y Legend\", value: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"viewof maxTimelines = Inputs.range([1, data.length], {\n label: \"Max Lines\",\n value: this?.value || 1000,\n step: 100,\n submit: true\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"viewof defaultAlpha = Inputs.range([0, 1], {label: \"Default Alpha\", value: 1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"viewof exp = Inputs.range([0, 3], {value: 1, label: \"alphaScale Exponent\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"{\n // viewof selected.ts.alphaScale = d3\n // // .scaleLinear()\n // .scalePow()\n // .exponent(exp)\n // .range([1, 0.01])\n // .domain([0, maxTimelines]);\n\n // viewof selected.ts.alphaScale.exponent(exp)\n viewof selected.ts.noSelectedColor = color\n // viewof selected.ts.noSelectedAlpha = 0.6\n // viewof selected.ts.selectedColor = \"#e0e8fb\"\n \n viewof selected.ts.render();\n\n const s = viewof selected.ts.alphaScale;\n exp;\n const fmt = d3.format(\".2%\");\n const max = viewof selected.ts.alphaScale.domain()[1];\n return htl.html`

Alpha Color Scale

\n ${d3.range(0, max + 1, max / 10).map(\n (n) => htl.html`\n

${n} ${fmt(s(\n n\n ))}

\n `\n )}`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"brushCoordinatesElement = {\n maxTimelines; hasDetails; data; xAttr; yAttr; IdAttr; labelX; labelY; showGrid; doubleYlegend; noSelectedAlpha; selectedAlpha; color\n return htl.html`

`\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"viewof IdAttr = Inputs.select(attribs, {\n value: \"industry\",\n label: \"ID variable\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"viewof xAttr = Inputs.select(attribs, {\n value: \"date\",\n label: \"X Variable\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"width = 700","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"viewof yAttr = Inputs.select(attribs, {\n value: \"unemployed\",\n label: \"Y variable\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"viewof labelX = Inputs.text({label: \"Label X: \", value: \"Time\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"viewof labelY = Inputs.text({label: \"Label Y: \", value: \"unemployed\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"viewof data = dataInput({value: industries})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"divDetails = {\n maxTimelines; hasDetails; data; xAttr; yAttr; IdAttr; labelX; labelY; showGrid; doubleYlegend; noSelectedAlpha; selectedAlpha; color\n return htl.html`

`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"dataF = data.slice(0,maxTimelines)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"fmtY = d3.format(\".2d\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"viewof fmtXAttr = Inputs.text({label: \"timeFormat: \", value: \"%x\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"attribs = Object.keys(data[0])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"import { dataInput } from \"@john-guerra/data-input\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"// TimeSearcher = {\n// try {\n// return await require(`http://localhost:8080/dist/TimeSearcher.js?${Date.now()}`)\n// } catch (e) {\n// return await require(await FileAttachment(\"TimeSearcher@1.js\").url())\n// }\n// }\nimport {TimeSearcher} from \"@ivelascog/timesearcher-plus-usabilidad\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 30:"$2f:body"