2e:null 2f:["$","title",null,{"children":"Interactive legend | 294bb65f21bfa9db | Observable"}] 34:T429,detail = html`

Wavelength(nm):

Range(nm):

[234.5, 456.7]

Min:

Sample1: 12.44

Max:

Sample5: 2.44

`35:Ta4d,viewof focus = { const marginTop = 20 // top margin, in pixels const marginRight = 30 // right margin, in pixels const marginBottom = 30 // bottom margin, in pixels const marginLeft = 20 // left margin, in pixels const focusHeight = 100 const strokeWidth = 1 const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, focusHeight]) .style("display", "block"); const brush = d3 .brushX() .extent([ [marginLeft, 0.5], [width - marginRight, focusHeight - marginBottom - 1] ]) .on("brush", brushed) .on("end", brushended); const X = d3.map(data, d => d.X); const Y = d3.map(data, d => d.Y); const Z = d3.map(data, d => d.Sample); const zDomain = new d3.InternSet(Z); const I = d3.range(X.length).filter(i => zDomain.has(Z[i])); const color = d3.scaleOrdinal(zDomain, d3.schemeTableau10); const xScale = d3.scaleLinear(d3.extent(X), [marginLeft, width - marginRight]); const yScale = d3.scaleLinear([d3.min(Y) - 1, d3.max(Y)], [focusHeight - marginBottom, marginTop]); const xAxis = d3.axisBottom(xScale).ticks(width / 80).tickSizeOuter(0); const D = d3.map(data, (d, i) => !isNaN(X[i]) && !isNaN(Y[i])); const defaultSelection = [xScale(d3.min(X)), xScale(d3.max(X))]; console.log(defaultSelection) const line = d3.line() .defined(i => D[i]) .curve(d3.curveLinear) .x(i => xScale(X[i])) .y(i => yScale(Y[i])); svg.append("g") .attr("transform", `translate(0,${focusHeight - marginBottom})`) .call(xAxis) svg.append("g") .attr("fill", "none") .attr("stroke", typeof color === "string" ? color : null) .attr("stroke-width", strokeWidth) .selectAll("path") .data(d3.group(I, i => Z[i])) .join("path") .style("mix-blend-mode", "multiply") .attr("stroke", typeof color === "function" ? ([z]) => color(z) : null) .attr("d", ([, I]) => line(I)) const gb = svg.append("g").call(brush).call(brush.move, defaultSelection); function brushed({ selection }) { if (selection) { // const selectionmap = selection.map(xScale.invert, xScale) // const [minX, maxX] = selectionmap; // const maxIndex = d3.maxIndex(data, d => minX <= d.X && d.X <= maxX ? d.Y : NaN); // const minIndex = d3.minIndex(data, d => minX <= d.X && d.X <= maxX ? d.Y : NaN); // console.log(Z[minIndex], Z[maxIndex]) svg.property("value", selection.map(xScale.invert, xScale)); svg.dispatch("input"); } } function brushended({ selection }) { if (!selection) { gb.call(brush.move, defaultSelection); } } return svg.node(); }36:T1cf2,chart = { const Label = 'Wavelength (nm)' const marginTop = 20 // top margin, in pixels const marginRight = 30 // right margin, in pixels const marginBottom = 30 // bottom margin, in pixels const marginLeft = 20 // left margin, in pixels const strokeWidth = 1.5 // stroke width of line const X = d3.map(data, d => d.X); const Y = d3.map(data, d => d.Y); const Z = d3.map(data, d => d.Sample); const O = d3.map(data, d => d); // let minX = d3.min(X) // let maxX = d3.max(X) let selectedSample; let D = d3.map(data, (d, i) => !isNaN(X[i]) && !isNaN(Y[i])); // Compute default domains, and unique the z-domain. const xDomain = d3.extent(X); const yDomain = d3.extent(Y); console.log(yDomain) const zDomain = new d3.InternSet(Z); console.log(zDomain) const color = d3.scaleOrdinal(zDomain, d3.schemeTableau10); // Omit any data not present in the z-domain. const I = d3.range(X.length).filter(i => zDomain.has(Z[i])); const xScale = d3.scaleLinear(xDomain, [marginLeft, width - marginRight]); const yScale = d3.scaleLinear(yDomain, [height - marginBottom, marginTop]); const xAxis = d3.axisBottom(xScale).ticks(width / 40).tickSizeOuter(0); const yAxis = d3.axisLeft(yScale).ticks(height / 30); // Compute titles. const T = Z; const selmodel = SelectionModel(zDomain); const groups = d3.group(data, d => d.X) // Construct a line generator. const line = d3.line() .defined(i => D[i]) .curve(d3.curveLinear) .x(i => xScale(X[i])) .y(i => yScale(Y[i])); const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;") .style("-webkit-tap-highlight-color", "transparent") .on("pointerenter", pointerentered) .on("pointermove", pointermoved) .on("pointerleave", pointerleft) .on("click", pointclicked) .on("touchstart", event => event.preventDefault()); const compareLine = svg.append("g"); compareLine.append("line") .attr("y1", marginTop) .attr("y2", height - marginBottom + 5) .attr("stroke", "currentColor"); const ruleLabel = compareLine.append("text") .attr("y", height - marginBottom - 5) .attr("x", 18) .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("text-anchor", "middle") // .attr("dy", "1em"); const xg = svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(xAxis) .call(g => g.append("text") .attr("x", width/2 - 50) .attr("y", 28) .attr("fill", "currentColor") .attr("text-anchor", "start") .text(Label)); const yg = svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(yAxis) //.call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line").clone() .attr("x2", width - marginLeft - marginRight) .attr("stroke-opacity", 0.1)) .call(g => g.append("text") .attr("x", -marginLeft) .attr("y", 10) .attr("fill", "currentColor") .attr("text-anchor", "start")); const path = svg.append("g") .attr("fill", "none") .attr("stroke", typeof color === "string" ? color : null) .attr("stroke-width", strokeWidth) .selectAll("path") .data(d3.group(I, i => Z[i])) .join("path") .style("mix-blend-mode", "multiply") .attr("stroke", typeof color === "function" ? ([z]) => color(z) : null) .attr("d", ([, I]) => line(I)) .attr('stroke', d => selmodel.has(d[0]) ? color(d[0]) : 'transparent'); selmodel.on('change.chart', value => { path.attr('stroke', d => selmodel.has(d[0]) ? color(d[0]) : 'transparent'); }); const dot = svg.append("g") .attr("display", "none"); dot.append("circle") .attr("r", 2.5); dot.append("text") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("text-anchor", "middle") .attr("x", 75) .attr("y", -8); function pointclicked(event) { if (!selected.locked) { selected.locked = selectedSample // svg.selectAll(".shapes").remove() // selected.comments = commentsData.get(selectedSample) // if (selected.comments) { // svg.selectAll(".shapes") // .data(selected.comments) // .enter() // .append('g').attr("class", "shapes") // .attr("transform", (d, i) => `translate(${xScale(d.X)}, ${yScale(d.Y)})`) // .call(g => g.append('path') // .attr("d", function(d) {return d3.symbol().type(d3.symbolTriangle).size("30")()}) // .attr("fill", "red")) // .call(g => g.append("text") // .attr("y", -2) // .attr("x", 3) // .attr("font-family", "sans-serif") // .attr("font-size", 11) // .text(d => `(${d.X}:${d.Y.toFixed(2)})${d.Comment}`)) // } } else { selected.locked = '' // svg.selectAll(".shapes").remove() } } function pointermoved(event) { const [xm, ym] = d3.pointer(event); const I1 = selected.locked ? I.filter(i => Z[i] === selected.locked) : I.filter(i => selmodel.has(Z[i])); const i = d3.least(I1, i => Math.hypot(xScale(X[i]) - xm, yScale(Y[i]) - ym)); // closest point selectedSample = Z[i] path.style("stroke", ([z]) => Z[i] === z ? null : (selmodel.has(z) ? "#ddd" : "transparent")).filter(([z]) => Z[i] === z).raise(); dot.attr("transform", `translate(${xScale(X[i])},${yScale(Y[i])})`); compareLine.attr("transform", `translate(${xScale(X[i])},0)`).raise(); if (T) { dot.select("text").text(`${T[i]}:(${Y[i]})`); ruleLabel.text(`${X[i]}`); } const details = groups.get(X[i]).filter(d => selmodel.has(d.Sample)) d3.select('#chartwavelength').html(X[i]) d3.select('#chartdetail').html( details.map(item => `

${item.Sample}

${item.Y.toFixed(2)}

`).join('') ) } function pointerentered() { path.style("mix-blend-mode", null).style("stroke", "#ddd"); dot.attr("display", null); } function pointerleft() { selected.locked = '' path.style("mix-blend-mode", "multiply").style("stroke", null); dot.attr("display", "none"); compareLine.attr("transform", `translate(-40,0)`) svg.selectAll(".shapes").remove() } return Object.assign(svg.node(), {scales: {color, selmodel}, update(focusX, focusY) { const [minX, maxX] = focusX const [minY, maxY] = focusY // svg.selectAll(".tick line").remove() xScale.domain(focusX) yScale.domain([minY, maxY]) xg.call(xAxis) yg.call(yAxis) D = d3.map(D, (d, i) => X[i] >= minX && X[i] <= maxX); path .attr("d", ([, I]) => line(I)) .attr('stroke', d => selmodel.has(d[0]) ? color(d[0]) : 'transparent'); const maxIndex = d3.maxIndex(data, d => minX <= d.X && d.X <= maxX ? d.Y : NaN); const minIndex = d3.minIndex(data, d => minX <= d.X && d.X <= maxX ? d.Y : NaN); d3.select('#rangewavelength').html(`[${minX.toFixed(2)}, ${maxX.toFixed(2)}]`) d3.select('#rangemax').html(`${Z[maxIndex]}: ${maxY.toFixed(2)}`) d3.select('#rangemin').html(`${Z[minIndex]}: ${minY.toFixed(2)}`) } }); }37:Ta37,// Copyright 2021, Observable Inc. // Released under the ISC license. // https://observablehq.com/@d3/color-legend function Swatches(color, selmodel, { columns = null, format, unknown: formatUnknown, swatchSize = 12, swatchWidth = swatchSize, swatchHeight = swatchSize, marginLeft = 0 } = {}) { const id = `-swatches-${Math.random().toString(16).slice(2)}`; const unknown = formatUnknown == null ? undefined : color.unknown(); const unknowns = unknown == null || unknown === d3.scaleImplicit ? [] : [unknown]; const domain = color.domain().concat(unknowns); if (format === undefined) format = x => x === unknown ? formatUnknown : x; function entity(character) { return `&#${character.charCodeAt(0).toString()};`; } function changeColor(doms) { doms._groups[0].forEach(d => d.style['--color'] = '#ccc') } function calColor(value) { return selmodel.has(value) ? color(value) : '#ccc' } selmodel.on('change', value => { const showColor = selmodel.has(value) d3.select(`[data-legend = "${value}"]`) .style('--color', showColor ? color(value) : '#ccc') // .style('color', showColor ? '' : '#ccc') }); if (columns !== null) return htl.html`

${domain.map(value => { const label = `${format(value)}`; return htl.html`

${label}

`; })}

`; return htl.html`

${domain.map(value => htl.html`${format(value)}`)}

`; }38:T458,// Our selection model wraps two components: // - A JavaScript Set for tracking the selected elements // - A D3 dispatch helper for registering and invoking listener callbacks upon changes function SelectionModel(domain) { const dispatch = d3.dispatch('change'); //const state = new Set(domain); console.log('aaaaaaaaaaaaaaaaaaaaaaa1333', selected, selected.domains, selected.domains.size) if (!selected.domains.size) { selected.domains = domain } const api = { on: (type, fn) => (dispatch.on(type, fn), api), //clear: () => (clear(), api), has: value => { return selected.domains.has(value) }, // set: value => (update(value, true), api), toggle: e => (update(e.target.dataset.legend), api) }; // function clear() { // if (state.size) { // state.clear(); // dispatch.call('change', api, api); // } // } function update(value) { if (!selected.domains.has(value)) { selected.domains.add(value); } else { selected.domains.delete(value); } dispatch.call('change', api, value); } return api; }39:[{"id":"22d9ba1b04cff137d09b4dc4eea819cbe79e10e706652072081a3865158f005defcb123ea15b7e64c487ceff6ef85f7c1a888f28c3448c7b4998b9396c026e3b","href":"https://static.observableusercontent.com/files/22d9ba1b04cff137d09b4dc4eea819cbe79e10e706652072081a3865158f005defcb123ea15b7e64c487ceff6ef85f7c1a888f28c3448c7b4998b9396c026e3b","name":"all-2","type":"application/octet-stream","lastModified":1643862766493.971,"size":127778}] 32:{"id":"f07d831cd2deb902","slug":"interactive-legend","title":"Interactive legend","thumbnail":"e95ca2fca4a070cb5f94d6746ddd7e46440fd5c281da4b4c86efbf53b6da00bc","access_level":"public","create_time":"$D2022-02-03T03:56:53.074Z","update_time":"$D2022-10-12T03:01:20.214Z","view_time":null,"first_public_time":"$D2022-02-05T03:17:50.303Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"e51e6f542965cded","login":"294bb65f21bfa9db","name":"","avatar_url":null,"tier":"starter_2024"},"version":1060,"publish_version":1060,"role":null,"authored":false,"authors":[{"type":"individual","id":"294bb65f21bfa9db","login":"294bb65f21bfa9db","name":"","avatar_url":null,"tier":null}],"members":[{"type":"individual","id":"294bb65f21bfa9db","login":"294bb65f21bfa9db","name":"","avatar_url":null,"tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Interactive legend","cells":[{"id":0,"value":"# Interactive legend","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"height = 300","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"SpectrumData = FileAttachment(\"all-2\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"function parseData(data){\n let result = []\n SpectrumData.forEach(item => item.DataJson.Spectrum.SmoothedPoints.forEach(point => {\n result.push(Object.assign({Sample: item.SampleName}, point))\n }))\n return result\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1053,"value":"d3.schemeCategory10","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":365,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"data = parseData(SpectrumData)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":595,"value":"// comments = [{Sample: \"Sample 1\", X: 260.5, Y: 5.876316038916, Comment: 'The value is over what is expected1'}, {Sample: \"Sample 1\", X: 315, Y: 0.828, Comment: 'The value is over what is expected2'}, {Sample: \"Sample 5\", X: 270.5, Y: 6.41477403271725, Comment: 'The value is over what is expected3'}, {Sample: \"Sample 6\", X: 280, Y: 9.27261250026078, Comment: 'The value is over what is expected4'}]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":602,"value":"// commentsData = d3.group(comments, d => d.Sample)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":538,"value":"// selected = ({domains: new Set(), locked: ''})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1003,"value":"selected = {\n console.log('ssssssssssssssssssssssssssssss')\n return {\n domains: new d3.InternSet(d3.map(SpectrumData, d => d.SampleName)),\n locked: ''\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"legend = Swatches(chart.scales.color, chart.scales.selmodel)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":785,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":834,"value":"update = {\n const [minX, maxX] = focus;\n const maxY = d3.max(data, d => minX <= d.X && d.X <= maxX ? d.Y : NaN);\n const minY = d3.min(data, d => minX <= d.X && d.X <= maxX ? d.Y : NaN);\n chart.update(focus, [minY, maxY]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"$38","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W39","stdlib":"1","titling":"auto"}} 33:"$32:body"