29:null 2a:["$","title",null,{"children":"Crawl Time Analysis | AIMultiple | Observable"}] 2f:T581b,chartToRender = { if (Result === "All") { const margin = { top: 40, right: 160, bottom: 60, left: 100 }; const width = 400 - margin.left - margin.right; const height = 400 - margin.top - margin.bottom; const filteredData = data2.filter( (d) => d.http_code == 200 && d.failed_quality_filter == 0 ); const svg = d3 .create("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .style("font", "14px sans-serif"); const g = svg .append("g") .attr("transform", `translate(${margin.left},${margin.top})`); const x = d3.scaleBand().range([0, width]).padding(0.1); const y = d3 .scaleLinear() .domain([0, d3.max(filteredData, (d) => d.time_total)]) .range([height, 0]); g.append("g") .attr("transform", `translate(0,${height})`) .selectAll("text") .attr("y", 10) .attr("x", 0) .attr("dy", ".35em") .style("text-anchor", "middle"); g.append("g") .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 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 jitter = d3.randomUniform( -x.bandwidth() / 3 + 5, x.bandwidth() / 3 + margin.left + 5 ); g.selectAll("circle") .data(filteredData) .join("circle") .attr("cx", (d) => x.bandwidth() / 3 + jitter() + 5) .attr("cy", (d) => y(d.time_total)) .attr("r", 5) .attr("fill", (d) => (d.http_code === 200 ? circleColor : "red")) .attr("stroke", "white") .attr("stroke-size", 1); g.append("rect") .attr("class", "box") .attr("x", 5) .attr("y", y(q3)) .attr("height", y(q1) - y(q3)) .attr("width", width + margin.left / 2) .attr("fill", "gray") .attr("stroke", "black") .attr("opacity", 0.6); g.append("text") .attr("x", width + +margin.left / 3 + 30) .attr("y", y(mean) + 6) .attr("text-anchor", "start") .attr("fill", "#1f262a") .attr("font-family", fontFamily) .text(`${mean.toFixed(2)} seconds`); g.append("text") .attr("x", width + +margin.left / 3 + 30) .attr("y", y(stddev) - 1) .attr("text-anchor", "start") .attr("font-weight", "normal") .attr("fill", "#f41706") .attr("font-family", fontFamily) .text(`${stddev.toFixed(2)} seconds`); g.append("line") .attr("class", "mean") .attr("x1", 0) .attr("x2", width + margin.left / 2 + 5) .attr("y1", y(mean)) .attr("y2", y(mean)) .attr("stroke", avgColor) .attr("stroke-width", 1.5); g.append("line") .attr("class", "stddev") .attr("x1", 0) .attr("x2", width + margin.left / 2 + 5) .attr("y1", y(stddev)) .attr("y2", y(stddev)) .attr("stroke", stdDevColor) .attr("stroke-width", 1.5); g.append("line") .attr("class", "whiskers") .attr("x1", width / 2 + 30) .attr("x2", width / 2 + 30) .attr("y1", y(lowerWhisker)) .attr("y2", y(upperWhisker)) .attr("stroke", "gray") .attr("stroke-width", 1.5); g.append("line") .attr("class", "whiskers") .attr("x1", width / 2 + 30 - 10) .attr("x2", width / 2 + 30 + 10) .attr("y1", y(lowerWhisker)) .attr("y2", y(lowerWhisker)) .attr("stroke", "gray") .attr("stroke-width", 1.5); g.append("line") .attr("class", "whiskers") .attr("x1", width / 2 + 30 - 10) .attr("x2", width / 2 + 30 + 10) .attr("y1", y(upperWhisker)) .attr("y2", y(upperWhisker)) .attr("stroke", "gray") .attr("stroke-width", 1.5); 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 margin = { top: 40, right: 20, bottom: 60, left: 100 }; const width = 800 - margin.left - margin.right; const height = 400 - margin.top - margin.bottom; const filteredData = data2.filter( (d) => d.http_code == 200 && d.failed_quality_filter == 0 ); const svg = d3 .create("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .style("font", "14px sans-serif"); const g = svg .append("g") .attr("transform", `translate(${margin.left},${margin.top})`); const x = d3 .scaleBand() .domain([...new Set(filteredData.map((d) => d.proxy))]) .range([0, width]) .padding(0.1); const y = d3 .scaleLinear() .domain([0, d3.max(filteredData, (d) => d.time_total)]) .range([height, 0]); g.append("g") .attr("transform", `translate(0,${height + 5})`) .call(d3.axisBottom(x)) .selectAll("text") .attr("y", 20) .attr("x", 0) .attr("dy", ".35em") .style("font-size", "14px") .style("text-anchor", "middle"); g.append("g") .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 boxData = d3.group(filteredData, (d) => d.proxy); const boxPlotData = Array.from(boxData, ([key, values]) => { const q1 = d3.quantile( values.map((d) => d.time_total), 0.25 ); const median = d3.quantile( values.map((d) => d.time_total), 0.5 ); const q3 = d3.quantile( values.map((d) => d.time_total), 0.75 ); const iqr = q3 - q1; const min = d3.min(values, (d) => d.time_total); const max = d3.max(values, (d) => d.time_total); const mean = d3.mean(values, (d) => d.time_total); const stddev = Math.sqrt( d3.mean(values.map((d) => Math.pow(d.time_total - mean, 2))) ); const lowerWhisker = Math.max(min, q1 - 1.5 * iqr); const upperWhisker = Math.min(max, q3 + 1.5 * iqr); return { proxy: key, q1, median, q3, min, max, stddev, mean, lowerWhisker, upperWhisker, values }; }); 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); const jitter = d3.randomUniform(-x.bandwidth() / 2, x.bandwidth() / 2); g.selectAll("circle") .data(filteredData) .join("circle") .attr("cx", (d) => x(d.proxy) + x.bandwidth() / 2 + jitter()) .attr("cy", (d) => y(d.time_total)) .attr("r", 5) .attr("fill", (d) => (d.http_code === 200 ? circleColor : "red")) .attr("stroke", "white") .attr("stroke-size", 1); g.selectAll(".box") .data(boxPlotData) .join("rect") .attr("class", "box") .attr("x", (d) => x(d.proxy)) .attr("y", (d) => y(d.q3)) .attr("height", (d) => y(d.q1) - y(d.q3)) .attr("width", x.bandwidth()) .attr("fill", "gray") .attr("stroke", "black") .attr("opacity", 0.5) .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); }); g.selectAll(".mean") .data(boxPlotData) .join("line") .attr("class", "mean") .attr("x1", (d) => x(d.proxy)) .attr("x2", (d) => x(d.proxy) + x.bandwidth()) .attr("y1", (d) => y(d.mean)) .attr("y2", (d) => y(d.mean)) .attr("stroke", avgColor) .attr("stroke-size", 1.5) .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); }); g.selectAll(".stddev") .data(boxPlotData) .join("line") .attr("class", "stddev") .attr("x1", (d) => x(d.proxy)) .attr("x2", (d) => x(d.proxy) + x.bandwidth()) .attr("y1", (d) => y(d.stddev)) .attr("y2", (d) => y(d.stddev)) .attr("stroke", stdDevColor) .attr("stroke-size", 1.5) .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); }); g.selectAll(".whiskers") .data(boxPlotData) .join("line") .attr("class", "whiskers") .attr("x1", (d) => x(d.proxy) + x.bandwidth() / 2) .attr("x2", (d) => x(d.proxy) + x.bandwidth() / 2) .attr("y1", (d) => y(d.lowerWhisker)) .attr("y2", (d) => y(d.upperWhisker)) .attr("stroke", "gray") .attr("stroke-width", 1.5) .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); }); g.selectAll(".whiskersLower") .data(boxPlotData) .join("line") .attr("class", "whiskers") .attr("x1", (d) => x(d.proxy) + x.bandwidth() / 2 - 10) .attr("x2", (d) => x(d.proxy) + x.bandwidth() / 2 + 10) .attr("y1", (d) => y(d.lowerWhisker)) .attr("y2", (d) => y(d.lowerWhisker)) .attr("stroke", "gray") .attr("stroke-width", 1.5); g.selectAll(".whiskersUpper") .data(boxPlotData) .join("line") .attr("class", "whiskers") .attr("x1", (d) => x(d.proxy) + x.bandwidth() / 2 - 10) .attr("x2", (d) => x(d.proxy) + x.bandwidth() / 2 + 10) .attr("y1", (d) => y(d.upperWhisker)) .attr("y2", (d) => y(d.upperWhisker)) .attr("stroke", "gray") .attr("stroke-width", 1.5); 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 { const margin = { top: 40, right: 20, bottom: 60, left: 100 }; const width = 800 - margin.left - margin.right; const height = 400 - margin.top - margin.bottom; 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 svg = d3 .create("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .style("font", "14px sans-serif"); const g = svg .append("g") .attr("transform", `translate(${margin.left},${margin.top})`); const x = d3 .scaleBand() .domain([...new Set(filteredData.map((d) => d.proxy))]) .range([0, width]) .padding(0.1); 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 y = d3.scaleLinear().domain([0, roundedMaxY]).range([height, 0]); g.append("g") .attr("transform", `translate(0,${height + 5})`) .call(d3.axisBottom(x)) .selectAll("text") .attr("y", 20) .attr("x", 0) .attr("dy", ".35em") .style("font-size", "14px") .style("text-anchor", "middle"); g.append("g") .call( d3 .axisLeft(y) .tickValues(yTicks) .tickFormat((d) => (d === roundedMaxY ? `${roundedMaxY} seconds` : d)) ) .selectAll("text") .style("font-size", "14px"); const boxData = d3.group(filteredData, (d) => d.proxy); const boxPlotData = Array.from(boxData, ([key, values]) => { const q1 = d3.quantile( values.map((d) => d.time_total), 0.25 ); const median = d3.quantile( values.map((d) => d.time_total), 0.5 ); const q3 = d3.quantile( values.map((d) => d.time_total), 0.75 ); const iqr = q3 - q1; const min = d3.min(values, (d) => d.time_total); const max = d3.max(values, (d) => d.time_total); const mean = d3.mean(values, (d) => d.time_total); const stddev = Math.sqrt( d3.mean(values.map((d) => Math.pow(d.time_total - mean, 2))) ); const lowerWhisker = Math.max(min, q1 - 1.5 * iqr); const upperWhisker = Math.min(max, q3 + 1.5 * iqr); return { proxy: key, q1, median, q3, min, max, stddev, mean, lowerWhisker, upperWhisker, values }; }); 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); const jitter = d3.randomUniform(-x.bandwidth() / 2, x.bandwidth() / 2); g.selectAll("circle") .data(filteredData) .join("circle") .attr("cx", (d) => x(d.proxy) + x.bandwidth() / 2 + jitter()) .attr("cy", (d) => y(d.time_total)) .attr("r", 5) .attr("fill", (d) => (d.http_code === 200 ? circleColor : "red")) .attr("stroke", "white") .attr("stroke-size", 1); g.selectAll(".box") .data(boxPlotData) .join("rect") .attr("class", "box") .attr("x", (d) => x(d.proxy)) .attr("y", (d) => y(d.q3)) .attr("height", (d) => y(d.q1) - y(d.q3)) .attr("width", x.bandwidth()) .attr("fill", "gray") .attr("stroke", "black") .attr("opacity", 0.5) .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); }); g.selectAll(".mean") .data(boxPlotData) .join("line") .attr("class", "mean") .attr("x1", (d) => x(d.proxy)) .attr("x2", (d) => x(d.proxy) + x.bandwidth()) .attr("y1", (d) => y(d.mean)) .attr("y2", (d) => y(d.mean)) .attr("stroke", avgColor) .attr("stroke-size", 1.5) .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); }); g.selectAll(".stddev") .data(boxPlotData) .join("line") .attr("class", "stddev") .attr("x1", (d) => x(d.proxy)) .attr("x2", (d) => x(d.proxy) + x.bandwidth()) .attr("y1", (d) => y(d.stddev)) .attr("y2", (d) => y(d.stddev)) .attr("stroke", stdDevColor) .attr("stroke-size", 1.5) .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); }); g.selectAll(".whiskers") .data(boxPlotData) .join("line") .attr("class", "whiskers") .attr("x1", (d) => x(d.proxy) + x.bandwidth() / 2) .attr("x2", (d) => x(d.proxy) + x.bandwidth() / 2) .attr("y1", (d) => y(d.lowerWhisker)) .attr("y2", (d) => y(d.upperWhisker)) .attr("stroke", "gray") .attr("stroke-width", 1.5) .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); }); g.selectAll(".whiskersLower") .data(boxPlotData) .join("line") .attr("class", "whiskers") .attr("x1", (d) => x(d.proxy) + x.bandwidth() / 2 - 10) .attr("x2", (d) => x(d.proxy) + x.bandwidth() / 2 + 10) .attr("y1", (d) => y(d.lowerWhisker)) .attr("y2", (d) => y(d.lowerWhisker)) .attr("stroke", "gray") .attr("stroke-width", 1.5); g.selectAll(".whiskersUpper") .data(boxPlotData) .join("line") .attr("class", "whiskers") .attr("x1", (d) => x(d.proxy) + x.bandwidth() / 2 - 10) .attr("x2", (d) => x(d.proxy) + x.bandwidth() / 2 + 10) .attr("y1", (d) => y(d.upperWhisker)) .attr("y2", (d) => y(d.upperWhisker)) .attr("stroke", "gray") .attr("stroke-width", 1.5); 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(); } }30:T138a,allChart = { const margin = { top: 40, right: 160, bottom: 60, left: 100 }; const width = 400 - margin.left - margin.right; const height = 400 - margin.top - margin.bottom; const filteredData = data2.filter( (d) => d.http_code == 200 && d.failed_quality_filter == 0 ); const svg = d3 .create("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .style("font", "14px sans-serif"); const g = svg .append("g") .attr("transform", `translate(${margin.left},${margin.top})`); const x = d3.scaleBand().range([0, width]).padding(0.1); const y = d3 .scaleLinear() .domain([0, d3.max(filteredData, (d) => d.time_total)]) .range([height, 0]); g.append("g") .attr("transform", `translate(0,${height})`) .selectAll("text") .attr("y", 10) .attr("x", 0) .attr("dy", ".35em") .style("text-anchor", "middle"); g.append("g") .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 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 jitter = d3.randomUniform( -x.bandwidth() / 3 + 5, x.bandwidth() / 3 + margin.left + 5 ); g.selectAll("circle") .data(filteredData) .join("circle") .attr("cx", (d) => x.bandwidth() / 3 + jitter() + 5) .attr("cy", (d) => y(d.time_total)) .attr("r", 5) .attr("fill", (d) => (d.http_code === 200 ? circleColor : "red")) .attr("stroke", "white") .attr("stroke-size", 1); g.append("rect") .attr("class", "box") .attr("x", 5) .attr("y", y(q3)) .attr("height", y(q1) - y(q3)) .attr("width", width + margin.left / 2) .attr("fill", "gray") .attr("stroke", "black") .attr("opacity", 0.6); g.append("text") .attr("x", width + +margin.left / 3 + 30) .attr("y", y(mean) + 6) .attr("text-anchor", "start") .attr("fill", "#1f262a") .attr("font-family", fontFamily) .text(`${mean.toFixed(2)} seconds`); g.append("text") .attr("x", width + +margin.left / 3 + 30) .attr("y", y(stddev) - 1) .attr("text-anchor", "start") .attr("font-weight", "normal") .attr("fill", "#f41706") .attr("font-family", fontFamily) .text(`${stddev.toFixed(2)} seconds`); g.append("line") .attr("class", "mean") .attr("x1", 0) .attr("x2", width + margin.left / 2 + 5) .attr("y1", y(mean)) .attr("y2", y(mean)) .attr("stroke", avgColor) .attr("stroke-width", 1.5); g.append("line") .attr("class", "stddev") .attr("x1", 0) .attr("x2", width + margin.left / 2 + 5) .attr("y1", y(stddev)) .attr("y2", y(stddev)) .attr("stroke", stdDevColor) .attr("stroke-width", 1.5); g.append("line") .attr("class", "whiskers") .attr("x1", width / 2 + 30) .attr("x2", width / 2 + 30) .attr("y1", y(lowerWhisker)) .attr("y2", y(upperWhisker)) .attr("stroke", "gray") .attr("stroke-width", 1.5); g.append("line") .attr("class", "whiskers") .attr("x1", width / 2 + 30 - 10) .attr("x2", width / 2 + 30 + 10) .attr("y1", y(lowerWhisker)) .attr("y2", y(lowerWhisker)) .attr("stroke", "gray") .attr("stroke-width", 1.5); g.append("line") .attr("class", "whiskers") .attr("x1", width / 2 + 30 - 10) .attr("x2", width / 2 + 30 + 10) .attr("y1", y(upperWhisker)) .attr("y2", y(upperWhisker)) .attr("stroke", "gray") .attr("stroke-width", 1.5); 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(); }31:T1f0f,proxyChart = { const margin = { top: 40, right: 20, bottom: 60, left: 100 }; const width = 800 - margin.left - margin.right; const height = 400 - margin.top - margin.bottom; const filteredData = data2.filter( (d) => d.http_code == 200 && d.failed_quality_filter == 0 ); const svg = d3 .create("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .style("font", "14px sans-serif"); const g = svg .append("g") .attr("transform", `translate(${margin.left},${margin.top})`); const x = d3 .scaleBand() .domain([...new Set(filteredData.map((d) => d.proxy))]) .range([0, width]) .padding(0.1); const y = d3 .scaleLinear() .domain([0, d3.max(filteredData, (d) => d.time_total)]) .range([height, 0]); g.append("g") .attr("transform", `translate(0,${height+5})`) .call(d3.axisBottom(x)) .selectAll("text") .attr("y", 20) .attr("x", 0) .attr("dy", ".35em") .style("font-size", "14px") .style("text-anchor", "middle"); g.append("g") .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 boxData = d3.group(filteredData, (d) => d.proxy); const boxPlotData = Array.from(boxData, ([key, values]) => { const q1 = d3.quantile( values.map((d) => d.time_total), 0.25 ); const median = d3.quantile( values.map((d) => d.time_total), 0.5 ); const q3 = d3.quantile( values.map((d) => d.time_total), 0.75 ); const iqr = q3 - q1; const min = d3.min(values, (d) => d.time_total); const max = d3.max(values, (d) => d.time_total); const mean = d3.mean(values, (d) => d.time_total); const stddev = Math.sqrt( d3.mean(values.map((d) => Math.pow(d.time_total - mean, 2))) ); const lowerWhisker = Math.max(min, q1 - 1.5 * iqr); const upperWhisker = Math.min(max, q3 + 1.5 * iqr); return { proxy: key, q1, median, q3, min, max, stddev, mean, lowerWhisker, upperWhisker, values }; }); 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); const jitter = d3.randomUniform(-x.bandwidth() / 2, x.bandwidth() / 2); g.selectAll("circle") .data(filteredData) .join("circle") .attr("cx", (d) => x(d.proxy) + x.bandwidth() / 2 + jitter()) .attr("cy", (d) => y(d.time_total)) .attr("r", 5) .attr("fill", (d) => (d.http_code === 200 ? circleColor : "red")) .attr("stroke", "white") .attr("stroke-size", 1); g.selectAll(".box") .data(boxPlotData) .join("rect") .attr("class", "box") .attr("x", (d) => x(d.proxy)) .attr("y", (d) => y(d.q3)) .attr("height", (d) => y(d.q1) - y(d.q3)) .attr("width", x.bandwidth()) .attr("fill", "gray") .attr("stroke", "black") .attr("opacity", 0.5) .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); }); g.selectAll(".mean") .data(boxPlotData) .join("line") .attr("class", "mean") .attr("x1", (d) => x(d.proxy)) .attr("x2", (d) => x(d.proxy) + x.bandwidth()) .attr("y1", (d) => y(d.mean)) .attr("y2", (d) => y(d.mean)) .attr("stroke", avgColor) .attr("stroke-size", 1.5) .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); }); g.selectAll(".stddev") .data(boxPlotData) .join("line") .attr("class", "stddev") .attr("x1", (d) => x(d.proxy)) .attr("x2", (d) => x(d.proxy) + x.bandwidth()) .attr("y1", (d) => y(d.stddev)) .attr("y2", (d) => y(d.stddev)) .attr("stroke", stdDevColor) .attr("stroke-size", 1.5) .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); }); g.selectAll(".whiskers") .data(boxPlotData) .join("line") .attr("class", "whiskers") .attr("x1", (d) => x(d.proxy) + x.bandwidth() / 2) .attr("x2", (d) => x(d.proxy) + x.bandwidth() / 2) .attr("y1", (d) => y(d.lowerWhisker)) .attr("y2", (d) => y(d.upperWhisker)) .attr("stroke", "gray") .attr("stroke-width", 1.5) .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); }); g.selectAll(".whiskersLower") .data(boxPlotData) .join("line") .attr("class", "whiskers") .attr("x1", (d) => x(d.proxy) + x.bandwidth() / 2 - 10) .attr("x2", (d) => x(d.proxy) + x.bandwidth() / 2 + 10) .attr("y1", (d) => y(d.lowerWhisker)) .attr("y2", (d) => y(d.lowerWhisker)) .attr("stroke", "gray") .attr("stroke-width", 1.5); g.selectAll(".whiskersUpper") .data(boxPlotData) .join("line") .attr("class", "whiskers") .attr("x1", (d) => x(d.proxy) + x.bandwidth() / 2 - 10) .attr("x2", (d) => x(d.proxy) + x.bandwidth() / 2 + 10) .attr("y1", (d) => y(d.upperWhisker)) .attr("y2", (d) => y(d.upperWhisker)) .attr("stroke", "gray") .attr("stroke-width", 1.5); 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(); }32:T2059,proxyChartFilterDomain = { const margin = { top: 40, right: 20, bottom: 60, left: 100 }; const width = 800 - margin.left - margin.right; const height = 400 - margin.top - margin.bottom; 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 svg = d3 .create("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .style("font", "14px sans-serif"); const g = svg .append("g") .attr("transform", `translate(${margin.left},${margin.top})`); const x = d3 .scaleBand() .domain([...new Set(filteredData.map((d) => d.proxy))]) .range([0, width]) .padding(0.1); 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 y = d3 .scaleLinear() .domain([0, roundedMaxY]) .range([height, 0]); g.append("g") .attr("transform", `translate(0,${height + 5})`) .call(d3.axisBottom(x)) .selectAll("text") .attr("y", 20) .attr("x", 0) .attr("dy", ".35em") .style("font-size", "14px") .style("text-anchor", "middle"); g.append("g") .call( d3 .axisLeft(y) .tickValues(yTicks) .tickFormat((d) => (d === roundedMaxY ? `${roundedMaxY} seconds` : d)) ) .selectAll("text") .style("font-size", "14px"); const boxData = d3.group(filteredData, (d) => d.proxy); const boxPlotData = Array.from(boxData, ([key, values]) => { const q1 = d3.quantile( values.map((d) => d.time_total), 0.25 ); const median = d3.quantile( values.map((d) => d.time_total), 0.5 ); const q3 = d3.quantile( values.map((d) => d.time_total), 0.75 ); const iqr = q3 - q1; const min = d3.min(values, (d) => d.time_total); const max = d3.max(values, (d) => d.time_total); const mean = d3.mean(values, (d) => d.time_total); const stddev = Math.sqrt( d3.mean(values.map((d) => Math.pow(d.time_total - mean, 2))) ); const lowerWhisker = Math.max(min, q1 - 1.5 * iqr); const upperWhisker = Math.min(max, q3 + 1.5 * iqr); return { proxy: key, q1, median, q3, min, max, stddev, mean, lowerWhisker, upperWhisker, values }; }); 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); const jitter = d3.randomUniform(-x.bandwidth() / 2, x.bandwidth() / 2); g.selectAll("circle") .data(filteredData) .join("circle") .attr("cx", (d) => x(d.proxy) + x.bandwidth() / 2 + jitter()) .attr("cy", (d) => y(d.time_total)) .attr("r", 5) .attr("fill", (d) => (d.http_code === 200 ? circleColor : "red")) .attr("stroke", "white") .attr("stroke-size", 1); g.selectAll(".box") .data(boxPlotData) .join("rect") .attr("class", "box") .attr("x", (d) => x(d.proxy)) .attr("y", (d) => y(d.q3)) .attr("height", (d) => y(d.q1) - y(d.q3)) .attr("width", x.bandwidth()) .attr("fill", "gray") .attr("stroke", "black") .attr("opacity", 0.5) .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); }); g.selectAll(".mean") .data(boxPlotData) .join("line") .attr("class", "mean") .attr("x1", (d) => x(d.proxy)) .attr("x2", (d) => x(d.proxy) + x.bandwidth()) .attr("y1", (d) => y(d.mean)) .attr("y2", (d) => y(d.mean)) .attr("stroke", avgColor) .attr("stroke-size", 1.5) .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); }); g.selectAll(".stddev") .data(boxPlotData) .join("line") .attr("class", "stddev") .attr("x1", (d) => x(d.proxy)) .attr("x2", (d) => x(d.proxy) + x.bandwidth()) .attr("y1", (d) => y(d.stddev)) .attr("y2", (d) => y(d.stddev)) .attr("stroke", stdDevColor) .attr("stroke-size", 1.5) .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); }); g.selectAll(".whiskers") .data(boxPlotData) .join("line") .attr("class", "whiskers") .attr("x1", (d) => x(d.proxy) + x.bandwidth() / 2) .attr("x2", (d) => x(d.proxy) + x.bandwidth() / 2) .attr("y1", (d) => y(d.lowerWhisker)) .attr("y2", (d) => y(d.upperWhisker)) .attr("stroke", "gray") .attr("stroke-width", 1.5) .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); }); g.selectAll(".whiskersLower") .data(boxPlotData) .join("line") .attr("class", "whiskers") .attr("x1", (d) => x(d.proxy) + x.bandwidth() / 2 - 10) .attr("x2", (d) => x(d.proxy) + x.bandwidth() / 2 + 10) .attr("y1", (d) => y(d.lowerWhisker)) .attr("y2", (d) => y(d.lowerWhisker)) .attr("stroke", "gray") .attr("stroke-width", 1.5); g.selectAll(".whiskersUpper") .data(boxPlotData) .join("line") .attr("class", "whiskers") .attr("x1", (d) => x(d.proxy) + x.bandwidth() / 2 - 10) .attr("x2", (d) => x(d.proxy) + x.bandwidth() / 2 + 10) .attr("y1", (d) => y(d.upperWhisker)) .attr("y2", (d) => y(d.upperWhisker)) .attr("stroke", "gray") .attr("stroke-width", 1.5); 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(); }33:T5bb,multiButtonSelectDomains = (params) => { const description = params.description; const options = params.options; let value = params.defaultValue; const buttonObjects = options.map((opt) => { const buttonColor = opt.label === "target.com" ? "#CC0000" : opt.label === "ebay.com" ? "#86B817" : opt.value === "walmart.com" ? "#ffc220" : opt.label === "booking.com" ? "#003580" : opt.label === "indeed.com" ? "#ff6600" : opt.label === "zillow.com" ? "#1277e1" : "#6cadf9"; const button = html``; button.onclick = () => (value = opt.value); return button; }); const view = html` `; Object.defineProperty(view, "value", { get() { return value; } }); return view; }34:T42e,multiButtonSelect = (params) => { const description = params.description; const options = params.options; let value = params.defaultValue; const buttonObjects = options.map((opt) => { const button = html``; button.onclick = () => value = opt.value; return button; }); const view = html` `; Object.defineProperty(view, "value", {get() { return value; }}); return view; }35:[{"id":"31c231cab43b48ea3f9d0ee66fcee172d4d3311eb3001502a1b62b93d40bf0b376361f170e1e72849364e2cbbfac041e99954c70f770cd1cac074ae74abbf3cd","href":"https://static.observableusercontent.com/files/31c231cab43b48ea3f9d0ee66fcee172d4d3311eb3001502a1b62b93d40bf0b376361f170e1e72849364e2cbbfac041e99954c70f770cd1cac074ae74abbf3cd","name":"data2.json","type":"application/json","lastModified":1726056534324.86,"size":10413008}] 2d:{"id":"e5b877db8f012be1","slug":null,"title":"Crawl Time Analysis","thumbnail":"6186be4cf8e0a96ff62ccb225378ec978d7f593e8af4e662b8604f34a6b95f85","access_level":"public","create_time":"$D2024-09-11T11:58:12.448Z","update_time":"$D2024-09-11T20:51:08.857Z","view_time":null,"first_public_time":"$D2024-09-11T20:23:55.149Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"5733e841fcacdf4f","login":"aimultiple","name":"AIMultiple","avatar_url":"https://avatars-next.observableusercontent.com/133d2114ff11e036d9dfe06755eaf53e3bbd77e78aa100f7dab4a973a4a04cc1","tier":"starter_2024"},"version":444,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e7aeeb92f6534769","login":"isinkosemen","name":"Isin Kosemen","avatar_url":"https://avatars-next.observableusercontent.com/eba1875f048d3ca949846e25fa68a07e302128a50076b24d7fbb281190817fbf","tier":null}],"members":[{"type":"individual","id":"e7aeeb92f6534769","login":"isinkosemen","name":"Isin Kosemen","avatar_url":"https://avatars-next.observableusercontent.com/eba1875f048d3ca949846e25fa68a07e302128a50076b24d7fbb281190817fbf","tier":null,"role":"editor"},{"type":"team","id":"5733e841fcacdf4f","login":"aimultiple","name":"AIMultiple","avatar_url":"https://avatars-next.observableusercontent.com/133d2114ff11e036d9dfe06755eaf53e3bbd77e78aa100f7dab4a973a4a04cc1","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Crawl Time Analysis","cells":[{"id":0,"value":"# Crawl Time Analysis ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":233,"value":"viewof Result = multiButtonSelect({\n description: \"Chose drill down options\",\n defaultValue: \"All\",\n options: [\n { label: \"All\", value: \"All\" },\n { label: \"By Proxy\", value: \"By Proxy\" },\n { label: \"By Proxy and Domain\", value: \"By Proxy & Domain\" }\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":346,"value":"`Selected drill down option: ${Result}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":244,"value":"viewof selectDomain = Result == \"All\"\n ? multiButtonSelectDomains({\n description: \"Chose domains\",\n defaultValue: \"All\",\n options: [\n { label: \"All\", value: \"All\" },\n ]\n })\n : Result == \"By Proxy\"\n ? multiButtonSelectDomains({\n description: \"Chose domains\",\n defaultValue: \"All\",\n options: [\n { label: \"All\", value: \"All\" },\n ]\n })\n : multiButtonSelectDomains({\n description: \"Chose domains\",\n defaultValue: \"All\",\n options: [\n { label: \"All\", value: \"All\" },\n { label: \"target.com\", value: \"target.com\" },\n { label: \"ebay.com\", value: \"ebay.com\" },\n { label: \"walmart.com\", value: \"walmart.com\" },\n { label: \"indeed.com\", value: \"indeed.com\" },\n { label: \"zillow.com\", value: \"zillow.com\" }\n ]\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":322,"value":"`Selected domain: ${selectDomain}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":296,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":304,"value":"## Crawl Times by All Proxy and Domain Groups (HTTP Code = 200 and Failed Quality = 0)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":4,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":307,"value":"## Crawl Times by Proxy and All Domain Groups (HTTP Code = 200 and Failed Quality = 0)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":198,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":311,"value":"## Crawl Times by Proxy and Filter Domain Groups (HTTP Code = 200 and Failed Quality = 0)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":313,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":235,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":258,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"data2=FileAttachment(\"data2.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":136,"value":"fontFamily=\"Arial, sans-serif\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":369,"value":"circleColor=\"#a7bed9\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":372,"value":"stdDevColor=\"#f41706\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":375,"value":"avgColor=\"#1f262a\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":377,"value":"buttonColor=\"blue\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 2e:"$2d:body"