Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of HTML Starter

Public visualization

Post on XLinkedIn

Viewing a saved revision (read-only)

4b6f390595b947d79cfb0d3ca0474da8

Open

Fork of HTML Starter

0 stars0🌍 Public
YYamini Malikireddy
Last edited Mar 1, 2026
Created on Mar 1, 2026
Forked from 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.

AI-generated description

AI Models Interactive Dashboard

A D3.js-based visualization dashboard for AI models dataset with interactive features.

Features

  • Interactive Bar Chart Visualization - Dynamic bar chart with smooth animations
  • Summary Statistics Cards - Display min, max, average values, and total row count
  • Metric Selector - Switch between different data metrics dynamically
  • Tooltip Hover Information - View detailed model information on hover
  • Responsive Design - Clean, modern card-based layout
  • Decorative Elements - Enhanced visual appeal with dividers and accent circles

Files

  • index.html - Main HTML structure
  • styles.css - Dashboard styling and layout
  • index.js - D3.js visualization and interactivity logic

Data Source

Uses the AI Models dataset from the provided CSV URL.

Usage

Open index.html in a web browser to view the dashboard. Use the metric selector dropdown to switch between different data views.