Gunna,Praneeth Reddy

Fork of Activity7.1_Question2

Activity7.1_Question1

A pie chart displays the average horsepower for the top 10 car makers, with all remaining makers aggregated into an "Others" slice. Slices and labels are rendered using SVG paths and text elements via D3's `pie` and `arc` APIs, with a color legend on the right. The code loads car data from a CSV file using `d3.csv`, aggregates values with `d3.sum`, and uses `d3.arc` for slice geometry and `d3.scaleOrdinal` for categorical colors. Axis labels are added as text annotations, though the chart itself is circular.

Activity7_tutorial

This animated scatter plot cycles through the four numerical measurements of the classic Iris dataset, switching which measurement is plotted on the x-axis every few seconds while the y-axis remains fixed on sepal length. The visualization uses the D3.js library’s `csv` loader, `scaleLinear` for axes, and a custom `scatterPlot` module. Circles are color-coded by iris species (setosa, versicolor, virginica), with a legend and dynamic axis labels updating as the animation progresses. The plot also displays the raw dataset values mapped to circle `rx` and `ry` dimensions.

Activity6_Q4

This bubble chart shows the five most populous countries in 2020, comparing their populations in 2016 against 2020 on the x- and y-axes. Bubble size encodes population growth between those years, with color distinguishing each country and labels identifying them. The visualization uses d3.csv parsing with delimiter detection, d3.scaleLinear for both axes, d3.scaleSqrt for bubble radius, and d3.scaleOrdinal with Tableau10 colors. Hovering reveals a tooltip with exact values, rendered via SVG and D3 v7.

Activity6_Task4

Activitity6_Question3

This scatter plot visualizes the relationship between horsepower and miles per gallon (MPG) for a cars dataset, with each circle colored by the vehicle’s origin (USA, Europe, or Japan). The visualization uses D3 v6 to load CSV data via `d3.csv`, parse and filter the rows, and render SVG circles with linear scales for both axes. Axis labels and ticks are added using `axisLeft` and `axisBottom`, while the full window width and height define the chart area. The code explicitly filters out rows with missing or invalid numeric values before mapping the data points.

Activity6_Task3.2

This scatter plot visualizes the Iris dataset, showing sepal length against petal length, with each of the three species represented by a distinct symbol. The visualization uses D3 version 7 to render SVG elements, employing `scaleLinear` for axes and `scaleOrdinal` with `symbolsFill` to map species to different point shapes. Data is loaded asynchronously through a CSV file fetch, then parsed with `csvParse` before being displayed with custom axis and shape legend components.

Activitity6_Task3

Activity6_task3

Activity6_Q1

Activity6_Task2

Task1_Q2

Task1_Q1

Activity 6

Fork of six Buddhas

Six overlapping Buddha outline drawings stack diagonally across a black background, each rendered with a violet fill and white stroke in a different scale and position. The React app generates these layered SVG paths by reusing a single complex path string across multiple `<g>` transform groups. The code imports React and ReactDOM, computes cubic values from an array, and applies hardcoded transforms like `translate(210,120) scale(1.9)` to position each figure. A flower-patterned wallpaper image sits behind the SVG canvas.

Fork of Five Buddhas

A colorful field of overlapping circles is generated procedurally, with random positions and RGB values producing a dense, chaotic scatter plot. The visualization incorporates a static SVG path of a Buddha figure, scaled and translated over the circle field. Built with React and rendered as SVG, the code uses nested array maps to create hundreds of circle elements, while the Buddha path is drawn directly with SVG path data. The example demonstrates random number generation for visual variety within a fixed React component structure.

Fork of Five Buddhas

A kaleidoscopic SVG composition overlays 9,261 randomly rotated diamond polygons atop a hand-coded Buddha path, all rendered against a black background. The generative layer cycles through translucent fill colors derived from pseudo-random RGB values, while the Buddha vector remains crisp beneath the chaotic scatter. Built with React and ReactDOM, the visualization maps an array of indices through nested loops to produce the polygon grid, using SVG polygon elements with transform rotations and opacity settings. The Buddha path data appears hard-coded, with no external data fetching or interaction behavior.