29:null 2a:["$","title",null,{"children":"ai coding benchmark | Şevval Alper | Observable"}] 2f:T7c1,

30:T1005,{ // Define the data const data = [ { platform: "Gemini", compliance: 0.66, codeQuality: 0.76, lessCode: 0.9, performance: 1.0, security: 0.86, overall: 0.84 }, { platform: "Amazon Q", compliance: 1.0, codeQuality: 0.86, lessCode: 0.86, performance: 0.96, security: 0.9, overall: 0.92 }, { platform: "Codeium", compliance: 0.76, codeQuality: 0.66, lessCode: 0.9, performance: 1.0, security: 0.7, overall: 0.8 }, { platform: "Codiumate", compliance: 1.0, codeQuality: 0.76, lessCode: 0.66, performance: 0.86, security: 0.86, overall: 0.82 }, { platform: "GitLab", compliance: 1.0, codeQuality: 0.86, lessCode: 0.76, performance: 0.9, security: 1.0, overall: 0.9 }, { platform: "Cody", compliance: 1.0, codeQuality: 0.86, lessCode: 0.76, performance: 0.86, security: 0.9, overall: 0.88 }, { platform: "Cursor", compliance: 1.0, codeQuality: 0.94, lessCode: 0.94, performance: 0.94, security: 0.94, overall: 0.94 }, { platform: "Tabnine", compliance: 0.66, codeQuality: 0.66, lessCode: 1.0, performance: 0.96, security: 0.76, overall: 0.8 }, { platform: "Replit", compliance: 1.0, codeQuality: 0.86, lessCode: 0.76, performance: 0.9, security: 1.0, overall: 0.9 }, { platform: "GitHub Copilot", compliance: 0.9, codeQuality: 0.7, lessCode: 0.76, performance: 0.86, security: 0.9, overall: 0.82 } ]; const categories = ["compliance", "codeQuality", "lessCode", "performance", "security", "overall"]; // 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", "#98df8a", "#ffbb78", "#9467bd", "#f7b6d2"]); // 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":"6daafb784c06069e","slug":null,"title":"ai coding benchmark","thumbnail":"1827c8d2eff8270e7618c4c147329d9395c9b8236614e8635fe0b101686c002f","access_level":"public","create_time":"$D2024-09-22T18:09:49.207Z","update_time":"$D2024-10-08T06:58:27.902Z","view_time":null,"first_public_time":"$D2024-10-08T07:33:22.221Z","fork":{"id":"5058c1ab0d2159d0","slug":null,"title":"Panel Bar Chart Example","owner":{"id":"5733e841fcacdf4f","login":"aimultiple","name":"AIMultiple"}},"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":224,"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":2,"collection":null,"type":"notebook","body":{"title":"ai coding benchmark","cells":[{"id":0,"value":"# ai coding benchmark\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"