29:null 2a:["$","title",null,{"children":"Latency vs. Price including Success Rate - Updated Data | AIMultiple | Observable"}] 2f:T15bf,{ const svg = d3.select(DOM.svg(900, 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 dataFiltered = dataWithLogos.filter((d) => selectedDomain !== "All" ? d["$/1K Req."] != 0 && d.domain === selectedDomain && d.subcategory === selectedSubCategory : d["$/1K Req."] != 0 ); const x = d3 .scaleLinear() .domain([0, d3.max(dataFiltered, (d) => d["$/1K Req."]) + 0.5]) .nice() .range([0, width]); const y = d3 .scaleLinear() .domain([0, d3.max(dataFiltered, (d) => d["Avg. Response Time"])]) .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*100); } const padding = 30; const logos = []; svg .selectAll("g") .data(dataFiltered) .enter() .append("g") .each(function (d) { const group = d3.select(this); const xPos = x(d["$/1K Req."]) + margin.left; const yPos = y(d["Avg. Response Time"]) + margin.top; group .append("circle") .attr("cx", xPos) .attr("cy", yPos) .attr("r", 10) .attr("stroke", getStrokeColor(d["Success Rate %"])) .attr("stroke-width", strokeWidth) .attr("fill", "none"); let adjustedX = xPos; let adjustedY = yPos; logos.forEach((logo) => { const dx = logo.x - adjustedX; const dy = logo.y - adjustedY; const distance = Math.sqrt(dx * dx + dy * dy); if (distance < padding) { adjustedX -= padding * (dx / distance); adjustedY += padding * (dy / distance); } }); logos.push({ x: adjustedX, y: adjustedY }); group .append("image") .attr("xlink:href", d["providerLogo"]) .attr("x", adjustedX - 20) .attr("y", adjustedY - 35) .attr("width", imgWidth) .attr("height", imgHeight); }) .on("mouseover", function (event, d) { xPosFixed = x(d["$/1K Req."]) + margin.left; yPosFixed = y(d["Avg. Response Time"]) + margin.top; tooltip .style("opacity", 1) .html( `Provider: ${d.provider}
Price: $${d3.format(".2f")( d["$/1K Req."] )} per 1000 requests
Average Time: ${d3.format(".2f")( d["Avg. Response Time"] )} seconds
Success Rate: ${d3.format(".0f")( d["Success Rate %"]*100 )}%` ) .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)"); return svg.node(); }30:[{"id":"394ed5be36611f132ffaed1693af0320d197060e264e98c127a41819000505c62fe93aef5af33d9c116df5781751efe224ab22589eaa367de8d4bd5f5cc61932","href":"https://static.observableusercontent.com/files/394ed5be36611f132ffaed1693af0320d197060e264e98c127a41819000505c62fe93aef5af33d9c116df5781751efe224ab22589eaa367de8d4bd5f5cc61932","name":"dedicatedAPIResults.json","type":"application/json","lastModified":1728391862456.037,"size":26504}] 2d:{"id":"f7ec865be4efd914","slug":null,"title":"Latency vs. Price including Success Rate - Updated Data","thumbnail":"942de7dcd3940249e4d6c6e697308dc606b5f98fa830310896ed7b6f0432716c","access_level":"public","create_time":"$D2024-10-08T12:50:44.138Z","update_time":"$D2024-10-10T16:41:43.724Z","view_time":null,"first_public_time":"$D2024-10-10T15:58:19.493Z","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":455,"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":0,"collection":null,"type":"notebook","body":{"title":"Latency vs. Price including Success Rate - Updated Data","cells":[{"id":0,"value":"# Latency vs. Price including Success Rate - Updated Data","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(uniqueDomains, {\n format: (x) => x,\n value: \"All\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":408,"value":"html`

Select a subcategory:

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":403,"value":"viewof selectedSubCategory = Inputs.select(uniqueSubCategories, {\n format: (x) => x,\n value: \"amazon_category\"\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":413,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":353,"value":"imgWidth = 50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":351,"value":"imgHeight = 20","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":355,"value":"imgWidthBorder = imgWidth + 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":357,"value":"imgHeightBorder = imgHeight - 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":359,"value":"strokeWidth = 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":400,"value":"uniqueSubCategories = Array.from(new Set(data.filter(d => d.domain === selectedDomain).map(d => d.subcategory)))","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(data.map(d => d.domain)));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":383,"value":"dataWithLogos = data.map((item) => {\n const logo = dataLogos.find(\n (logoItem) => logoItem.Provider === item.provider\n );\n return {\n ...item,\n providerLogo: logo ? logo[\"Provider Logo\"] : null\n };\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":379,"value":"dataLogos = [\n {\n Provider: \"brightdata\",\n \"Provider Logo\":\n \"https://seeklogo.com/images/B/brightdata-logo-0B731D9F1F-seeklogo.com.png\"\n },\n {\n Provider: \"apify\",\n \"Provider Logo\":\n \"https://upload.wikimedia.org/wikipedia/commons/thumb/2/28/Apify-logo.svg/768px-Apify-logo.svg.png?20220616161932\"\n },\n {\n Provider: \"nimble\",\n \"Provider Logo\":\n \"https://www.privateproxyreviews.com/wp-content/uploads/2023/01/Nimbleway-Review.jpg\"\n },\n {\n Provider: \"oxylabs\",\n \"Provider Logo\":\n \"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRgMBu3BdE2BOqBsdu028fuRidy6HDYFoxKtg&s\"\n },\n {\n Provider: \"smart_proxy\",\n \"Provider Logo\":\n \"https://www.privateproxyreviews.com/wp-content/uploads/2018/07/smartproxy-logo.png\"\n }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":122,"value":"data = FileAttachment(\"dedicatedAPIResults.json\").json()","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"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2e:"$2d:body"