29:null 2a:["$","title",null,{"children":"Latency vs. Price including Success Rate & Pricing Details | AIMultiple | Observable"}] 2f:T2f23,{ const svg = d3.select(DOM.svg(1200, 600)); const margin = { top: 50, right: 150, bottom: 80, left: 70 }; const width = svg.attr("width") - margin.left - margin.right; const height = svg.attr("height") - margin.top - margin.bottom; const data = dataSummary.filter((d) => selectedDomain !== "All" ? d["Price ($/1000 Requests)"] != 0 && d.domain === selectedDomain : d["Price ($/1000 Requests)"] != 0 ); const x = d3 .scaleLinear() .domain([0, d3.max(dataSummary, (d) => d["Price ($/1000 Requests)"]) + 0.5]) .nice() .range([0, width]); const y = d3 .scaleLinear() .domain([0, d3.max(dataSummary, (d) => d["Avg. Response Time (s)"])]) .nice() .range([height, 0]); const tooltip = d3 .select("body") .append("div") .style("position", "absolute") .style("background-color", "white") .style("border", "1px solid black") .style("border-radius", "5px") .style("padding", "10px") .style("pointer-events", "none") .style("opacity", 0); const verticalLine = svg .append("line") .style("stroke", "gray") .style("stroke-width", 1) .style("stroke-dasharray", "4, 4") .style("pointer-events", "none"); const horizontalLine = svg .append("line") .style("stroke", "gray") .style("stroke-width", 1) .style("stroke-dasharray", "4, 4") .style("pointer-events", "none"); let xPosFixed, yPosFixed; const colorScale = d3 .scaleLinear() .domain([0, 20, 40, 60, 80, 100]) .range([ "darkred", "indianred", "lightcoral", "lightgreen", "green", "darkgreen" ]); function getStrokeColor(successRate) { return colorScale(successRate); } function createAdditionalChartBrightdata() { const svgChart = d3.select(DOM.svg(300, 300)); const margin = { top: 40, right: 20, bottom: 60, left: 40 }; const width = +svgChart.attr("width") - margin.left - margin.right; const height = +svgChart.attr("height") - margin.top - margin.bottom; const x = d3 .scaleLinear() .domain([0, d3.max(dataPricing, (d) => d.Brightdata)]) .range([0, width]); const y = d3 .scaleLog() .domain([ d3.min(dataPricing, (d) => d["Query Count (per Month)"]), d3.max(dataPricing, (d) => d["Query Count (per Month)"]) ]) .range([height, 0]); const maxX = d3.max(dataPricing, (d) => d.Brightdata); const tickValuesX = [0, maxX / 2, maxX]; svgChart .append("g") .attr("transform", `translate(${margin.left},${height + margin.top})`) .call( d3.axisBottom(x).tickValues(tickValuesX).tickFormat(d3.format(".0s")) ) .attr("font-size", "16px") .attr("font-family", fontFamily) .append("text") .attr("class", "label") .attr("x", width + 20) .attr("y", 50) .attr("fill", "#000") .attr("text-anchor", "end") .attr("font-size", "16px") .attr("font-family", fontFamily) .attr("font-weight", "bold") .text("Cost ($)"); svgChart .append("g") .attr("class", "y axis") .attr("transform", `translate(${margin.left},${margin.top})`) .call(d3.axisLeft(y)) .attr("font-size", "16px") .attr("font-family", fontFamily) .append("text") .attr("class", "label") .attr("transform", "rotate(0)") .attr("y", -20) .attr("x", -margin.left) .attr("fill", "#000") .attr("text-anchor", "start") .attr("font-size", "16px") .attr("font-weight", "bold") .attr("font-family", fontFamily) .text("Monthly Query Count"); svgChart .selectAll("circle") .data(dataPricing) .enter() .append("circle") .attr("cx", (d) => x(d.Brightdata) + margin.left) .attr("cy", (d) => y(d["Query Count (per Month)"]) + margin.top) .attr("r", 5) .style("fill", "black"); const lineGenerator = d3 .line() .x((d) => x(d.Brightdata) + margin.left) .y((d) => y(d["Query Count (per Month)"]) + margin.top) .curve(d3.curveLinear); svgChart .append("path") .data([dataPricing]) .attr("d", lineGenerator) .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", 2); return svgChart.node().outerHTML; } function createAdditionalChartApify() { const svgChart = d3.select(DOM.svg(300, 300)); const margin = { top: 40, right: 20, bottom: 60, left: 40 }; const width = +svgChart.attr("width") - margin.left - margin.right; const height = +svgChart.attr("height") - margin.top - margin.bottom; const x = d3 .scaleLinear() .domain([0, d3.max(dataPricing, (d) => d.Apify)]) .range([0, width]); const y = d3 .scaleLog() .domain([ d3.min(dataPricing, (d) => d["Query Count (per Month)"]), d3.max(dataPricing, (d) => d["Query Count (per Month)"]) ]) .range([height, 0]); const maxX = d3.max(dataPricing, (d) => d.Apify); const tickValuesX = [0, maxX / 2, maxX]; svgChart .append("g") .attr("transform", `translate(${margin.left},${height + margin.top})`) .call( d3.axisBottom(x).tickValues(tickValuesX).tickFormat(d3.format(".0s")) ) .attr("font-size", "16px") .attr("font-family", fontFamily) .append("text") .attr("class", "label") .attr("x", width + 20) .attr("y", 50) .attr("fill", "#000") .attr("text-anchor", "end") .attr("font-size", "16px") .attr("font-family", fontFamily) .attr("font-weight", "bold") .text("Cost ($)"); svgChart .append("g") .attr("class", "y axis") .attr("transform", `translate(${margin.left},${margin.top})`) .call(d3.axisLeft(y)) .attr("font-size", "16px") .attr("font-family", fontFamily) .append("text") .attr("class", "label") .attr("transform", "rotate(0)") .attr("y", -20) .attr("x", -margin.left) .attr("fill", "#000") .attr("text-anchor", "start") .attr("font-size", "16px") .attr("font-weight", "bold") .attr("font-family", fontFamily) .text("Monthly Query Count"); svgChart .selectAll("circle") .data(dataPricing) .enter() .append("circle") .attr("cx", (d) => x(d.Apify) + margin.left) .attr("cy", (d) => y(d["Query Count (per Month)"]) + margin.top) .attr("r", 5) .style("fill", "black"); const lineGenerator = d3 .line() .x((d) => x(d.Apify) + margin.left) .y((d) => y(d["Query Count (per Month)"]) + margin.top) .curve(d3.curveLinear); svgChart .append("path") .data([dataPricing]) .attr("d", lineGenerator) .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", 2); return svgChart.node().outerHTML; } svg .selectAll("g") .data(data) .enter() .append("g") .each(function (d) { const group = d3.select(this); group .append("rect") .attr( "x", x(d["Price ($/1000 Requests)"]) + margin.left - imgWidthBorder / 2 ) .attr( "y", y(d["Avg. Response Time (s)"]) + margin.top - imgHeightBorder / 2 ) .attr("width", imgWidthBorder) .attr("height", imgHeightBorder) .attr("stroke", getStrokeColor(d["Success %"])) .attr("stroke-width", strokeWidth) .attr("fill", "none"); group .append("image") .attr("xlink:href", d["Provider Logo"]) .attr("x", x(d["Price ($/1000 Requests)"]) + margin.left - imgWidth / 2) .attr("y", y(d["Avg. Response Time (s)"]) + margin.top - imgHeight / 2) .attr("width", imgWidth) .attr("height", imgHeight); }) .on("mouseover", function (event, d) { xPosFixed = x(d["Price ($/1000 Requests)"]) + margin.left; yPosFixed = y(d["Avg. Response Time (s)"]) + margin.top; let additionalChartHTML = ""; if (d.Provider === "brightdata") { additionalChartHTML = createAdditionalChartBrightdata(); } else if (d.Provider === "apify") { additionalChartHTML = createAdditionalChartApify(); } tooltip .style("opacity", 1) .html( `Provider: ${d.Provider}
Price: $${d3.format(".2f")( d["Price ($/1000 Requests)"] )} per 1000 requests
Average Time: ${d3.format(".2f")( d["Avg. Response Time (s)"] )} seconds
Success Rate: ${d3.format(".0f")(d["Success %"])}%
Pricing Details:
${additionalChartHTML}` ) .style("left", xPosFixed + 10 + "px") .style("top", yPosFixed - 10 + "px"); verticalLine .attr("x1", xPosFixed) .attr("y1", yPosFixed) .attr("x2", xPosFixed) .attr("y2", height + margin.top); horizontalLine .attr("x1", margin.left) .attr("y1", yPosFixed) .attr("x2", xPosFixed) .attr("y2", yPosFixed); }) .on("mousemove", function (event) { tooltip .style("left", d3.pointer(event)[0] + 10 + "px") .style("top", d3.pointer(event)[1] - 10 + "px"); }) .on("mouseout", function () { tooltip.style("opacity", 0); verticalLine.attr("x1", 0).attr("y1", 0).attr("x2", 0).attr("y2", 0); horizontalLine.attr("x1", 0).attr("y1", 0).attr("x2", 0).attr("y2", 0); }); svg .append("g") .attr("class", "x axis") .attr("transform", `translate(${margin.left},${height + margin.top})`) .call( d3.axisBottom(x).tickFormat((d) => (d === 0 ? "" : d3.format(".1f")(d))) ) .attr("font-size", "16px") .attr("font-family", fontFamily) .append("text") .attr("class", "label") .attr("x", width) .attr("y", 50) .attr("fill", "#000") .attr("text-anchor", "end") .attr("font-size", "16px") .attr("font-family", fontFamily) .attr("font-weight", "bold") .text("Price ($/1000 Requests)"); svg .append("g") .attr("class", "y axis") .attr("transform", `translate(${margin.left},${margin.top})`) .call(d3.axisLeft(y).tickFormat((d) => (d === 0 ? "" : d))) .attr("font-size", "16px") .attr("font-family", fontFamily) .append("text") .attr("class", "label") .attr("transform", "rotate(0)") .attr("y", -20) .attr("x", -margin.left) .attr("fill", "#000") .attr("text-anchor", "start") .attr("font-size", "16px") .attr("font-weight", "bold") .attr("font-family", fontFamily) .text("Latency (seconds)"); const legend = svg .append("g") .attr("transform", `translate(${width + margin.left + 40}, ${margin.top})`); legend .append("text") .attr("x", -20) .attr("y", -20) .attr("font-size", "16px") .attr("font-family", fontFamily) .attr("font-weight", "bold") .attr("text-anchor", "middle") .text("Success Rate"); const legendRectData = [0, 20, 40, 60, 80]; const legendTextData = [0, 20, 40, 60, 80, 100]; legend .selectAll("rect.legend") .data(legendRectData) .enter() .append("rect") .attr("class", "color") .attr("x", -20) .attr("y", (d, i) => 0 + i * 40) .attr("width", 20) .attr("height", 40) .attr("fill", (d) => colorScale(d)); legend .selectAll("text.legend") .data(legendTextData) .enter() .append("text") .attr("x", 10) .attr("y", (d, i) => 6 + i * 40) .attr("font-size", "16px") .attr("font-family", fontFamily) .text((d) => `${d}%`); legend .selectAll("line.legend") .data(legendTextData) .enter() .append("line") .attr("x1", -20) .attr("x2", 5) .attr("y1", (d, i) => 0 + i * 40) .attr("y2", (d, i) => 0 + i * 40) .attr("stroke", "black") .attr("stroke-width", 1); return svg.node(); }30:T751,dataSummary = [ { domain: "https://x.com", "Total Queries": 100, "Avg. Response Time (s)": 34.28, "Price ($/1000 Requests)": 3.5, "Success %": 100.0, Provider: "apify", "Provider Logo": "https://upload.wikimedia.org/wikipedia/commons/thumb/2/28/Apify-logo.svg/768px-Apify-logo.svg.png?20220616161932" }, { domain: "https://www.linkedin.com", "Total Queries": 92, "Avg. Response Time (s)": 45.37, "Price ($/1000 Requests)": 2.0, "Success %": 100.0, Provider: "apify", "Provider Logo": "https://upload.wikimedia.org/wikipedia/commons/thumb/2/28/Apify-logo.svg/768px-Apify-logo.svg.png?20220616161932" }, { domain: "https://x.com", "Total Queries": 100, "Avg. Response Time (s)": 33.76, "Price ($/1000 Requests)": 1.02, "Success %": 98.0, Provider: "brightdata", "Provider Logo": "https://seeklogo.com/images/B/brightdata-logo-0B731D9F1F-seeklogo.com.png" }, { domain: "https://www.linkedin.com", "Total Queries": 92, "Avg. Response Time (s)": 25.22, "Price ($/1000 Requests)": 1.08, "Success %": 92.39, Provider: "brightdata", "Provider Logo": "https://seeklogo.com/images/B/brightdata-logo-0B731D9F1F-seeklogo.com.png" }, { domain: "https://x.com", "Total Queries": 100, "Avg. Response Time (s)": 18.7, "Price ($/1000 Requests)": 0, "Success %": 35.0, Provider: "nimble", "Provider Logo": "https://www.privateproxyreviews.com/wp-content/uploads/2023/01/Nimbleway-Review.jpg" }, { domain: "https://www.linkedin.com", "Total Queries": 92, "Avg. Response Time (s)": 11.86, "Price ($/1000 Requests)": 0, "Success %": 72.83, Provider: "nimble", "Provider Logo": "https://www.privateproxyreviews.com/wp-content/uploads/2023/01/Nimbleway-Review.jpg" } ]31:T13fe,{ const svg = d3.select(DOM.svg(400, 600)); const margin = { top: 50, right: 50, bottom: 80, left: 50 }; const width = +svg.attr("width") - margin.left - margin.right; const height = +svg.attr("height") - margin.top - margin.bottom; const x = d3 .scaleLinear() .domain([0, d3.max(dataPricing, (d) => Math.max(d.Brightdata, d.Apify))]) .range([0, width]); const y = d3 .scaleLog() .domain([ d3.min(dataPricing, (d) => d["Query Count (per Month)"]), d3.max(dataPricing, (d) => d["Query Count (per Month)"]) ]) .range([height, 0]); //const uniqueXValues = [...new Set(dataPricing.map(d => d.Brightdata))]; //const filteredXValues = uniqueXValues.filter(d => d !== 0) const maxX = d3.max(dataPricing, (d) => Math.max(d.Brightdata, d.Apify)); //const tickValuesX = x.ticks(3).concat(maxX).filter((v, i, self) => self.indexOf(v) === i) const tickValuesX = [0, maxX / 2, maxX]; const gX = svg .append("g") .attr("transform", `translate(${margin.left},${height + margin.top})`) //.call(d3.axisBottom(x).ticks(3).tickValues(filteredXValues).tickFormat(d3.format(".0s"))) .call(d3.axisBottom(x).tickValues(tickValuesX).tickFormat(d3.format(".0s"))) .attr("font-size", "16px") .attr("font-family", fontFamily) .append("text") .attr("class", "label") .attr("x", width + 20) .attr("y", 50) .attr("fill", "#000") .attr("text-anchor", "end") .attr("font-size", "16px") .attr("font-family", fontFamily) .attr("font-weight", "bold") .text("Cost ($)"); const gY = svg .append("g") .attr("class", "y axis") .attr("transform", `translate(${margin.left},${margin.top})`) .call(d3.axisLeft(y)) .attr("font-size", "16px") .attr("font-family", fontFamily) .append("text") .attr("class", "label") .attr("transform", "rotate(0)") .attr("y", -20) .attr("x", -margin.left) .attr("fill", "#000") .attr("text-anchor", "start") .attr("font-size", "16px") .attr("font-weight", "bold") .attr("font-family", fontFamily) .text("Monthly Query Count"); svg .selectAll(".brightdata-circle") .data(dataPricing) .enter() .append("circle") .attr("class", "brightdata-circle") .attr("cx", (d) => x(d.Brightdata) + margin.left) .attr("cy", (d) => y(d["Query Count (per Month)"]) + margin.top) .attr("r", 5) .style("fill", "blue") .on("mouseover", function () { svg .selectAll(".hover-label") .data(dataPricing) .enter() .append("text") .attr("class", "hover-label") .attr("x", (d) => x(d.Brightdata) + margin.left + 10) .attr("y", (d) => y(d["Query Count (per Month)"]) + margin.top - 10) .attr("font-family", fontFamily) .attr("font-size", "12px") .attr("fill", "blue") .text((d) => d.Brightdata); }) .on("mouseout", function () { svg.selectAll(".hover-label").remove(); }); const lineGeneratorBrightdata = d3 .line() .x((d) => x(d.Brightdata) + margin.left) .y((d) => y(d["Query Count (per Month)"]) + margin.top) .curve(d3.curveLinear); svg .append("path") .data([dataPricing]) .attr("d", lineGeneratorBrightdata) .attr("fill", "none") .attr("stroke", "blue") .attr("stroke-width", 2) .on("mouseover", showLabelsBrighdata) .on("mouseout", hideLabels); svg .selectAll(".apify-circle") .data(dataPricing) .enter() .append("circle") .attr("class", "apify-circle") .attr("cx", (d) => x(d.Apify) + margin.left) .attr("cy", (d) => y(d["Query Count (per Month)"]) + margin.top) .attr("r", 5) .style("fill", "green"); const lineGeneratorApify = d3 .line() .x((d) => x(d.Apify) + margin.left) .y((d) => y(d["Query Count (per Month)"]) + margin.top) .curve(d3.curveLinear); svg .append("path") .data([dataPricing]) .attr("d", lineGeneratorApify) .attr("fill", "none") .attr("stroke", "green") .attr("stroke-width", 2) .on("mouseover", showLabelsApify) .on("mouseout", hideLabels); function showLabelsBrighdata() { svg .selectAll(".hover-label") .data(dataPricing) .enter() .append("text") .attr("class", "hover-label") .attr("x", (d) => x(d.Brightdata) + margin.left + 10) .attr("y", (d) => y(d["Query Count (per Month)"]) + margin.top - 10) .attr("font-family", fontFamily) .attr("font-size", "12px") .attr("fill", "black") .text((d) => d.Brightdata); } function showLabelsApify() { svg .selectAll(".hover-label") .data(dataPricing) .enter() .append("text") .attr("class", "hover-label") .attr("x", (d) => x(d.Apify) + margin.left + 10) .attr("y", (d) => y(d["Query Count (per Month)"]) + margin.top - 10) .attr("font-family", fontFamily) .attr("font-size", "12px") .attr("fill", "green") .text((d) => d.Apify); } function hideLabels() { svg.selectAll(".hover-label").remove(); } return svg.node(); }32:Ta8d,{ const svg = d3.select(DOM.svg(400, 600)); const margin = { top: 50, right: 50, bottom: 80, left: 50 }; const width = +svg.attr("width") - margin.left - margin.right; const height = +svg.attr("height") - margin.top - margin.bottom; const x = d3 .scaleLinear() .domain([0, d3.max(dataPricing, (d) => d.Brightdata)]) .range([0, width]); const y = d3 .scaleLog() .domain([ d3.min(dataPricing, (d) => d["Query Count (per Month)"]), d3.max(dataPricing, (d) => d["Query Count (per Month)"]) ]) .range([height, 0]); //const uniqueXValues = [...new Set(dataPricing.map(d => d.Brightdata))]; //const filteredXValues = uniqueXValues.filter(d => d !== 0) const maxX = d3.max(dataPricing, d => d.Brightdata); //const tickValuesX = x.ticks(3).concat(maxX).filter((v, i, self) => self.indexOf(v) === i) const tickValuesX = [0, maxX / 2, maxX]; const gX = svg .append("g") .attr("transform", `translate(${margin.left},${height + margin.top})`) //.call(d3.axisBottom(x).ticks(3).tickValues(filteredXValues).tickFormat(d3.format(".0s"))) .call(d3.axisBottom(x).tickValues(tickValuesX).tickFormat(d3.format(".0s"))) .attr("font-size", "16px") .attr("font-family", fontFamily) .append("text") .attr("class", "label") .attr("x", width + 20) .attr("y", 50) .attr("fill", "#000") .attr("text-anchor", "end") .attr("font-size", "16px") .attr("font-family", fontFamily) .attr("font-weight", "bold") .text("Cost ($)"); const gY = svg .append("g") .attr("class", "y axis") .attr("transform", `translate(${margin.left},${margin.top})`) .call(d3.axisLeft(y)) .attr("font-size", "16px") .attr("font-family", fontFamily) .append("text") .attr("class", "label") .attr("transform", "rotate(0)") .attr("y", -20) .attr("x", -margin.left) .attr("fill", "#000") .attr("text-anchor", "start") .attr("font-size", "16px") .attr("font-weight", "bold") .attr("font-family", fontFamily) .text("Monthly Query Count"); svg .selectAll("circle") .data(dataPricing) .enter() .append("circle") .attr("cx", (d) => x(d.Brightdata) + margin.left) .attr("cy", (d) => y(d["Query Count (per Month)"]) + margin.top) .attr("r", 5) .style("fill", "blue"); const lineGenerator = d3 .line() .x((d) => x(d.Brightdata) + margin.left) .y((d) => y(d["Query Count (per Month)"]) + margin.top) .curve(d3.curveLinear); svg .append("path") .data([dataPricing]) .attr("d", lineGenerator) .attr("fill", "none") .attr("stroke", "blue") .attr("stroke-width", 2); return svg.node(); }33:T934,{ const svg = d3.select(DOM.svg(400, 600)); const margin = { top: 50, right: 50, bottom: 80, left: 50 }; const width = +svg.attr("width") - margin.left - margin.right; const height = +svg.attr("height") - margin.top - margin.bottom; const x = d3 .scaleLinear() .domain([0, d3.max(dataPricing, (d) => d.Apify)]) .range([0, width]); const y = d3 .scaleLog() .domain([ d3.min(dataPricing, (d) => d["Query Count (per Month)"]), d3.max(dataPricing, (d) => d["Query Count (per Month)"]) ]) .range([height, 0]); const maxX = d3.max(dataPricing, d => d.Apify); const tickValuesX = [0, maxX / 2, maxX]; const gX = svg .append("g") .attr("transform", `translate(${margin.left},${height + margin.top})`) .call(d3.axisBottom(x).tickValues(tickValuesX).tickFormat(d3.format(".0s"))) .attr("font-size", "16px") .attr("font-family", fontFamily) .append("text") .attr("class", "label") .attr("x", width + 20) .attr("y", 50) .attr("fill", "#000") .attr("text-anchor", "end") .attr("font-size", "16px") .attr("font-family", fontFamily) .attr("font-weight", "bold") .text("Cost ($)"); const gY = svg .append("g") .attr("class", "y axis") .attr("transform", `translate(${margin.left},${margin.top})`) .call(d3.axisLeft(y)) .attr("font-size", "16px") .attr("font-family", fontFamily) .append("text") .attr("class", "label") .attr("transform", "rotate(0)") .attr("y", -20) .attr("x", -margin.left) .attr("fill", "#000") .attr("text-anchor", "start") .attr("font-size", "16px") .attr("font-weight", "bold") .attr("font-family", fontFamily) .text("Monthly Query Count"); svg .selectAll("circle") .data(dataPricing) .enter() .append("circle") .attr("cx", (d) => x(d.Apify) + margin.left) .attr("cy", (d) => y(d["Query Count (per Month)"]) + margin.top) .attr("r", 5) .style("fill", "green"); const lineGenerator = d3 .line() .x((d) => x(d.Apify) + margin.left) .y((d) => y(d["Query Count (per Month)"]) + margin.top) .curve(d3.curveLinear); svg .append("path") .data([dataPricing]) .attr("d", lineGenerator) .attr("fill", "none") .attr("stroke", "green") .attr("stroke-width", 2); return svg.node(); }34:[] 2d:{"id":"436c50c0df07cfa2","slug":null,"title":"Latency vs. Price including Success Rate & Pricing Details","thumbnail":"48b7ce1980403f6a71b19811e9bc4436fec24f97b5d5aaa51b985c7c2092992d","access_level":"public","create_time":"$D2024-09-18T21:58:09.577Z","update_time":"$D2024-10-01T18:48:38.233Z","view_time":null,"first_public_time":"$D2024-09-18T22:35:31.002Z","fork":{"id":"89d3ccfccc8ce84f","slug":null,"title":"Latency vs. Price including Success Rate","owner":{"id":"5733e841fcacdf4f","login":"aimultiple","name":"AIMultiple"}},"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":555,"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":1,"collection":null,"type":"notebook","body":{"title":"Latency vs. Price including Success Rate & Pricing Details","cells":[{"id":0,"value":"# Latency vs. Price including Success Rate & Pricing Details","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":47,"value":"html`

Select a domain:

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":194,"value":"viewof selectedDomain = Inputs.select(uniqueDomainsWithAll, {\n format: (x) => x,\n value: \"All\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":459,"value":"html`

Hover on each provider to see details.

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":53,"value":"uniqueDomains = Array.from(new Set(dataSummary.map(d => d.domain)));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":122,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":533,"value":"### Brighdata & Apify Pricing Details","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":554,"value":"### Hover on each provider to see price details.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":528,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":440,"value":"### Brighdata Pricing Details","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":348,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":524,"value":"### Apify Pricing Details","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":474,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":479,"value":"imgWidth = 80","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":482,"value":"imgHeight = 80","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":485,"value":"imgWidthBorder = imgWidth + 20","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":487,"value":"imgHeightBorder = imgHeight - 20","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":502,"value":"strokeWidth = 10","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":462,"value":"uniqueDomainsWithAll = [\"All\", ...uniqueDomains]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":343,"value":"dataPricing = [\n {\n \"Query Count (per Month)\": 100,\n \"Brightdata\": 0.1,\n \"Apify\": 0\n },\n {\n \"Query Count (per Month)\": 1000,\n \"Brightdata\": 1,\n \"Apify\": 0\n },\n {\n \"Query Count (per Month)\": 10000,\n \"Brightdata\": 8.5,\n \"Apify\": 30\n },\n {\n \"Query Count (per Month)\": 100000,\n \"Brightdata\": 72,\n \"Apify\": 345\n },\n {\n \"Query Count (per Month)\": 1000000,\n \"Brightdata\": 702,\n \"Apify\": 3495.00\n }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":16,"value":"fontFamily = \"Work Sans\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":102,"value":"pricingData = [\n { queryCount: 10, brightdata: 0 },\n { queryCount: 100, brightdata: 0 },\n { queryCount: 1000, brightdata: 1 },\n { queryCount: 10000, brightdata: 9 },\n { queryCount: 100000, brightdata: 72 },\n { queryCount: 1000000, brightdata: 702 },\n { queryCount: 10000000, brightdata: 7002 },\n { queryCount: 100000000, brightdata: 70002 },\n { queryCount: 1000000000, brightdata: 700002 },\n ];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 2e:"$2d:body"