sai snehith nadipally

ICE-8 Tree graph

ICE-8 Network graph

ICE 7 Snehith Part-1

A static scatter plot visualizes COVID-19 active cases per country, with each country as a colored circle on a categorical x-axis and a linear y-axis scaled by active case counts. The chart, built with D3.js v7, renders as SVG and loads data from a remote CSV file. Circles enlarge and display a country-specific tooltip on mouseover, while a legend lists all countries. The visualization uses `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.scaleOrdinal` with `d3.schemeCategory10` for colors.

ICE-7 Snehith part-4

This area chart visualizes COVID-19 confirmed cases by country, with a steel-blue filled area representing case counts. The SVG chart uses D3.js v7 to load a CSV dataset, map it to a band scale for countries and a linear scale for confirmed cases, and generate the area path via `d3.area()`. Axis labels and rotated tick text are added with `d3.axisBottom` and `d3.axisLeft`, while the chart is rendered on a yellow background with fixed dimensions.

ICE-7 Snehith part-3

This line chart visualizes COVID-19 confirmed cases across different countries using a single connected path. The x-axis lists country names with rotated labels, while the y-axis scales the number of confirmed cases. The code uses D3 v7's `d3.csv` to load data, `d3.scaleBand` and `d3.scaleLinear` for positioning, `d3.axisBottom` and `d3.axisLeft` for axes, and `d3.line` to create the stroke. Data comes from an external CSV file hosted in a GitHub gist, and the chart renders as an SVG with rotated country labels and clear axis titles.

ICE-7 snehith Part-2

This pie chart visualizes COVID-19 death counts by country. The D3 v5 code loads a CSV dataset from a GitHub gist, then uses `d3.pie` and `d3.arc` to generate sliced paths, with `d3.scaleOrdinal` providing categorical colors. Each slice is labeled with its country name, and a legend built from SVG rectangles and text identifies color mappings. The chart is rendered as an SVG with a fixed width and height, positioned centrally within the container.

Fork of Fork of ICE6 snehith

This scatter plot visualizes student dropout and graduation outcomes from a Portuguese higher-education dataset, plotting Age at Enrollment against Course while encoding Gender and Tuition Fees Up to Date as rectangle corner radii. Each student appears as a colored circle—blue for Dropout, yellow for Graduate, red for Enrolled—using D3 v6 scales and SVG rendering. The code loads CSV data via `d3.csv`, applies linear scales with `scaleLinear`, and generates axes with `axisLeft` and `axisBottom`. University of Minho records are drawn from a GitHub-hosted CSV, with custom margin and window-sized SVG dimensions.

Fork of ICE6 snehith

This example visualizes Covid-19 confirmed cases across nine countries using a horizontal bar chart, where bar lengths encode case counts. The code fetches data from a CSV file and renders the visualization with React and D3 v5, using `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. It manually draws grid lines and axis tick labels via D3’s `select` and mapping functions, while the bars are SVG `<rect>` elements. The visualization is fully controlled by React state, with the chart updating when new data loads, and the rendering is done entirely through SVG within a React component.

Fork of ICE6 snehith

This scatter plot visualizes student outcomes (Dropout, Graduate, or other) based on Age at Enrollment and Course, with color-coding assigned to each outcome category. The plot’s vertical axis is labeled "Gender," and the horizontal axis is labeled "Age_at_enrollment," derived from a CSV dataset loaded via `d3.csv` and parsed with numeric coercion. Rendering uses `d3.scaleLinear` for both axes, `d3.extent` for domain calculation, `d3.axisLeft` and `d3.axisBottom` for tick marks, and SVG `circle` elements for each data point, with radii fixed at 5 pixels.

Fork of Fork of Fork of Fork of ICE-6 Scatter Plot

This example visualizes the Iris dataset as a scatter plot, mapping petal length and width on the x and y axes while coloring each point by species (setosa, versicolor, or virginica). The code loads CSV data via `d3.csv`, parses numeric fields, and uses `d3.scaleLinear` with `d3.extent` to compute domains. Circles are rendered as SVG elements with `d3.selectAll` and `data().join()`, while axes are added using `d3.axisLeft` and `d3.axisBottom`. Axis labels are drawn with SVG `text` elements.

ICE6 snehith

This example visualizes COVID-19 confirmed cases for ten countries using a horizontal bar chart rendered as SVG with React and D3 v5. It shows each country's case count as a blue bar, with country labels on the y-axis and a linear scale on the x-axis. The code loads data from a CSV file via `d3.csv`, filters to the 22nd through 31st rows, and uses `scaleBand` and `scaleLinear` to map data to positions. React manages the component state and rendering, while D3 handles the scales and axis ticks. The visualization highlights the relative magnitude of cases across selected countries.

Fork of ICE-6: Rendering Marks and Channels with React & D3

This example displays a horizontal bar chart of the top 10 most populous countries in 2019, using population data loaded from a CSV file. The visualization is built with React and D3 v5, rendering SVG marks (rectangles) and channels (position and length) to encode the data values. It uses `scaleBand` and `scaleLinear` for axes, along with manual tick rendering and axis labels, all within a React component that fetches data with `csv`.

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

This example demonstrates a webpage that displays the top-selling and highest-grossing games, alongside a static SVG illustration of a gaming console. It shows the raw CSV data in a table, preceded by a text summary of the file’s size, row count, and column count. The visualization loads the CSV file using D3.js v7’s `d3.csv` method, then programmatically builds an HTML table from the parsed data. The code also uses `d3.csvFormat` to calculate file size, and it renders the console graphic via hard-coded SVG shapes.

Vizhub scene with elements

A handmade SVG scene depicts a night landscape with stars, a pale yellow moon, layered gray mountains, two trees, and a red car on a road with a white divider line. The code constructs the image using raw SVG elements—`circle`, `rect`, `path`, `line`, and `ellipse`—with fixed coordinates and colors. The black background, dark blue sky, and static composition show no animation or data binding, relying entirely on manual XML markup for rendering.