`; const tooltip = html`

`; function render(svg, emudata) { svg.selectAll("*").remove(); const bins = emudata.map((e) => ({ ...e, ...calculateBoxPlotSingle( e.Name, e.sampleId, e.samples, tickWidth, e.Type, 15 // boxwidth set, workaround of the boxwidth bug ) })); const x = d3 .scaleBand() .domain(bins.map((e) => e.x)) .rangeRound([margin.left, width - margin.right]); let range = y_axis ? global_range : d3.extent(bins.map((e) => e.y.map((e) => e.y)).flat()); debugger; let color_group, abc_shifter; if (abc_data) { color_group = Array.from(abc_data.keys())[0]; abc_shifter = abc_data.get(color_group).get(emudataParam[0].Type); if (abc_shifter < 0) { range[1] = range[1] - abc_shifter; } else { range[0] = range[0] - abc_shifter; } } else { color_group = 0; abc_shifter = 0; } const y = d3 .scaleLinear() .domain(range) //.nice() .range([height - margin.bottom, margin.top]); svg.node().y_scale = y; const xAxis = (g) => { g.attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).tickSizeOuter(0)) .attr("fill", null) .style("font-size", "18px") .selectAll("text") .style("text-anchor", "end") .attr("dx", "-.8em") .attr("dy", ".15em") .attr("transform", "rotate(-65)"); }; const yAxis = (g) => { g.attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).ticks(height < 500 ? 6 : 10)) .attr("fill", null) .call((g) => g.select(".domain").remove()) .style("font-size", "18px"); }; const duration = 1000; const titles = svg.append("g"); if (bottomAxis) { titles .append("text") .attr("text-anchor", "middle") .attr("transform", `translate(${width / 2},${height})`) .text(xAxisLabel); } titles .append("text") .attr("text-anchor", "middle") .attr("transform", `translate(${20}, ${height / 2})rotate(-90)`) .text(yAxisLabel); const g = svg .append("g") .selectAll("g") .data(bins, (d) => d.sampleId) // .data(bins) .join("g") .attr("class", (o) => `samplegroup${o.Group}`) .attr( "transform", (o) => `translate(${x(o.x) + x.bandwidth() / 2},${ abc_sub && o.Group == color_group ? y(0) - y(abc_shifter) : 0 })` ); if (boxPlot || Object.keys(boxPlot).length > 0) { const quartilesbox = g .selectAll(".quartiles-box") .data( (d) => [d], (d) => d.sampleId ) .join("path") .attr("class", "quartiles-box") .attr("fill", boxPlot.fillColor) .attr("fill-opacity", boxPlot.fillOpacity) .attr("stroke", boxPlot.strokeColor) .attr("stroke-width", boxPlot.strokeWidth) .attr("stroke-opacity", boxPlot.strokeOpacity) .attr( "d", (d) => ` M${-d.boxWidth},${y(d.quartiles[2])} H${d.boxWidth} ${ notches ? `V${y(d.mean + d.notch)} L${tickWidth},${y(d.mean)} L${d.boxWidth},${y(d.mean - d.notch)}` : `` } V${y(d.quartiles[0])} H${-d.boxWidth} ${ notches ? ` V${y(d.mean - d.notch)} L${-tickWidth},${y(d.mean)} L${-d.boxWidth},${y(d.mean + d.notch)} ` : `` } Z ` ) .call( attachTooltip, (d) => html`

${d.x}
mean: ${d.mean.toFixed(1)} (SD±${d.sigma.toFixed(1)})

`, tooltip, removePoint, width, height ); } if (rangeTick || Object.keys(rangeTick).length > 0) { g.append("path") .attr("class", "range-tick") .attr("stroke-opacity", rangeTick?.strokeOpacity || strokeOpacity) .attr("stroke-width", rangeTick?.strokeWidth || strokeWidth) .attr("stroke", rangeTick?.strokeColor || strokeColor) .attr( "d", (d) => `M${0},${y(d.range[1])} V${y(d.range[0])} M${-tickWidth},${y(d.range[1])} H${tickWidth} M${-tickWidth},${y(d.range[0])} H${tickWidth}` ); } const points = g.append("g"); if (samples || Object.keys(samples).length > 0) { const samplesDots = points .append("g") .selectAll("circle") .data( (d) => d.y, (d) => d.id ) .join("circle") .attr("class", "measure") .attr("fill", samples.fillColor) .attr("fill-opacity", samples.fillOpacity) .attr("stroke", samples.strokeColor) .attr("stroke-opacity", samples.strokeOpacity) .attr("stroke-width", samples.strokeWidth) .attr("r", samples.radius) .attr("cx", function (d, i) { if (i % 2 == 0) { return ( (1 - 2 * d.x) * d.boxWidth + d3.randomUniform(0.2 * d.boxWidth, 0.9 * d.boxWidth)() ); } else { return ( (1 - 2 * d.x) * d.boxWidth - d3.randomUniform(0.2 * d.boxWidth, 0.9 * d.boxWidth)() ); } }) .attr("cy", (d) => y(d.y)) .call( attachTooltip, (d) => html`

couplex: ${d.y.toFixed(2)} (well: ${d.well})

`, tooltip, removePoint, width, height ); } // if (outliers || Object.keys(outliers).length > 0) { // const outliersDots = points // .append("g") // .selectAll("circle") // .data((d) => d.outliers) // .join("circle") // .attr("class", "outlier") // .attr("fill", outliers.fillColor) // .attr("fill-opacity", outliers.fillOpacity) // .attr("stroke", outliers.strokeColor) // .attr("stroke-width", outliers.strokeWidth) // .attr("stroke-opacity", outliers.strokeOpacity) // .attr("r", outliers.radius) // .attr("cx", (d) => (1 - 2 * d.x) * d.boxWidth) // .attr("cy", (d) => y(d.y)); // } // check if enable meanSigma or meanSigma has styles if ( show_normal_mu_sigma && (meanSigma || Object.keys(meanSigma).length > 0) ) { const meanCI = g .append("path") .attr("class", "meanCI") .attr("fill", meanSigma.fillColor) .attr("fill-opacity", meanSigma.fillOpacity) .attr("stroke", meanSigma.strokeColor) .attr("stroke-width", meanSigma.strokeWidth) .attr("stroke-opacity", meanSigma.strokeOpacity) .attr( "d", (d) => `M0,${y(d.mean - d.sigma)} V${y(d.mean) + meanSigma.radius} M${-meanSigma.radius},${y(d.mean)} a ${meanSigma.radius},${meanSigma.radius} 0 1,1 ${meanSigma.radius * 2},0 a ${meanSigma.radius},${meanSigma.radius} 0 1,1 -${meanSigma.radius * 2},0 M0,${y(d.mean + d.sigma)} V${y(d.mean) - meanSigma.radius} M${-tickWidth},${y(d.mean - d.sigma)} H${tickWidth} M${-tickWidth},${y(d.mean + d.sigma)} H${tickWidth} Z` ); } // enable drag and drop g.call( drag( updateOrder, tooltip, abc_sub ? y(0) - y(abc_shifter) : 0, color_group ) ); let xAxisEl; if (bottomAxis) { xAxisEl = svg.append("g").call(xAxis); } svg.append("g").call(yAxis); let this_color_pair = svg.attr("class").slice(-2); // console.log(["cp is ", this_color_pair]); let color_label = d3 .select(color_pair_labels) .select(`svg[data-cp='color_pair_${this_color_pair}'`) .clone(true) .attr("transform", "translate(0,0)") .node(); svg.append(() => color_label); function removePoint(d) { if (d.type === "sample") { _emudata = emudata.filter((e) => e.sampleId !== d.sampleId); const bins = render(svg, _emudata); div.value.bins = bins; div.value.emudata = _emudata; div.dispatchEvent(new Event("input", { bubbles: true })); } if (d.type === "point") { const pointToRemoveId = d.id; const emudataIndex = emudata.findIndex( (e) => e.sampleId === d.sampleId ); const toreSample = emudata[emudataIndex]; const newSamples = toreSample.samples.filter( (v) => v.id !== pointToRemoveId ); // remove sample if not more values available if (newSamples.length === 0) { return removePoint({ type: "sample", sampleId: d.sampleId }); } _emudata[emudataIndex].samples = newSamples; const bins = render(svg, _emudata); div.value.bins = bins; div.value.emudata = _emudata; div.dispatchEvent(new Event("input", { bubbles: true })); } } function updateOrder(posx, newid) { const closest = bins.find( (bin) => Math.abs(x(bin.x) - posx) < x.bandwidth() ); if (closest) { const oldid = closest.sampleId; if (oldid !== newid) { const newindex = emudata.findIndex((e) => e.sampleId === newid); const oldindex = emudata.findIndex((e) => e.sampleId === oldid); _emudata = Object.assign([], emudata, { [newindex]: emudata[oldindex], [oldindex]: emudata[newindex] }); } else { _emudata = Object.assign([], emudata, {}); } const bins = render(svg, _emudata); div.value.bins = bins; div.value.emudata = _emudata; div.dispatchEvent(new Event("input", { bubbles: true })); } } return bins; } // Failed attempt to update chart after abc_sub // d3.select(viewof abc_sub).on("input", function () { // const bins = render(svg, _emudata); // div.value.bins = bins; // div.value.emudata = _emudata; // div.dispatchEvent(new Event("input", { bubbles: true })); // }); function updataEmudata(data) { _emudata = data; const bins = render(svg, _emudata); div.value.bins = bins; div.value.emudata = _emudata; div.dispatchEvent(new Event("input", { bubbles: true })); } const bins = render(svg, _emudata); svg.on("pointerleave", (event, e) => { d3.select(tooltip).style("visibility", "hidden"); }); const div = html`

${tooltip} ${svg.node()}

`; div.value = { type: bins[0].Type, svg: svg.node(), bins: bins, emudata: _emudata, updataEmudata: updataEmudata }; return div; }