sagamreddy929@gmail.com

Fork of ICE8-Tree graph of Countries and Those are Good In

ICE8-Tree graph of Countries and Those are Good In

ICE-7:Pie chart of students in each country

A pie chart displays the distribution of student population in millions across countries, with each slice proportionally sized and color-coded. A legend identifies country names, and a table below lists exact numerical values. The visualization uses D3.js v7, fetching CSV data from a gist URL, and employs `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` for construction. Labels are positioned using `labelArc.centroid`, and slices include tooltips via `append('title')`. The SVG renders the chart, while HTML table elements show the underlying data.

ICE-7:Area chart of students going abord doing bachelor's

This area chart shows the number of Indian students pursuing bachelor’s degrees abroad from 1990 to 2022. A blue line traces the trend over time, with a matching filled area beneath it and circular points marking each year’s value. The visualization uses D3.js v7 with SVG rendering, employing `d3.area()`, `d3.line()`, and `d3.scaleLinear()` for the axes. Data is loaded from a CSV file via `d3.csv()`, and hover effects on the points change their color to orange, as defined in the CSS.

ICE-7:-Line chat Number of Students Going from India (1990-2022) to study bachelor's degree

This line chart visualizes the number of Indian students pursuing bachelor's degrees abroad from 1990 to 2022. A blue path rendered with `d3.line` traces the trend across years, with hoverable circles at each data point. The visualization uses D3 v7’s `scaleLinear` for axes and `d3.csv` to load the dataset from a GitHub gist. Data parsing converts Year and Bacherlors columns to numbers, and axes labels are manually added via SVG text elements. The chart is rendered entirely in SVG with CSS styling for interactivity.

Fork of Assignment 5 Bubble Plot D3

This animated scatter plot visualizes student enrollment trends across different degree types—bachelor's, master's, PhD, and jobs—tracking the number of students going abroad over time. The visualization cycles through each category every two seconds, updating both the data and the symbol shape (circle or square) to represent the current category. Built with D3 v3, the reusable `scatterPlot` function manages scales, axes, and transitions, while the main script loads CSV data from a GitHub gist and drives the animation loop using `setTimeout`.

Fork of ICE-5 Assignment

This interactive scatter plot visualizes student outcomes across four categories—Bachelor’s, Master’s, PhD, and Jobs—by cycling through each dataset every two seconds. Built with D3.js, it uses CSV data parsed into numeric fields and renders SVG scatter plots with symbols mapped to each category via `symbolCircle` and `symbolSquare`. The visualization updates dynamically using `scatterPlot()` calls, switching the y-axis values and symbol types while displaying the current category title above the plot.

Fork of Reusable D3 Scatter Plot

This example visualizes the relationship between student population and student-to-staff ratio in a scatter plot, with each circle representing a university. It loads CSV data from a GitHub URL, parses it, and maps the selected columns to x and y positions using D3’s `scaleLinear`. The chart uses `axisBottom` and `axisLeft` for axes, while circle colors come from `scaleOrdinal` (though the color mapping is static to species names not present in this dataset). The reusable `scatterPlot` function encapsulates the chart’s configuration, and SVG rendering is used throughout.

Scatter Plot

A scatter plot displays the students-to-staff ratio for various countries, with each red circle representing a country's ratio plotted against the country name on the x-axis. The D3 v7 code loads CSV data from a GitHub Gist, then uses `d3.scaleBand` and `d3.scaleLinear` to map country names and ratios to SVG coordinates. Axis labels and rotated tick text clarify the chart, with the y-axis showing the ratio and the x-axis listing countries.

ICE-6 Assignment

This horizontal bar chart displays the percentage of international students across university-hosting countries, with bars sorted descending from highest to lowest. Using React and D3 v5, the visualization maps countries to a band scale on the y-axis and percentages to a linear scale on the x-axis, rendering bars as SVG rectangles. Data loads from a CSV via d3.csv, with y-axis labels manually positioned to accommodate varying country name lengths.

ICE-5 Assignment

This example combines a simple embedded SVG clock with a CSV data-loading summary. The clock, drawn with circles and lines, updates its hour and minute hands to the current time using D3’s `setAttribute` for rotation transforms. A separate fetch call retrieves a remote CSV file (University_Ranks.csv) and parses it with `d3.csvParse`, displaying the file size, row count, and column count in a styled `<pre>` element. The page relies on D3 v7 and vanilla JavaScript, with all rendering done via SVG.