avinashpandian79@gmail.com

@avinash1812·5 public vizzes

ICE 8

This interactive network visualization shows collaborations among eight researchers, with nodes colored by department (CS, Math, Physics, Design) and labeled with names. Built with D3.js v7, it uses `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to position nodes, while `d3.drag()` enables node dragging. Hovering reveals a tooltip with the person's department. The demo uses a small hardcoded dataset and renders to SVG.

Nov 2, 2025

Loading thumbnail…

Area chart ICE-7

This area chart visualizes the runs scored by 20 cricketers from various teams in 2024, with each player labeled on the x-axis and their total runs on the y-axis. The chart uses D3.js v7 to generate an SVG rendering, employing `d3.area` to create the filled region beneath a `d3.line` overlay, while `d3.scalePoint` positions the players and `d3.scaleLinear` maps the runs. Orange dots are added using `d3.selectAll` with `join` to mark individual data points, and each dot includes a title tooltip showing the player’s name and runs. Data comes from the `cricket_stats.csv` file, loaded asynchronously via `d3.csv`.

Oct 27, 2025

Loading thumbnail…

ICE-6_D3_Avinash

A scatter plot displays the relationship between runs scored and balls faced for eight Indian cricket players, with each player’s name labeled beside their corresponding data point. The visualization uses a linear scale for both axes, mapping balls faced on the x-axis and runs on the y-axis. Built with D3.js v7 (d3.scaleLinear, d3.axisBottom, d3.axisLeft), it renders circles and SVG text labels from a local CSV file. The chart includes axis titles and a descriptive heading, providing a clear comparison of batting performance across the players.

Oct 19, 2025

Loading thumbnail…

ICE-6_D3

This example renders a minimal "Hello D3" message on a blank web page. It imports the `select` function from D3 v7 using an import map and JavaScript modules, then uses `select('body').text('Hello D3')` to set the page’s body text directly. The visualization is a simple text output rather than a chart, demonstrating the basic setup for a D3 project without any data or graphical elements. The page styling centers the large text vertically and horizontally.

Oct 19, 2025

Loading thumbnail…

cricket-data-summary

This example presents a summary of cricket player statistics from a CSV dataset, displaying the data in a styled HTML table. It loads the data with `d3.csv`, logs the parsed rows to the browser console, and computes aggregate metrics such as the number of players, average runs, and average strike rate using `d3.mean`. The table’s header and rows are dynamically generated with D3 selections and data joins, while static CSS styles the layout.

Oct 6, 2025