29:null 2a:["$","title",null,{"children":"Latency vs. Price including Success Rate | AIMultiple | Observable"}] 2f:T196d,{ 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); } 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; 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 %"])}%` ) .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})`); // Red legend (0% to 49%) 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:[] 2d:{"id":"89d3ccfccc8ce84f","slug":null,"title":"Latency vs. Price including Success Rate","thumbnail":"48b7ce1980403f6a71b19811e9bc4436fec24f97b5d5aaa51b985c7c2092992d","access_level":"public","create_time":"$D2024-09-18T20:25:16.064Z","update_time":"$D2024-09-20T06:52:15.078Z","view_time":null,"first_public_time":"$D2024-09-18T21:57:44.860Z","fork":{"id":"9d961775f1905969","slug":null,"title":"Latency vs. Price","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":367,"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":"team","id":"5733e841fcacdf4f","login":"aimultiple","name":"AIMultiple","avatar_url":"https://avatars-next.observableusercontent.com/133d2114ff11e036d9dfe06755eaf53e3bbd77e78aa100f7dab4a973a4a04cc1","tier":"starter_2024","role":"editor"},{"type":"individual","id":"e7aeeb92f6534769","login":"isinkosemen","name":"Isin Kosemen","avatar_url":"https://avatars-next.observableusercontent.com/eba1875f048d3ca949846e25fa68a07e302128a50076b24d7fbb281190817fbf","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Latency vs. Price including Success Rate","cells":[{"id":0,"value":"# Latency vs. Price including Success Rate","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":341,"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":353,"value":"imgWidth = 80","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":351,"value":"imgHeight = 80","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":355,"value":"imgWidthBorder = imgWidth + 20","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":357,"value":"imgHeightBorder = imgHeight - 20","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":359,"value":"strokeWidth = 10","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":346,"value":"uniqueDomainsWithAll = [\"All\", ...uniqueDomains]","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":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":"$W31","stdlib":"1","titling":"auto"}} 2e:"$2d:body"