100%

Initial Benchmark Results

✓ Published1🌍 Public

Last edited Mar 29, 2025

Created on Mar 29, 2025

Forked from React & D3 Vibecoding Starter

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.

AI-generated description

Model Challenge Performance Visualization

This visualization displays the performance of different language models on various challenges.

X-axis: Challenges
Y-axis: Models
Color: Indicates pass (green), fail (red), or error (orange) status

MIT Licensed

Similar vizzes

Loading thumbnail…

AI Editing Benchmarks

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.

CCurran Kelleher

71% match

Loading thumbnail…

bar chart with D3.js

This bar chart visualizes the popularity of programming languages using value data from a CSV file. Built with React and D3.js v4, it renders bars as SVG rectangles with colored fills and axis labels. The example includes interactive controls—a column selector and a bin count input—that allow users to explore data aggregation. The visualization uses D3 scales for axes and a color mapping from the dataset, with a dark blue container background for contrast.

AAbhishek Kumar

68% match

Loading thumbnail…

Aider Benchmarks Scatter Plot

This interactive scatter plot visualizes Aider’s LLM leaderboard benchmarks, comparing models’ percent correct on coding exercises against their cost per run on a logarithmic x-axis. Built with React and D3 v7, it uses `scaleSymlog` for cost, `d3.forceSimulation` for label placement, and hover/click interactions to highlight selected models. Data comes from a TSV file with costs parsed from dollar strings.

CCurran Kelleher

67% match

Loading thumbnail…

Algorithm Results Evaluation

This visualization compares the performance of different algorithm test versions across four metrics: High, Mid, Low, and Base. Each version is represented by a grouped bar chart, with one color-coded bar per metric, allowing easy comparison of results. The chart is built with React, using D3 v5 for scales and axes, rendered as SVG. Data is loaded from a CSV file, with the y-axis fixed to a 0-100 percentage scale and tooltips showing the exact value for each bar.

Yyuzhang21

67% match

Loading thumbnail…

Browser test run for ToDoMVC

This visualization displays the results of a browser test run for the ToDoMVC project, tracking 1,624 individual test cases across multiple JavaScript frameworks. Each test is rendered as a colored cell, with green indicating a pass, orange marking a known issue, and red denoting a failure, arranged sequentially to show the overall progression and clustering of outcomes. The data comes from a text log file, which is parsed and mapped to a grid layout. The visualization uses React for rendering the interactive interface, allowing users to hover over or click on cells to see detailed test descriptions, while the framework name appears as a categorical label along the axis.

CColinEberhardt

66% match

Loading thumbnail…

Fork of Fork of Fork of ICE-6: Rendering Marks and Channels with React & D3

This visualization presents a horizontal bar chart of bestselling books information, ranking eleven items by population metrics from an external CSV dataset. Built with React and D3 v5, the chart uses `scaleBand` and `scaleLinear` to map categorical labels and numeric values to SVG rectangles. The code leverages React hooks (`useState`, `useEffect`) for data loading and rendering, while D3 utilities handle CSV parsing, scales, axes, and tick generation. The SVG output includes orange gridlines and labeled axes, with steelblue bars sized proportionally to each entry's population value.

AArefa Patwary

66% match

Loading thumbnail…

Bar chart Interactive

This interactive bar chart displays the "love meter" percentages for various programming languages, allowing users to hover over a bar to see its value highlighted with a reference line and divergence labels. The visualization uses D3.js v5 within a React environment, rendering SVG elements with animation transitions. It employs `d3.scaleBand`, `d3.scaleLinear`, and axes for structured plotting, while mouse events trigger opacity changes, bar enlargement, and the temporary display of difference annotations. The data is embedded directly in the code, inspired by the Stack Overflow 2018 developer survey.

KKeerthipriyaBankuru

66% match

Loading thumbnail…

D3 - Heatmap

This heatmap visualizes impact magnitudes across locations and months from January to September 2016, using color intensity to convey variation. The D3.js v7 code loads CSV data via `d3.csv`, maps locations and months to x- and y-axes using `d3.scaleBand`, and fills rectangles with the sequential `d3.interpolateViridis` color scale. The SVG rendering includes axis labels, a chart title, and a grey background, with the heatmap cells styled with rounded corners and white strokes.

CChandana Srinivas

66% match