Ganesh Gundekarla

phase2Visualization1D3js-Retention by age

This chart shows the total number of students grouped by gender, with blue bars for males and red bars for females. It uses the d3.csv method to load the dataset, then d3.rollups to count occurrences per gender before mapping values to bars. The visualization is rendered as SVG, with d3.scaleBand and d3.scaleLinear for positioning, plus interactive tooltips triggered by mouseover events. Data comes from the provided dataset.csv file, which includes academic and demographic records.

Apr 26, 2025

visualization9d3

A D3.js treemap displays hierarchical data as nested rectangular nodes, sized proportionally to each value. The visualization shows five course categories with descending values, using a spectral color scale for differentiation. The code embeds a static dataset directly and builds the hierarchy using `d3.hierarchy` with a sum accessor, then applies `d3.treemap` to compute the layout. Each leaf node renders as a positioned `div` element, with dimensions derived from the treemap’s computed coordinates and colors assigned via `d3.interpolateSpectral`.

Apr 26, 2025

visualization9d3

This stacked bar chart displays the count of students by their final academic outcome (Dropout, Graduate, or Enrolled), with each bar segmented by gender (Male or Female). The visualization uses D3 v7 to load CSV data via `d3.csv`, aggregate counts, and render SVG rectangles through `d3.stack` and `d3.scaleBand`. Interactive tooltips appear on mouseover, showing the exact count per gender and outcome. The chart includes axes labeled “Target Outcome” and “Number of Students,” with a categorical color scale assigning blue to males and orange to females.

visualization8D3.js

This example visualizes the relationship between inflation rate and average first-semester grades, using a line chart with circular markers. The visualization aggregates data from a CSV file by grouping student records by inflation rate and calculating the mean grade for each group. Built with D3.js v7 and rendered as an SVG, it uses `d3.csv` for loading data, `d3.rollups` for aggregation, and `d3.line` for the path. Interactive tooltips appear on hover, displaying the exact inflation rate and average grade for each point.

visualization7D3.js

This multi-line chart displays the average first-semester grade by age at enrollment, with separate lines for male and female students. The visualization uses D3.js v7 to load the dataset via `d3.csv`, clean and aggregate the data with `d3.rollups` and `d3.mean`, and render the chart as an SVG. Points along each line include interactive tooltips showing gender, age, and average grade. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, and a legend distinguishes the two gender groups.

Visualization6D3.js

This scatter plot visualizes the relationship between student age at enrollment and first-semester grade, with points colored according to gender and retention status (retained versus dropped). Each dot encodes a single student record from the dataset, and hovering reveals precise age, grade, and gender values through a tooltip. The visualization uses D3 v7 with SVG rendering, employing `d3.scaleLinear` for the x and y axes, `d3.scaleOrdinal` for categorical coloring, and `d3.axisBottom` and `d3.axisLeft` for the coordinate system. A static HTML legend outside the SVG explains the four color-coded groups.

Visualization5D3.js

This example uses a grouped bar chart to show how scholarship status relates to student retention outcomes (Retained, Dropped). The visualization displays counts of students by scholarship status and final outcome, using color to distinguish between the two outcome categories. Built with D3.js v7, the chart loads data from a CSV file and uses `d3.rollups` and `d3.group` to aggregate and structure the data, while `d3.scaleBand` and `d3.scaleLinear` handle the axes. Interactive tooltips appear on hover, revealing exact counts for each category.

Visualization4D3.js

This visualization is a heatmap showing the relationship between Gender and Application Mode, using counts derived from a dataset of student records. The chart displays application modes on the y-axis and gender on the x-axis, with color intensity indicating the number of students in each combination. Hovering over a cell reveals the exact count via a tooltip. The code uses D3 v7 to load data with `d3.csv`, aggregate counts via `d3.rollups`, and render the SVG heatmap using `scaleBand` for axes and `scaleSequential` with `interpolateBlues` for color encoding.

Visualization3D3.js

This visualization shows student retention outcomes grouped by course, comparing the number of retained students against those who dropped out for each academic program. The data comes from a CSV dataset with a "Target" column indicating dropout or graduation status. The implementation uses D3.js v7 with SVG rendering, employing `d3.rollups` to aggregate counts, `d3.scaleBand` for the grouped bar layout, and `d3.axisBottom` and `d3.axisLeft` to generate axes. Interactive tooltips appear on mouseover, highlighting individual bar values and highlighting the hovered bar with a color change.

Visualization3D3.js

This example shows a blank HTML page that displays the text "Hello HTML!" in a large, centered font. The page uses a minimal structure with a linked stylesheet, which sets the font size to 13em and centers the text horizontally. It imports a JavaScript module that logs "hello world" to the console, though it does not alter the visual output. The implementation relies on standard HTML, CSS, and a basic JavaScript script, with no data visualization or specialized libraries present.

phase2Visualization3

This example presents a static D3.js (v7) SVG scatter plot that visualizes the relationship between a student's age at enrollment and their first-semester grade, with data points colored by retention status (Retained, Dropped, or Enrolled). The visualization uses the `d3.csv` data loading API to read the dataset and the `d3.scaleLinear` and `d3.scaleOrdinal` functions to map age and grade to x/y coordinates and retention status to color. Hovering over a circle triggers a mouseover event that uses the `d3.select` API to show a tooltip with the exact age, grade, and status values. The chart includes labeled x- and y-axes ('Age at Enrollment' and '1st Semester Grade') generated using the `d3.axisBottom` and `d3.axisLeft` APIs.

Apr 21, 2025

phase2VISUALIZATION2

This interactive pie chart visualizes student retention outcomes, breaking down the target variable into two categories: "Retained" and "Dropped." The visualization uses a D3.js v7 SVG rendering with animated hover effects that expand the selected arc segment. The tooltip reveals the exact student count and percentage for each outcome. Data is loaded from a CSV file containing student enrollment attributes, with the target column automatically identified as containing only binary values. The chart employs D3's pie layout, arc generator, and ordinal color scale for categorical distinction.

Apr 21, 2025

activity7.2

This visualization displays yearly average temperatures as a filled area chart, with a steel-blue region rising and falling across the time series. The SVG rendering uses d3.area() to generate the path, scaling the x-axis by year and the y-axis by temperature values. Data loads from a remote CSV via d3.csv, with axes labeled “Year” and “Avg Temperature (°C)”. The chart applies d3.scaleLinear for both dimensions and formats tick labels with d3.format for integer years, highlighting overall temperature trends over time.

Apr 10, 2025

activity7.1

This example displays a donut chart depicting energy consumption by source in terawatt-hours, with an accompanying legend. The visualization uses D3.js v7 to load a CSV from a GitHub gist, then applies the `d3.pie()` layout and `d3.arc()` generator to render each segment as an SVG path. Each slice is labeled with its energy source, and a legend lists each source, its type, and consumption value in TWh. The chart uses `d3.scaleOrdinal` with the `d3.schemeSet3` color palette for categorical distinction.

Apr 10, 2025

task4.2

This bubble chart visualizes 15 global cities by population (millions) on the y-axis, area (km²) on the x-axis, and population density as the bubble radius. Each circle is colored by region using `d3.scaleOrdinal` with `d3.schemeTableau10`. The code loads `globalCities.csv`, converts numeric fields, and renders SVG circles with `d3.scaleLinear` for both axes and `d3.scaleSqrt` for the radius. Axis labels and ticks are generated via `d3.axisBottom` and `d3.axisLeft`, with the chart drawn inside an SVG container.

Apr 6, 2025

task 4

This bubble chart visualizes the correlation between a vehicle's average horsepower, torque, and highway MPG, with each bubble representing a car make. The x-axis shows horsepower, the y-axis shows torque, and bubble size encodes highway MPG while color distinguishes the manufacturer. Built with D3 v7, it uses scales for positioning and sizing, plus interactive tooltips displayed on hover. A legend clarifies the bubble size mapping and color categories, with data loaded from a CSV file.

Apr 6, 2025

task3.2

This interactive scatter plot visualizes the Iris dataset, displaying sepal length against petal length while using distinct symbol shapes to represent the three Iris species. The visualization renders as an SVG graphic, with circles, crosses, and diamonds via d3.symbol to differentiate setosa, versicolor, and virginica samples. A custom shape legend guides interpretation. The implementation leverages D3 v7 modules including scaleLinear, scaleOrdinal, axisBottom, and axisLeft, with data loaded asynchronously through d3.csv from the seaborn-data repository.

task 3ex

This scatter plot displays the relationship between sepal length and petal length for Iris flowers, with each point’s shape encoding the species. The chart uses d3.scaleLinear for the axes and d3.scaleOrdinal with d3.symbolsFill to map species to different point shapes. Axes and labels are drawn using d3.axisLeft and d3.axisBottom, while a custom legend is generated with d3.symbol. Data is fetched from a remote CSV and parsed with d3.csvParse, with numeric fields converted before rendering.

task 3.2

This scatter plot visualizes the relationship between horsepower and miles per gallon across cars in the Auto MPG dataset, with each point colored by cylinder count. The code loads data from a CSV file using `d3.csv`, applies `d3.scaleLinear` for both axes, and uses `d3.scaleOrdinal` with `schemeCategory10` for color encoding. Axes are rendered via `d3.axisBottom` and `d3.axisLeft`, while circles are appended with dynamic `cx`, `cy`, and `fill` attributes, rendered in SVG. The visualization includes labeled axes and filters out rows with missing horsepower values.

task3

This scatter plot displays the relationship between horsepower and miles per gallon for vehicles from the Auto MPG dataset, with each point colored by cylinder count. It uses D3 v7 to load CSV data via `d3.csv`, filter out missing horsepower values, and render an SVG with `scaleLinear` axes, `scaleOrdinal` color mapping, and `schemeCategory10` for the legend. The visualization highlights the expected inverse correlation where higher horsepower generally corresponds to lower fuel efficiency.

task 3.aCOLOR

This visualization displays the Iris dataset as a scatter plot, using petal length and petal width to position circles colored by iris species (setosa, versicolor, and virginica). The SVG rendering uses D3 v6 APIs including `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and data joins via `selectAll` and `join`. Data is loaded asynchronously from a GitHub-hosted CSV using `d3.csv`, and each mark’s size and shape derive from sepal measurements, though the fixed radius and rx/ry attributes do not alter appearance. Axis labels are added as SVG text elements.

task 2

This example shows the distribution of IMDb ratings across thirteen movie genres, with each genre’s ratings divided into five percentage-based categories. A stacked horizontal bar chart displays the proportions, using color to distinguish rating bands. The visualization is built with D3 v7 and rendered as SVG. The code uses d3.stack to compute the stacked layout, d3.scaleBand for the categorical y-axis, and d3.scaleLinear for the x-axis, with mouseover events triggering a tooltip that shows the exact percentage for each segment.

Task 1 question 1

This horizontal bar chart displays the top 10 countries by population in the year 2000, with bars extending from left to right and country names listed along the vertical axis. The visualization uses React components to render SVG elements, with D3 v5 scales (`scaleBand`, `scaleLinear`) and formatting utilities (`format`) to map population values to bar widths. Data comes from a CSV file fetched via D3’s `csv` method, filtered to the top 10 entries after sorting. Bars include a native SVG `<title>` tooltip showing the formatted population value, and hover effects change bar color.

Fork of Hello VizHub

This example shows a static web page that uses D3.js to display a text message centered on the screen. The `index.html` file loads D3 v6 from a CDN and includes a `div` with the ID `message`. The `index.js` script imports the `select` function from D3 and uses `select('#message').text()` to set the div’s content to the string `'Hello VizHub!'`, which is exported as an ES6 module from `myMessage.js`. The CSS applies a large, centered font.