100%

AI Editing Benchmarks

✓ Published1🌍 Public

Last edited Mar 29, 2025

Created on Mar 29, 2025

Forked from Vanilla D3 Vibecoding Template

This visualization presents a grid of AI model benchmark results across programming challenges like string reversal and multiplication. Each cell displays a pass, fail, or error outcome using a color scale, with tooltips for details and an interactive legend that highlights matching statuses on hover. It also shows aggregate pass-rate statistics and source attribution. Rendered with D3.js, the grid uses scaleBand for positioning, scaleOrdinal for encoding, and SVG rect elements for the interactive cells.

AI-generated description

AI Model Benchmark Visualization

This visualization shows the performance of various AI models on programming challenges. Each cell represents a test result:

Green: Pass
Orange: Fail
Red: Error

Hover over cells for details, or hover over legend items to highlight results by status.

MIT Licensed

Similar vizzes

Loading thumbnail…

Initial Benchmark Results

This heatmap visualizes benchmark results comparing language models across five programming challenges. Each cell displays pass (green), fail (red), or error (orange) status. The visualization uses React with D3 v7’s `scaleBand` for axes and `scaleOrdinal` for color encoding, rendering SVG rectangles. Data comes from a static CSV file. Hovering highlights cells with CSS transitions, while a legend clarifies the color meanings.

CCurran Kelleher

71% match

Loading thumbnail…

AI Usage Dashboard

This dashboard visualizes AI usage patterns and productivity among students and professionals, with data sourced from a Kaggle dataset. It presents four linked charts: a bar chart showing AI tool popularity, a pie chart for user type distribution, a line chart examining productivity against work or study hours, and a scatter plot relating AI usage to productivity. Built with D3 v7, the visualization uses SVG rendering, `d3.rollup` for data aggregation, and scales like `d3.scaleBand` and `d3.scaleLinear`, with a custom axis and rotated labels.

AAwrng

69% match

Loading thumbnail…

AI ONLINE MOCKUPS

This interactive scatter plot displays the average AI adoption level and automation risk for various skills, categorized into low, medium, and high. Each circle represents a skill, positioned by its average values on the axes, colored by skill name, and labeled for identification. Built with D3 v7, the visualization uses `d3.csv` to load data from a gist, `d3.rollups` to aggregate by skill, and `d3.scaleLinear` for axes with ordinal risk labels. SVG circles, text labels, and styled axes render the final chart.

Jjrcuster@dons.usfca.edu

68% match

Loading thumbnail…

Assignment #2 Building Dashboard

This dashboard visualizes how AI tool usage relates to productivity and work/study hours among students and professionals, using a dataset from Kaggle. It presents four interactive charts: a bar chart showing AI tool popularity, a pie chart for user type distribution, a line chart for productivity against work/study hours, and a scatter plot of AI usage versus productivity. Built with D3.js v7, the visualization uses SVG rendering and employs `d3.rollup` for data aggregation, `d3.scaleBand` and `d3.scaleLinear` for scales, and `d3.axisBottom` for axes. The code handles missing numeric values by substituting column means and filters out incomplete categorical rows before rendering.

AAwrng

66% match

Loading thumbnail…

Fork of HTML Starter

This dashboard displays AI model data through an interactive bar chart, with summary cards showing the total rows, minimum, average, and maximum values of the selected metric. Users can switch between Parameters (Billions) and Release Year via the metric selector. The visualization uses d3.scaleBand and d3.scaleLinear for axes, d3.axisBottom and d3.axisLeft for rendering, and animated transitions on bar height. Data loads from a CSV file via d3.csv. Tooltips appear on bar hover, and decorative circles and a legend enhance the SVG output.

YYamini Malikireddy

66% match

Loading thumbnail…

Fork of Average Grade Improvement by AI Tool - TEST

This fork of a D3.js dashboard visualizes student performance data from a CSV file, comparing average grades before and after AI usage across age groups in a line chart, and the average grade improvement by different AI tools in a bar chart. The visualization uses D3 v7 APIs including `d3.csv`, `d3.group`, `d3.mean`, `d3.scaleLinear`, and `d3.line` to load, clean, and render the data as SVG. The interactive dashboard displays the data in a two-column grid layout with styled cards.

Mmichael_chuxs@yahoo.com

66% match

Loading thumbnail…

Module 2.2: Assignment #2

This dashboard visualizes student AI usage patterns through four coordinated D3 charts. A pie chart shows the proportion of students using AI, a bar chart compares average grade improvement across AI tools, a scatter plot explores study hours versus grade change, and a line chart displays average grades before and after AI use across student ages. The visualization uses d3.csv to load the students_ai_usage_cleaned dataset, d3.rollup for aggregation, d3.scaleOrdinal for categorical coloring, and SVG rendering with a custom tooltip for interactivity. All charts respond to hover events using the showTooltip and hideTooltip functions.

Mmichael_chuxs@yahoo.com

66% match

Loading thumbnail…

DTSC 630 - Data VisualizationAssignment #2

This dashboard compares the intelligence scores, output speeds, and domain-specific performance of OpenAI and Anthropic AI models. It presents four charts: horizontal bar charts ranking top models by intelligence score, a comparison of average output speed between companies, a bar chart of average domain scores, and a scatter plot showing the relationship between intelligence score and output speed. The visualization uses D3.js v7 to load data from a CSV file, process it with methods like `d3.csv()` and `.filter()`, and render interactive SVG visualizations with axes and labels.

FFanghaoMeng

65% match