Varun Gadde

D3 Network Graph and Family Tree

Fork of Circles with D3

AREA PLOT

This area plot visualizes average study hours by age, showing the range between minimum and maximum study hours for each age group in light blue. The chart uses D3.js v7 to load CSV data from a remote gist, group records by age, and compute summary statistics including mean, min, and max study hours. The code employs `d3.area()` to generate the filled region between the min and max values, with `d3.scaleLinear` axes and an SVG-based legend. The data is fetched asynchronously via `d3.csv()` and rendered within an 800×400 pixel SVG container.

LINE VARUN

This example visualizes the average reading score by age as a line chart, highlighting trends in performance across different age groups. It uses D3.js (v7) to fetch a CSV dataset, group the data by age, and compute the mean reading score for each age. The chart is rendered as an SVG element, with scales mapping age to the x-axis and average reading score to the y-axis. A green line path, generated via `d3.line`, connects the data points, while axes are added using `d3.axisBottom` and `d3.axisLeft` with labels for clarity.

Fork of ICE-7 varunscatter

This animated scatter plot visualizes the relationship between student test scores and sleep hours, cycling through reading, writing, and sleep variables as the x-axis every two seconds. It uses d3.scaleLinear, d3.extent, d3.axisLeft, and d3.axisBottom to map the data, which is loaded via d3.csv from a remote CSV file. The SVG rendering, created with d3.select, updates circles smoothly to reflect changing data dimensions, while the y-axis remains fixed on math scores.

ICE-7 Varunpie

This visualization presents a pie chart of the top 10 most frequent math scores from a dataset loaded via `d3.csv`. It shows the distribution of these scores by count, with a legend displaying each score and its frequency. The code uses `d3.pie()` and `d3.arc()` to generate the SVG slices, with `d3.schemeCategory10` providing a custom color palette. The chart is rendered with `d3.v7` in an HTML page, fetching data from a GitHub gist URL.

ICE-7 varunscatter

This animated scatter plot uses D3.js to visualize Test Cricket player records, cycling through different x-axis fields (Runs, Average, Strike Rate, Innings) every three seconds. It displays player symbols colored by country, with shapes distinguishing player types (batsman, bowler, allrounder) via D3’s symbol scales. The reusable chart module (`scatterPlot.js`) dynamically updates axes and data bindings, loading the dataset from a CSV file using `d3.csv`. SVG rendering and transitions are handled through D3’s selection and join patterns, with margins and scales configured programmatically.

Varun Scatterplot

This example visualizes the frequency distribution of math scores from a dataset by displaying the top 10 most common scores as a pie chart with a corresponding legend. It shows how often each score occurs, with slices colored using a categorical palette and labeled with both the score value and its count. The visualization is built with D3 v7, using `d3.csv` to load the data, `d3.pie` and `d3.arc` to generate the pie slices, and SVG elements rendered into the DOM. The legend maps each color to its score and frequency, making the chart easy to read at a glance.

VARUN ICE-6

A bar chart displays the average weight of 20 animal species, with each horizontal bar colored by its value using a linear scale mapped to the `schemeCategory10` color scheme. The visualization is implemented in React, loading CSV data from a gist, sorting it by weight, and rendering bars with D3 v6 scales (`scaleBand`, `scaleLinear`). The x-axis shows average weight in kilograms, and the y-axis lists animal names. The chart uses SVG elements and a color gradient to encode the weight values.

fruit

This example visualizes a collection of fruits grown in a particular season, displaying them as simple SVG shapes—a red apple with a brown stem and green leaf, a green watermelon, and an orange mango—inside a fixed 400×200 pixel canvas. It first loads a CSV dataset from a GitHub gist, then reports the file size, row count, and column count in a text container. The visualization uses D3.js v7 to append the fruit shapes and to parse the CSV data, while CSS styles the page with a bisque background and crimson headings. The fruits are drawn with basic geometric primitives like circles, ellipses, and paths, without any data-driven encoding.

Varun

This example creates a cat face using D3.js version 7, building each facial feature as an SVG element. It shows a simple geometric cat composed of circles, an ellipse, paths, and lines. The code demonstrates manual SVG construction using `document.createElementNS` to add body, head, eyes, nose, mouth, and whiskers, all styled with inline attributes. The cat is rendered in grayscale with a pink nose, centered on a 500x500 pixel canvas within a 960x500 SVG viewport, using CSS flexbox for centering.

Sai Varun Gadde

This animated visualization tracks the top goal scorers across a five-year period (2016–2020), filtering the dataset to include only players with goals recorded in every year. It uses D3's `scaleTime`, `scaleLinear`, and `scaleSequential` with an `interpolatePlasma` color scale to render multi-line trajectories, with `flatGroup` grouping data by player name. The responsive layout relies on `@curran/responsive-axes` and `observeResize`, while mouseover events thicken lines and add tooltips via D3 transitions. Data comes from the `@eschuman20/footballscorers` package, rendered as an SVG animation.