29:null 2a:["$","title",null,{"children":"Pricing Details - Summary Per Subcategory | AIMultiple | Observable"}] 2f:T3a0b,{ const svg = d3.select(DOM.svg(600, 600)); const margin = { top: 80, right: 200, bottom: 80, left: 50 }; const width = +svg.attr("width") - margin.left - margin.right; const height = +svg.attr("height") - margin.top - margin.bottom; const dataFiltered = data.filter( (d) => d.subcategory === selectedSubCategory && // add filter for y scale -- number of requests up to 1.3 M d.requests < 1300001 ); const grayColor = "#ccc"; const colorApify = "blue"; const colorBrightdata = "green"; const colorNimble = "orange"; const colorOxylabs = "purple"; const colorSmartProxy = "red"; const x = d3 .scaleLinear() .domain([ 0, d3.max(dataFiltered, (d) => Math.max(d.brightdata, d.apify, d.nimble, d.oxylabs, d.smart_proxy) ) ]) .range([0, width]); const y = d3 .scaleLog() .domain([ d3.min(dataFiltered, (d) => d.requests), d3.max(dataFiltered, (d) => d.requests) ]) .range([height, 0]); const maxX = d3.max(dataFiltered, (d) => Math.max(d.brightdata, d.apify, d.nimble, d.oxylabs, d.smart_proxy) ); const tickValuesX = [0, maxX / 2, maxX]; const maxY = d3.max(dataFiltered, (d) => d.requests); const tickValuesY = [d3.min(dataFiltered, (d) => d.requests), maxY]; 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).tickValues(tickValuesY).tickFormat(d3.format(".2s"))) .attr("font-size", "16px") .attr("font-family", fontFamily) .append("text") .attr("class", "label") .attr("transform", "rotate(0)") .attr("y", -60) .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"); const labels = { brightdata: null, apify: null, nimble: null, oxylabs: null, smartProxy: null }; const tooltip = svg .append("text") .attr("class", "tooltip") .attr("font-size", "12px") .style("opacity", 0); const tableTooltip = d3 .select("body") .append("div") .attr("class", "table-tooltip") .style("position", "absolute") .style("background-color", "white") .style("border", "1px solid gray") .style("padding", "10px") .style("font-size", "12px") .style("opacity", 0); function addProviderLabels(data, provider, color, labelText) { const maxYData = d3.max(data, (d) => d[provider]); labels[provider] = svg .append("text") .attr("x", x(maxYData) + margin.left + 5) .attr("y", y(d3.max(data, (d) => d.requests)) + margin.top - 30) .text(labelText) .style("fill", "none") .style("font-size", "12px") .style("font-weight", "bold"); } addProviderLabels(dataFiltered, "brightdata", colorBrightdata, "Brightdata"); addProviderLabels(dataFiltered, "apify", colorApify, "Apify"); addProviderLabels(dataFiltered, "nimble", colorNimble, "Nimble"); addProviderLabels(dataFiltered, "oxylabs", colorOxylabs, "Oxylabs"); addProviderLabels(dataFiltered, "smart_proxy", colorSmartProxy, "Smartproxy"); function highlightProvider(circles, line, color, provider) { circles.style("fill", color); line.style("stroke", color); labels[provider].style( "fill", provider === "brightdata" ? colorBrightdata : color ); } function resetHighlight(circles, line, provider) { circles.style("fill", grayColor); line.style("stroke", grayColor); labels[provider].style("fill", "none"); } const brightdataCircles = svg .selectAll(".brightdata-circle") .data(dataFiltered) .enter() .append("circle") .attr("class", "brightdata-circle") .attr("cx", (d) => x(d.brightdata) + margin.left) .attr("cy", (d) => y(d.requests) + margin.top) .attr("r", 5) .style("fill", colorBrightdata) .on("mouseover", function (event, d) { d3.select(this).raise(); highlightProvider( brightdataCircles, brightdataLine, colorBrightdata, "brightdata" ); brightdataLine.raise(); tooltip .attr("x", x(d.brightdata) + margin.left + 10) .attr("y", y(d.requests) + margin.top - 10) .text( `$${d3.format(",")(d.brightdata)} per ${d3.format(",")( d.requests )} requests` ) .style("opacity", 1) .style("fill", colorBrightdata); const brightdataEntries = dataFiltered .filter((item) => item.brightdata != null) .sort((a, b) => b.requests - a.requests); const tableContent = `

Brightdata Pricing Details

${brightdataEntries .map( (item) => `` ) .join("")}

Requests	Cost ($)
${d3.format(",")(item.requests)}	${d3.format(",")( item.brightdata )}

`; tableTooltip .html(tableContent) .style("left", event.pageX + 20 + "px") .style("top", event.pageY + "px") .style("opacity", 1); }) .on("mouseout", () => { resetHighlight(brightdataCircles, brightdataLine, "brightdata"); tooltip.style("opacity", 0); tableTooltip.style("opacity", 0); }); const lineGeneratorBrightdata = d3 .line() .x((d) => x(d.brightdata) + margin.left) .y((d) => y(d.requests) + margin.top) .curve(d3.curveLinear); const brightdataLine = svg .append("path") .data([dataFiltered]) .attr("d", lineGeneratorBrightdata) .attr("fill", "none") .attr("stroke", colorBrightdata) .attr("stroke-width", 2); const apifyCircles = svg .selectAll(".apify-circle") .data(dataFiltered) .enter() .append("circle") .attr("class", "apify-circle") .attr("cx", (d) => x(d.apify) + margin.left) .attr("cy", (d) => y(d.requests) + margin.top) .attr("r", 5) .style("fill", grayColor) .on("mouseover", function (event, d) { d3.select(this).raise(); highlightProvider(apifyCircles, apifyLine, colorApify, "apify"); apifyLine.raise(); labels.apify.style("fill", colorApify); tooltip .attr("x", x(d.apify) + margin.left + 10) .attr("y", y(d.requests) + margin.top - 10) .text( `$${d3.format(",")(d.apify)} per ${d3.format(",")( d.requests )} requests` ) .style("opacity", 1) .style("fill", colorApify); const apifyEntries = dataFiltered .filter((item) => item.apify != null) .sort((a, b) => b.requests - a.requests); const tableContent = `

Apify Pricing Details

${apifyEntries .map( (item) => `` ) .join("")}

Requests	Cost ($)
${d3.format(",")(item.requests)}	${d3.format(",")( item.apify )}

Nimble Pricing Details

${nimbleEntries .map( (item) => `` ) .join("")}

Requests	Cost ($)
${d3.format(",")(item.requests)}	${d3.format(",")( item.nimble )}

Oxylabs Pricing Details

${oxylabsEntries .map( (item) => `` ) .join("")}

Requests	Cost ($)
${d3.format(",")(item.requests)}	${d3.format(",")( item.oxylabs )}

Smart Proxy Pricing Details

${smartProxyEntries .map( (item) => `` ) .join("")}

Requests	Cost ($)
${d3.format(",")(item.requests)}	${d3.format(",")( item.smart_proxy )}

`; tableTooltip .html(tableContent) .style("left", event.pageX + 20 + "px") .style("top", event.pageY + "px") .style("opacity", 1); }) .on("mouseout", () => { resetHighlight(smartProxyCircles, smartProxyLine, "smart_proxy"); labels.smart_proxy.style("fill", "none"); tooltip.style("opacity", 0); tableTooltip.style("opacity", 0); }); const lineGeneratorSmartProxy = d3 .line() .x((d) => x(d.smart_proxy) + margin.left) .y((d) => y(d.requests) + margin.top) .curve(d3.curveLinear); const smartProxyLine = svg .append("path") .data([dataFiltered]) .attr("d", lineGeneratorSmartProxy) .attr("fill", "none") .attr("stroke", grayColor) .attr("stroke-width", 2); return svg.node(); }30:T31bb,{ const svg = d3.select(DOM.svg(900, 600)); const margin = { top: 80, right: 220, bottom: 80, left: 50 }; const width = +svg.attr("width") - margin.left - margin.right; const height = +svg.attr("height") - margin.top - margin.bottom; const dataFiltered = data.filter( (d) => d.subcategory === selectedSubCategory && // add filter for x scale -- number of requests up to 1.3 M d.requests < 1300001 ); const grayColor = "#ccc"; const colorApify = "blue"; const colorBrightdata = "green"; const colorNimble = "orange"; const colorOxylabs = "purple"; const colorSmartProxy = "red"; const x = d3 .scaleLog() .domain([ d3.min(dataFiltered, (d) => d.requests), d3.max(dataFiltered, (d) => d.requests) ]) .range([0, width]); const y = d3 .scaleLinear() .domain([ 0, d3.max(dataFiltered, (d) => Math.max(d.brightdata, d.apify, d.nimble, d.oxylabs, d.smart_proxy) ) ]) .range([height, 0]); const maxX = d3.max(dataFiltered, (d) => d.requests); const tickValuesX = [d3.min(dataFiltered, (d) => d.requests), maxX]; const maxY = d3.max(dataFiltered, (d) => Math.max(d.brightdata, d.apify, d.nimble, d.oxylabs, d.smart_proxy) ); const tickValuesY = [0, maxY / 2, maxY]; 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("Monthly Query Count"); const gY = svg .append("g") .attr("class", "y axis") .attr("transform", `translate(${margin.left},${margin.top})`) .call(d3.axisLeft(y).tickValues(tickValuesY).tickFormat(d3.format(".2s"))) .attr("font-size", "16px") .attr("font-family", fontFamily) .append("text") .attr("class", "label") .attr("transform", "rotate(0)") .attr("y", -60) .attr("x", -margin.left) .attr("fill", "#000") .attr("text-anchor", "start") .attr("font-size", "16px") .attr("font-weight", "bold") .attr("font-family", fontFamily) .text("Cost ($)"); const labels = { brightdata: null, apify: null, nimble: null, oxylabs: null, smartProxy: null }; const tooltip = svg .append("text") .attr("class", "tooltip") .attr("font-size", "12px") .style("opacity", 0); const tableTooltip = d3 .select("body") .append("div") .attr("class", "table-tooltip") .style("position", "absolute") .style("background-color", "white") .style("border", "1px solid gray") .style("padding", "20px") .style("font-size", "12px") .style("opacity", 0) .style("text-align", "right"); const brightdataCircles = svg .selectAll(".brightdata-circle") .data(dataFiltered) .enter() .append("circle") .attr("class", "brightdata-circle") .attr("cx", (d) => x(d.requests) + margin.left) .attr("cy", (d) => y(d.brightdata) + margin.top) .attr("r", 5) .style("fill", colorBrightdata) .on("mouseover", function (event, d) { d3.select(this).raise(); tooltip .attr("x", x(d.requests) + margin.left + 10) .attr("y", y(d.brightdata) + margin.top - 10) .text( `${d3.format(",")(d.requests)} requests at $${d3.format(",")( d.brightdata )} per request` ) .style("opacity", 1) .style("fill", colorBrightdata); const brightdataEntries = dataFiltered .filter((item) => item.brightdata != null) .sort((a, b) => b.requests - a.requests); const tableContent = `

Brightdata Pricing Details

${brightdataEntries .map( (item) => `` ) .join("")}

Requests	Cost ($)
${d3.format(",")(item.requests)}	${d3.format(",")(item.brightdata)}

Apify Pricing Details

${apifydataEntries .map( (item) => `` ) .join("")}

Requests	Cost ($)
${d3.format(",")(item.requests)}	${d3.format(",")(item.apify)}

Nimble Pricing Details

${nimbledataEntries .map( (item) => `` ) .join("")}

Requests	Cost ($)
${d3.format(",")(item.requests)}	${d3.format(",")(item.nimble)}

Oxylabs Pricing Details

${oxylabsdataEntries .map( (item) => `` ) .join("")}

Requests	Cost ($)
${d3.format(",")(item.requests)}	${d3.format(",")(item.oxylabs)}

Smart Proxy Pricing Details

${smartProxydataEntries .map( (item) => `` ) .join("")}

Requests	Cost ($)
${d3.format(",")(item.requests)}	${d3.format(",")(item.smart_proxy)}

`; tableTooltip .html(tableContent) .style("left", event.pageX - 150 + "px") .style("top", event.pageY - 320 + "px") .style("opacity", 1); }) .on("mouseout", () => { tooltip.style("opacity", 0); tableTooltip.style("opacity", 0); }); const lineGeneratorSmartProxy = d3 .line() .x((d) => x(d.requests) + margin.left) .y((d) => y(d.smart_proxy) + margin.top) .curve(d3.curveLinear); const smartProxydataLine = svg .append("path") .data([dataFiltered]) .attr("d", lineGeneratorSmartProxy) .attr("fill", "none") .attr("stroke", colorSmartProxy) .attr("stroke-width", 2); return svg.node(); }31:T940,{ 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 dataFiltered = data.filter((d) => d.subcategory === selectedSubCategory) const x = d3 .scaleLinear() .domain([0, d3.max(dataFiltered, (d) => d.apify)]) .range([0, width]); const y = d3 .scaleLog() .domain([ d3.min(dataFiltered, (d) => d.requests), d3.max(dataFiltered, (d) => d.requests) ]) .range([height, 0]); const maxX = d3.max(dataFiltered, 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(dataFiltered) .enter() .append("circle") .attr("cx", (d) => x(d.apify) + margin.left) .attr("cy", (d) => y(d.requests) + margin.top) .attr("r", 5) .style("fill", "blue"); const lineGenerator = d3 .line() .x((d) => x(d.apify) + margin.left) .y((d) => y(d.requests) + margin.top) .curve(d3.curveLinear); svg .append("path") .data([dataFiltered]) .attr("d", lineGenerator) .attr("fill", "none") .attr("stroke", "blue") .attr("stroke-width", 2); return svg.node(); }32:[{"id":"961c1237fdf099d40370a0bc77424da65aae452580bf396b864dbeef9629d10a753756c8971cd6b55f53baf84bf1e1e53f9f55f47f656e142f1de5fcf091267e","href":"https://static.observableusercontent.com/files/961c1237fdf099d40370a0bc77424da65aae452580bf396b864dbeef9629d10a753756c8971cd6b55f53baf84bf1e1e53f9f55f47f656e142f1de5fcf091267e","name":"pricingDetails.json","type":"application/json","lastModified":1728379575769.722,"size":50955}] 2d:{"id":"9ef0824e77040e4f","slug":null,"title":"Pricing Details - Summary Per Subcategory","thumbnail":"ae1add6e137e3432e59c0e5216ff41760b1f0933fca7b09f29c3ed8ae54dc12a","access_level":"public","create_time":"$D2024-10-07T19:41:21.342Z","update_time":"$D2024-10-09T06:45:05.078Z","view_time":null,"first_public_time":"$D2024-10-08T12:49:02.216Z","fork":{"id":"436c50c0df07cfa2","slug":null,"title":"Latency vs. Price including Success Rate & Pricing Details","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":773,"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":1,"collection":null,"type":"notebook","body":{"title":"Pricing Details - Summary Per Subcategory","cells":[{"id":0,"value":"# Pricing Details - Summary Per Subcategory","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":47,"value":"html`

Select a subcategory:

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":589,"value":"viewof selectedSubCategory = Inputs.select(uniqueSubCategory, {\n format: (x) => x,\n value: \"All\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":616,"value":"html`

Hover on each provider to see details.

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":651,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":721,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":440,"value":"### Apify Pricing Details","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":348,"value":"$31","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":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":16,"value":"fontFamily = \"Work Sans\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":593,"value":"uniqueSubCategory = Array.from(new Set(data.map(d => d.subcategory)));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":556,"value":"data = FileAttachment(\"pricingDetails.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 2e:"$2d:body"