vinodreddysagam929@gmail.com

ICE-8:Network graph of different format of game played by each country

ICE-8:Visualizing tree of number of nations participating in each game format

ICE-8:World Map of Different cites and Loacations

Fork of FP: Map

Fork of D3 world map example with TopoJSON to GeoJSON and circular indicators

Fork of ICE-8:Network graph

ICE-8:Network graph

ICE8-Tree graph of Countries and Those are Good In

Fork of ICE8-Tree graph

ICE-8:Visualizing tree of number of nations participating in each game format

Fork of ICE-8:Visualizing tree of top 5 countries with worldcup wins

Fork of ICE-8-TREE-religions

Fork of ICE-8:Network graph

ICE-8:Network graph

Fork of Fork of Fork of Jeevani Network

ICE-7:Resuable Scatter Plot of Number Student Going to Aboard

This animated scatter plot visualizes the number of students going abroad for different degree levels (Bachelor’s, Master’s, PhD, and Jobs) over time. The visualization cycles through each student type every two seconds, updating the chart with a new symbol shape (circle or square) and a title indicating the current category. The code uses D3.js utilities like `csv`, `scaleLinear`, `axisLeft`, and `axisBottom` to load data from a remote CSV file and render the SVG chart. The plot displays year on the x-axis and student counts on the y-axis, with the y-axis label "No of Students Going Abroad."

Fork of Pie Chart

This example renders an aggregated pie chart of car selling prices grouped by make, with labels and leader lines connecting each slice to its name. The code uses D3 v7’s `d3.group`, `d3.sum`, `d3.pie`, and `d3.arc` to compute and draw the chart in SVG, along with a color scale via `d3.scaleOrdinal`. A legend and a data table are also generated from the same aggregated dataset, styled on a light blue background.

ICE-7: Reusable Scatter Plot Visualization of Primary Indian Schools Facilities

This interactive scatter plot uses D3.js to visualize facilities across primary schools in India, with the average ratio of boys to girls on the x-axis and a rotating y-axis cycling through Library, Play Ground, Computer Labs, and Food Stalls every two seconds. Each point represents a state, encoded with distinct shapes and colors from `d3.scaleOrdinal` and `d3.schemeCategory10`. The reusable `scatterPlot` module handles axes, labels, and animated transitions, rendering as an SVG from the provided `india.csv` data source.

Fork of Fork of Fork of Reusable D3 Scatter Plot

This animated scatter plot visualizes the Iris Dataset, cycling through four student categories—Bachelors, Masters, PHD, and Jobs—by displaying the number of students going abroad over time. Rendered with SVG and D3 v6, it uses distinct symbol shapes for each category, with smooth transitions between views every two seconds. The chart includes labeled axes for "Years" and "No of Students Going Abroad", and dynamically updates the title and symbol style as it cycles through the dataset.

Fork of Fork of Reusable D3 Scatter Plot

This scatter plot animates through cancer death rates in the USA by education level, cycling between Bacherlors, Masters, PHD, and Jobs categories. It uses a reusable D3 chart function with `scaleLinear`, `axisBottom`, `axisLeft`, and `symbol` to render differently shaped points per data type. The visualization transitions every two seconds, updating the dataset and title while preserving the SVG axes. Data comes from a Cancer in USA CSV file, loaded via `d3.csv`, with the chart redrawn using the d3 v6 selection and transition APIs.

Fork of Fork of Reusable D3 Scatter Plot

This visualization combines a scatter plot with line charts to explore university rankings, plotting countries on a shared x-axis band scale and metrics like research environment, quality, and industry impact on a y-axis from 0 to 100. It renders red circles for student-to-staff ratios alongside steelblue line paths per university, using the D3 v6 APIs `scaleBand`, `scaleLinear`, `line`, `axisBottom`, and `axisLeft`. The data comes from a CSV of University Ranks, fetched via `d3.csv` and parsed with custom numeric conversions. The reusable `scatterPlot` module demonstrates a configurable chart factory pattern with setters for width, height, and value accessors.

Fork of Reusable D3 Scatter Plot

This animated scatter plot visualizes university rankings across multiple countries, cycling through four metrics: Research Environment, Students to Staff Ratio, Research Quality, and Industry Impact. Built with D3 v3, the chart uses distinct SVG symbols (star, square, circle) to represent different data dimensions, with axes updating every two seconds as the metric changes. The visualization leverages a reusable chart pattern, where the scatter plot component is separated into its own module and accepts configurable setters for data binding and scales.

ICE-7:Area Chart:-Comparing USD to INR Price from 1990 to 2022

This area chart compares the USD to INR exchange rate from 1990 to 2022, using a red filled area beneath a blue line to show price trends over time. The visualization displays yearly data points as blue circles, with axes labeled for year and price. Built with D3 v7, the code uses d3.area with curveMonotoneX for the filled region and d3.line for the trend line, fetching data from a CSV via d3.csvParse. The chart renders to SVG within a styled container, with axis labels and title formatted through CSS classes.

ICE-7:-Line Chart:-Comparing USD to INR Price from 1990 to 2022

This line chart displays the exchange rate of USD to INR from 1990 to 2022, showing a steady upward trend in the price over time. The visualization uses d3.v7 with SVG rendering, employing d3.line, d3.scaleLinear, and d3.axisBottom/axisLeft to plot the data. Data points are marked as circles, and the line uses curveMonotoneX for smooth transitions. The data is fetched from a CSV file hosted on GitHub Gist, and the chart is styled with a white background and blue accents.

ICE-6 Assignment : Car makes vs average selling price

This visualization shows the average selling price of cars grouped by make, using a horizontal bar chart where each bar’s length encodes price and its color denotes the car make. The chart, built with React and D3 v5, loads CSV data from a GitHub gist, aggregates the selling prices by make, and renders the result as SVG. It employs D3’s `scaleBand`, `scaleLinear`, `scaleOrdinal`, `axisBottom`, and `axisLeft` APIs to construct the axes and color encoding.

Fork of ICE 7-1 Reusable Scatter Plot

This interactive scatter plot visualizes the Iris dataset, encoding species with distinct colors and shapes. It uses d3.scaleLinear for axes, d3.scaleOrdinal for categorical mapping, and d3.symbols for point glyphs, rendered as SVG. The chart dynamically cycles through different attribute pairs every ten seconds, updating axes via d3.axisLeft and d3.axisBottom. Data is fetched from a CSV, and the reusable chart component is built with d3’s selection joins, allowing smooth transitions between views.

Fork of ICE7 - Reusable Scatter Plot

This scatter plot visualizes the Iris dataset, cycling through different measurement pairs on the x-axis to compare sepal and petal dimensions. It uses D3 v6 to render SVG circles, with colors encoded by iris species and a reusable chart module (scatterPlot) that handles axes and scales. The visualization updates automatically every few seconds, rotating through petal width, sepal width, petal length, and sepal length, while a legend maps species to colors. The code integrates D3 APIs like `scaleLinear`, `axisLeft`, and `axisBottom` to generate the axes and scales.

Fork of ICE7 - Reusable Scatter Plot

This scatter plot visualizes the Iris dataset, cycling through different measurement pairs on the x-axis to compare sepal and petal dimensions. It uses D3 v6 to render SVG circles, with colors encoded by iris species and a reusable chart module (scatterPlot) that handles axes and scales. The visualization updates automatically every few seconds, rotating through petal width, sepal width, petal length, and sepal length, while a legend maps species to colors. The code integrates D3 APIs like `scaleLinear`, `axisLeft`, and `axisBottom` to generate the axes and scales.

Scatter plot : RPO vs Bowling Avearge

This scatter plot visualizes cricket bowling statistics by comparing Runs Per Over (RPO) against Bowling Average for different countries. The visualization uses D3 v7 with SVG rendering, loading data from a remote CSV file via `d3.csv`. Points are plotted using `d3.scaleLinear` for both axes, with `d3.axisLeft` and `d3.axisBottom` displaying the scales. The chart reveals the relationship between a bowler's economy rate and their average, with each dot representing a country’s bowling performance.

Scatter Plot

This scatter plot shows the Students to Staff Ratio for universities across different countries. It uses D3.js (version 7) with an SVG rendering approach to display each country as a red circle, positioned along a categorical x-axis for country names and a linear y-axis for the ratio values. The code loads data from a CSV file via a GitHub gist URL, and employs D3's `scaleBand` and `scaleLinear` functions to map the data coordinates, along with `d3.axisLeft` and `d3.axisBottom` to generate the axes.

ICE-6 Assignment

A horizontal bar chart ranks universities by the percentage of international students, with countries listed on the y-axis and the percentage on the x-axis. The visualization loads data from a CSV file and uses React hooks to manage state, while D3’s `scaleBand`, `scaleLinear`, and axis functions handle the chart’s scales and ticks. The bars are drawn as SVG rectangles, and the data is sorted in descending order before rendering.

ICE-5:Loading and Parsing CSV Data with D3.js

This example demonstrates how to load and parse a CSV file using D3.js (v7). The visualization displays the number of columns, rows, and file size of the CSV data within an HTML page. An SVG graphic is embedded alongside the text, which presents the parsed statistics in a styled <pre> element. The page uses a clean, centered card layout with a red heading, green data text, and a sky-blue background. The D3.js library handles the asynchronous CSV loading and parsing, while the custom CSS provides a polished, responsive presentation. The SVG file is imported directly into the page and displayed with the text. The example highlights D3’s data-loading capabilities and demonstrates how to integrate external data files with SVG content in a single-page visualization.

Fork of Let's make a face with D3.js!

This example draws a stylized eagle using D3.js v5 and SVG, composing the bird from geometric shapes such as ellipses, circles, polygons, and paths. The code builds the figure by appending elements to an SVG group, using D3 selections to set attributes like coordinates and fill colors for the body, head, eyes, beak, wings, tail, and feet. It demonstrates basic D3 data-joining and SVG rendering as a playful fork of the original "Let's make a face" tutorial, with a light sky-blue background.

Fork of A5_BubbleChart

This bubble chart maps earthquake locations using longitude and latitude coordinates, with each steelblue circle representing a seismic event. The visualization plots raw geographic data points without magnitude encoding, emphasizing spatial distribution over intensity. The code uses D3 v7’s `d3.csv` for data loading and `d3.scaleLinear` with `d3.axisBottom` and `d3.axisLeft` to construct axes. SVG circles are positioned via the `xScale` and `yScale` functions, rendering the dataset from the provided external CSV file into an 800×600 pixel chart.