29:null 2a:["$","title",null,{"children":"ocr | Şevval Alper | Observable"}] 2f:T6a4,

30:Tc15,{ // Define the data const data = [ { platform: "Azure", Handwriting: 0.18,Letter: 0.97, Picture:0.59}, { platform: "AWS", Handwriting: 0.88,Letter: 0.99, Picture:0.89}, { platform: "ChatGPT-4o", Handwriting: 0.90,Letter:0.98, Picture:0.90}, { platform: "GSC", Handwriting: 0.86,Letter: 0.98, Picture:0.92}, { platform: "Tesseract", Handwriting: 0.38 ,Letter: 0.96, Picture:0.67}, ]; const categories = ["Handwriting", "Letter", "Picture"]; // SVG setup const svgWidth = 800; const svgHeight = 400; const margin = { top: 50, right: 20, bottom: 150, left: 140 }; const width = svgWidth - margin.left - margin.right; const height = svgHeight - margin.top - margin.bottom; const svg = d3.create("svg") .attr("width", svgWidth) .attr("height", svgHeight); const g = svg.append("g") .attr("transform", `translate(${margin.left},${margin.top})`); // Scales const y = d3.scaleBand() .range([0, height]) .padding(0.1) .domain(data.map(d => d.platform)); const x = d3.scaleLinear() .range([0, width]); const color = d3.scaleOrdinal() .domain(categories) .range(["#aec7e8", "#ff9896", "#ffbb78"]); // Calculate the maximum value across all categories for initial scale const overallMax = d3.max(data, d => d3.max(categories, category => d[category])); x.domain([0, overallMax]); // Create a panel for each category categories.forEach((category, i) => { const panel = g.append("g") .attr("class", "panel") .attr("data-category", category) .attr("transform", `translate(0, 0)`); // Draw bars panel.selectAll(".bar") .data(data) .join("rect") .attr("class", "bar") .attr("y", d => y(d.platform)) .attr("x", 0) .attr("width", d => x(d[category])) .attr("height", y.bandwidth()) .attr("fill", color(category)); // Hide all panels except the first one if (i > 0) panel.style("display", "none"); }); // Draw y-axis g.append("g") .attr("class", "y-axis") .call(d3.axisLeft(y).tickSize(0)) .selectAll("text") .attr("dx", "-0.6em") .style("font-size", "14px"); // Draw x-axis const xAxis = g.append("g") .attr("class", "x-axis") .attr("transform", `translate(0,${height})`) .call(d3.axisBottom(x)); // Setup interactivity function updateChart(selectedCategory) { const maxVal = d3.max(data, d => d[selectedCategory]); x.domain([0, 1]); // Update x-axis xAxis.transition().duration(1000).call(d3.axisBottom(x)); // Hide all panels d3.selectAll(".panel").style("display", "none"); // Show and update the selected panel const selectedPanel = d3.select(`.panel[data-category='${selectedCategory}']`).style("display", null); selectedPanel.selectAll(".bar") .transition() .duration(1000) .attr("width", d => x(d[selectedCategory])); } // Initial chart setup updateChart(categories[0]); // Event listener setup (to be connected to buttons in HTML) window.updateCategory = updateChart; return svg.node(); }31:[] 2d:{"id":"eadbbf08e1f89673","slug":null,"title":"ocr","thumbnail":"aab0827362ed553fc0918a301172359dd71ab142ae2d35a378d0c7a030f808d0","access_level":"public","create_time":"$D2024-10-08T07:01:18.317Z","update_time":"$D2024-10-08T07:18:02.581Z","view_time":null,"first_public_time":"$D2024-10-08T07:33:32.939Z","fork":{"id":"6daafb784c06069e","slug":null,"title":"ai coding benchmark","owner":{"id":"42588b487106c2b6","login":"sevval-alper","name":"Şevval Alper"}},"stars":0,"starred":false,"owner":{"type":"team","id":"42588b487106c2b6","login":"sevval-alper","name":"Şevval Alper","avatar_url":"https://avatars-next.observableusercontent.com/5912af3c7d6e97f85ea6a4bc5bbd3ea074446496cd5d3e143b3a3365a6415410","tier":"starter_2024"},"version":235,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"3a3e4e2235a40e19","login":"sevval-alper","name":"Şevval Alper","avatar_url":"https://avatars-next.observableusercontent.com/102fcc8d46430ee26768e81ec76e829d93a88cf914a4f81b099341c70bb990c8","tier":null}],"members":[{"type":"individual","id":"3a3e4e2235a40e19","login":"sevval-alper","name":"Şevval Alper","avatar_url":"https://avatars-next.observableusercontent.com/102fcc8d46430ee26768e81ec76e829d93a88cf914a4f81b099341c70bb990c8","tier":null,"role":"editor"},{"type":"team","id":"42588b487106c2b6","login":"sevval-alper","name":"Şevval Alper","avatar_url":"https://avatars-next.observableusercontent.com/5912af3c7d6e97f85ea6a4bc5bbd3ea074446496cd5d3e143b3a3365a6415410","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"ocr","cells":[{"id":0,"value":"# ocr\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":198,"value":"$2f","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":196,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2e:"$2d:body"