chartToRender = { if (Result === "All") { const width = 800; const height = 600; const margin = { top: 40, right: 30, bottom: 80, left: 100 }; const filteredData = data2.filter( (d) => d.http_code == 200 && d.failed_quality_filter == 0 ); const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .style("font", "14px sans-serif"); const x = d3 .scaleLinear() .range([margin.left, width - margin.right]) .domain([-50, 50]); const y = d3 .scaleLinear() .range([height - margin.bottom, margin.top]) .domain([0, d3.max(filteredData, (d) => d.time_total)]); const kde = (kernel, thresholds, data) => { return thresholds.map((t) => [t, d3.mean(data, (d) => kernel(t - d))]); }; const epanechnikov = (bandwidth) => { return (x) => Math.abs((x /= bandwidth)) <= 1 ? (0.75 * (1 - x * x)) / bandwidth : 0; }; const bandwidth = 0.5; const times = filteredData.map((d) => d.time_total); const density = kde(epanechnikov(bandwidth), y.ticks(100), times); const scaledDensity = density.map(([y, v]) => [y, v * 50]); const boxPlotData = filteredData.map((d) => d.time_total); const q1 = d3.quantile(boxPlotData, 0.25); const median = d3.quantile(boxPlotData, 0.5); const q3 = d3.quantile(boxPlotData, 0.75); const iqr = q3 - q1; const min = d3.min(boxPlotData); const max = d3.max(boxPlotData); const mean = d3.mean(boxPlotData); const stddev = Math.sqrt( d3.mean(boxPlotData.map((d) => Math.pow(d - d3.mean(boxPlotData), 2))) ); const lowerWhisker = Math.max(min, q1 - 1.5 * iqr); const upperWhisker = Math.min(max, q3 + 1.5 * iqr); const offset = 220; svg .append("path") .datum(scaledDensity) .attr("fill", violinColor) .attr("stroke", violinStrokeColor) .attr("stroke-width", 1) .attr( "d", d3 .area() .x0((d) => x(-d[1]) - offset) .x1((d) => x(d[1]) - offset) .y((d) => y(d[0])) .curve(d3.curveCatmullRom) ); svg .append("g") .attr("transform", `translate(${margin.left},0)`) .call( d3 .axisLeft(y) .tickValues([0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100]) .tickFormat((d) => (d === 100 ? "100 seconds" : d)) ) .selectAll("text") .style("font-size", "14px"); //const mean = d3.mean(data2, (d) => d.time_total); svg .append("text") .attr("x", offset + 25) .attr("y", y(mean) + 15) .attr("text-anchor", "start") .attr("fill", "#1f262a") .attr("font-family", fontFamily) .text(`${mean.toFixed(2)} seconds`); svg .append("text") .attr("x", offset + 20) .attr("y", y(stddev) - 5) .attr("text-anchor", "start") .attr("font-weight", "normal") .attr("fill", "#f41706") .attr("font-family", fontFamily) .text(`${stddev.toFixed(2)} seconds`); svg .append("line") .attr("x1", margin.left) .attr("x2", width - margin.right - offset * 2) .attr("y1", y(mean)) .attr("y2", y(mean)) .attr("stroke", "black"); svg .append("line") .attr("x1", margin.left) .attr("x2", width - margin.right - offset * 2) .attr("y1", y(stddev)) .attr("y2", y(stddev)) .attr("stroke", "red"); const legendData = [ { label: "Average", color: avgColor }, { label: "Standard Deviation", color: stdDevColor } ]; const legend = svg.append("g").attr("transform", "translate(10, 10)"); legend .selectAll(".legend-item") .data(legendData) .enter() .append("g") .attr("class", "legend-item") .attr("transform", (d, i) => `translate(${i * 100}, 0)`); legend .selectAll(".legend-item") .append("line") .attr("x1", 0) .attr("x2", 15) .attr("y1", 2) .attr("y2", -6) .attr("stroke", (d) => d.color) .attr("stroke-width", 3) .attr("font-family", fontFamily); legend .selectAll(".legend-item") .append("text") .attr("x", 20) .attr("y", 2) .attr("font-family", fontFamily) .attr("alignment-baseline", "middle") .text((d) => d.label) .attr("font-family", fontFamily); return svg.node(); } else if (Result === "By Proxy") { const width = 800; const height = 600; const margin = { top: 40, right: 30, bottom: 80, left: 100 }; const filteredData = data2.filter( (d) => d.http_code == 200 && d.failed_quality_filter == 0 ); const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .style("font", "14px sans-serif"); const x = d3 .scaleBand() .range([margin.left, width - margin.right]) .domain(["smartproxy", "nimble", "brightdata", "netnut", "oxylabs"]) .padding(0.05); const y = d3 .scaleLinear() .range([height - margin.bottom, margin.top]) .domain([0, d3.max(filteredData, (d) => d.time_total)]); const kde = (kernel, thresholds, data) => { return thresholds.map((t) => [t, d3.mean(data, (d) => kernel(t - d))]); }; const epanechnikov = (bandwidth) => { return (x) => Math.abs((x /= bandwidth)) <= 1 ? (0.75 * (1 - x * x)) / bandwidth : 0; }; const bandwidth = 0.5; const violinData = Array.from( d3.group(filteredData, (d) => d.proxy), ([proxy, values]) => { const times = values.map((d) => d.time_total); const density = kde(epanechnikov(bandwidth), y.ticks(100), times); const scaledDensity = density.map(([y, v]) => [y, v * 50]); const mean = d3.mean(times); const stddev = d3.deviation(times); return { proxy, scaledDensity, mean, stddev }; } ); const tooltip = d3 .select("body") .append("div") .style("position", "absolute") .style("background", "white") .style("padding", "5px") .style("border", "1px solid black") .style("border-radius", "5px") .style("pointer-events", "none") .style("opacity", 0); svg .selectAll("path") .data(violinData) .join("path") .attr("d", (d) => d3 .area() .x0((dPoint) => x(d.proxy) + x.bandwidth() / 2 - dPoint[1]) .x1((dPoint) => x(d.proxy) + x.bandwidth() / 2 + dPoint[1]) .y((dPoint) => y(dPoint[0])) .curve(d3.curveCatmullRom)(d.scaledDensity) ) .attr("fill", violinColor) .attr("stroke", violinStrokeColor) .attr("stroke-width", 1) .on("mouseover", function (event, d) { tooltip.style("opacity", 1).html(` Proxy: ${d.proxy}
Average: ${d.mean.toFixed(2)}
Standard Deviation: ${d.stddev.toFixed(2)} `); }) .on("mousemove", function (event) { tooltip .style("left", event.pageX + 10 + "px") .style("top", event.pageY - 20 + "px"); }) .on("mouseout", function () { tooltip.style("opacity", 0); }); svg .append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x)) .style("font-size", "14px") .style("text-anchor", "middle"); svg .append("g") .attr("transform", `translate(${margin.left},0)`) .call( d3 .axisLeft(y) .tickValues([0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100]) .tickFormat((d) => (d === 100 ? "100 seconds" : d)) ) .selectAll("text") .style("font-size", "14px"); return svg.node(); } else { const width = 800; const height = 600; const margin = { top: 40, right: 30, bottom: 80, left: 100 }; const filteredData = selectDomain === "All" ? data2.filter( (d) => d.http_code == 200 && d.failed_quality_filter == 0 ) : data2.filter( (d) => d.http_code == 200 && d.failed_quality_filter == 0 && d.domain === selectDomain ); const maxY = d3.max(filteredData, (d) => d.time_total); const roundedMaxY = Math.ceil(maxY / 10) * 10; const yTicks = d3.range(0, roundedMaxY + 1, roundedMaxY / 10); const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .style("font", "14px sans-serif"); const x = d3 .scaleBand() .range([margin.left, width - margin.right]) .domain(["smartproxy", "nimble", "brightdata", "netnut", "oxylabs"]) .padding(0.05); const y = d3 .scaleLinear() .range([height - margin.bottom, margin.top]) .domain([0, roundedMaxY]) const kde = (kernel, thresholds, data) => { return thresholds.map((t) => [t, d3.mean(data, (d) => kernel(t - d))]); }; const epanechnikov = (bandwidth) => { return (x) => Math.abs((x /= bandwidth)) <= 1 ? (0.75 * (1 - x * x)) / bandwidth : 0; }; const bandwidth = 0.5; const violinData = Array.from( d3.group(filteredData, (d) => d.proxy), ([proxy, values]) => { const times = values.map((d) => d.time_total); const density = kde(epanechnikov(bandwidth), y.ticks(100), times); const scaledDensity = density.map(([y, v]) => [y, v * 50]); const mean = d3.mean(times); const stddev = d3.deviation(times); return { proxy, scaledDensity, mean, stddev }; } ); const tooltip = d3 .select("body") .append("div") .style("position", "absolute") .style("background", "white") .style("padding", "5px") .style("border", "1px solid black") .style("border-radius", "5px") .style("pointer-events", "none") .style("opacity", 0); svg .selectAll("path") .data(violinData) .join("path") .attr("d", (d) => d3 .area() .x0((dPoint) => x(d.proxy) + x.bandwidth() / 2 - dPoint[1]) .x1((dPoint) => x(d.proxy) + x.bandwidth() / 2 + dPoint[1]) .y((dPoint) => y(dPoint[0])) .curve(d3.curveCatmullRom)(d.scaledDensity) ) .attr("fill", violinColor) .attr("stroke", violinStrokeColor) .attr("stroke-width", 1) .on("mouseover", function (event, d) { tooltip.style("opacity", 1).html(` Proxy: ${d.proxy}
Average: ${d.mean.toFixed(2)}
Standard Deviation: ${d.stddev.toFixed(2)} `); }) .on("mousemove", function (event) { tooltip .style("left", event.pageX + 10 + "px") .style("top", event.pageY - 20 + "px"); }) .on("mouseout", function () { tooltip.style("opacity", 0); }); svg .append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x)) .style("font-size", "14px") .style("text-anchor", "middle"); svg .append("g") .attr("transform", `translate(${margin.left},0)`) .call( d3 .axisLeft(y) .tickValues(yTicks) .tickFormat((d) => (d === roundedMaxY ? `${roundedMaxY} seconds` : d)) ) .selectAll("text") .style("font-size", "14px"); return svg.node(); } }

Purpose-built for displays of data