michael_chuxs@yahoo.com

Bar Echart

This bar chart shows the average academic grades for students grouped by their self-reported stress level (Low, Medium, High). Built with ECharts 5.3.1, the visualization uses the `averageByGroup` helper to aggregate data from the `Gaming_Academic_Performance.csv` file, then renders a single bar series with a categorical x-axis and value y-axis. The chart is initialized via `echarts.init()` and configured with a title, tooltip, and axis labels.

Jun 18, 2026

Scatter Echart

This scatter plot shows the relationship between gaming hours and academic grades for individual students. Each point represents one student, with its x-position indicating weekly gaming hours and y-position showing final grade, while the tooltip reveals additional details like stress level. The chart is built with the ECharts JavaScript library, using its scatter series type to plot the dataset from the Gaming_Academic_Performance.csv file. The visualization helps identify potential patterns between gaming behavior and academic performance.

Jun 12, 2026

Line Echart

This line chart shows the relationship between study hours and average grades, displaying five study-hour groups from 0-2 hours up to 8-10 hours. Built with ECharts 5.3.1, the visualization loads data from a CSV file containing synthetic student records, parses it with a custom parser, and calculates mean grades per group. The line chart reveals how academic performance varies across different study-hour ranges, with the data filtered to include only records with valid gaming, study, and grade values.

Jun 12, 2026

test

This dashboard visualizes the relationship between gaming habits and academic performance across multiple interconnected charts. It shows genre distribution via a pie chart, average grades by stress level in a bar chart, gaming hours versus grades in a scatter plot, and study hours against grades in a line chart. Built with ECharts 5.3.1, the visualization loads a CSV file using `fetch()` and parses it with a custom `parseCSV` function. Charts are generated through ECharts' API functions `createGenrePieChart`, `createStressBarChart`, `createScatterChart`, and `createStudyLineChart`, with data grouped and averaged using JavaScript's `reduce` and array methods.

Jun 11, 2026

Cars

This dashboard, built with Vue and D3 v7, visualizes a dataset of car owners from CSV data, allowing users to filter by country. It displays four coordinated views: a line chart of cars manufactured over time, a bar chart of top car brands, a pie chart of car color counts, and a scatter plot comparing brand counts to average manufacture year. The visualization uses D3's `d3.rollups`, `d3.scaleLinear`, `d3.line`, and SVG rendering to create interactive charts with tooltips, while a dropdown menu drives the country-based filtering.

Jun 10, 2026

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.

Jun 10, 2026

Scatter Plot - Study Hours vs Grade Change

A scatter plot visualizes the relationship between study hours per day and grade change, with each point colored red or green to indicate whether a student uses AI. The tooltip reveals detailed attributes per student, including AI usage, tools used, and grades before and after AI. Built with D3 v7, the visualization uses `d3.scaleLinear` for axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and SVG circles with mouseover events for interactivity. Data comes from a cleaned CSV file hosted on GitHub, filtered to include only valid records.

Line chart - Average grade by age

Three overlaid line charts compare average student grades by age across three metrics: grades before AI use, grades after AI use, and the calculated grade change. The line chart groups a CSV dataset by age and computes mean values for each category using `d3.rollup` and `d3.mean`. Lines are drawn with `d3.line` and a point scale, while circles with tooltips and a color-coded legend clarify each series. The SVG is rendered with D3 v7 and includes rotated x-axis labels to accommodate age values.

Pie Chart - AI Usage Distribution

This pie chart visualizes the distribution of AI usage among students, showing the proportion who use AI compared to those who do not. The visualization loads a CSV dataset from a GitHub repository using `d3.csv`, filters incomplete records, and aggregates counts via `d3.rollup`. It renders slices with `d3.pie` and `d3.arc` in an SVG, applies an ordinal color scale, labels each segment with category and value, and includes a legend. The design uses purple shades and white-stroked arcs for clarity.

Average Grade Improvement by AI Tool - Bar Chart

This bar chart visualizes the average grade improvement for students who used different AI tools, including Copilot, ChatGPT, and Gemini. It compares these tools by calculating the mean difference between grades before and after AI usage from the `students_ai_usage.csv` dataset. The chart is rendered as an SVG using d3.v7, with `scaleBand` and `scaleLinear` for axes, and `rollup` and `mean` for data aggregation. Bars are colored purple, and hovering changes the fill to orange.

Fork of Fork of React & D3 Starter

A bar chart compares average grade improvement across AI tool purposes, with each bar height representing the mean grade change for that category. The chart highlights how different reasons for using AI correspond to varying academic outcomes. Built with D3 v7, it loads CSV data via `d3.csv`, aggregates values using `d3.rollups` and `d3.mean`, and scales axes with `d3.scaleBand` and `d3.scaleLinear`. Rendered as SVG, bars include hover tooltips for detail, and the chart is sorted from highest to lowest average improvement.

Fork of Fork of Fork of Fork of React & D3 Starter Scatter plot

This scatter plot shows the relationship between daily study hours and grade change for students, comparing those who use AI against those who do not. The D3.js v7 code loads CSV data via `d3.csv`, filters incomplete records, and renders SVG circles colored by AI usage with an ordinal scale. Interactive tooltips appear on mouseover, while axes and a legend are generated using `d3.axisBottom`, `d3.axisLeft`, and scale functions for linear positioning.

Fork of Fork of Fork of Fork of Fork of React & D3 Starter LINE cHART

This line chart compares average student grades before and after AI usage across age groups, using two colored lines with circular markers for each data point. Hovering over a marker displays a tooltip with the exact age and grade value. The visualization loads CSV data from a GitHub repository, processes it with `d3.rollups` and `d3.mean` to aggregate averages per age, and renders the chart as SVG using `d3.line`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft`. A custom legend distinguishes the two grade series.

Fork of Fork of Fork of React & D3 Starter PIE

This example presents a pie chart visualizing the distribution of students who use AI compared to those who do not, based on a CSV dataset loaded from GitHub. The chart uses d3.pie and d3.arc to generate SVG slices, with d3.rollups aggregating counts from the loaded data. Interactive tooltips display exact student counts and percentages on hover, while percentage labels appear inside each slice and a legend shows category totals. The color scale uses d3.scaleOrdinal with a custom palette.

Fork of Fork

This example shows a zoomable bar chart of letter frequencies in the English alphabet, sorted in descending order from most to least common. Users can zoom and pan the view using the d3.zoom behavior, which re-scales the horizontal band scale and updates bar positions and widths dynamically. The chart is rendered with an SVG container, using d3.scaleBand for the x-axis, d3.scaleLinear for the y-axis, and d3.axisBottom and d3.axisLeft for the axes. Data comes from the `alphabet.csv` file.

Fork of Fork of React & D3 Starter

This dashboard visualizes student AI usage data, showing how study habits, grades, and screen time relate to the adoption of tools like ChatGPT, Copilot, and Gemini. It presents four coordinated views—a pie chart, bar chart, scatter plot, and line chart—built with React 19 and D3 v7. Data is loaded from a remote CSV using `d3.csv` and processed with D3's array methods. Each chart is rendered by separate functions, `drawPieChart`, `drawBarChart`, `drawScatterPlot`, and `drawLineChart`, which use D3 selections and scales to encode the dataset's variables.

miky

The visualization shows a dynamic network of nodes connected by edges, with the entire layout subtly rearranging itself over time. The simulation uses d3.forceSimulation to compute attractive and repulsive forces between nodes, while d3.geoPath renders the curved links that adapt as the layout evolves. Node positions are updated in canvas space using custom drawing routines, and the underlying data is read programmatically from a static JSON file. The entire scene animates continuously, with each frame recalculating the physics and redrawing the graph.

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.

May 28, 2026