HarshathBudida@my.unt.edu

AQI Value vs CO AQI Value

Assignment-2-Question-1

Assignment-2-Question-2

This example visualizes car sales from 2013 to 2023 using an area chart, highlighting the trend in total sales over time. The D3 v5 code loads CSV data from a GitHub gist, parses the year field into a date object, and uses `d3.scaleTime` and `d3.scaleLinear` for scaling, with `d3.axisBottom` and `d3.axisLeft` for tick marks. It draws a smooth line with `d3.line` and `d3.curveBasis`, fills the area beneath using `d3.area`, and applies a green fill with custom CSS styles.

Task-Assignment-2

This example presents an animated scatter plot of the Iris dataset, cycling through different flower measurements on the x-axis while keeping sepal length fixed on the y-axis. It uses D3 version 6 to load the CSV data via `d3.csv`, scales with `d3.scaleLinear`, and renders axes with `d3.axisLeft` and `d3.axisBottom`. A custom reusable `scatterPlot` ES6 module manages the chart’s configuration, while a `setInterval` loop updates the x-axis and redraws the SVG elements. Circles are colored by species (setosa, versicolor, virginica), with a static legend and title displayed.

Activity-6_Task-3.2

Activity-6_Question-4

Activity-6_Question-2

Activity-6_Task-4

Activity-6_Question-3

Activity-6_Task-3.1

This D3.js (v6) scatter plot visualizes the Iris dataset, plotting petal length against petal width with colored circles representing each species (setosa, versicolor, virginica). The visualization also encodes sepal measurements as the `rx` and `ry` attributes on the circles, though the standard radius remains fixed. The SVG is rendered full-window, with axes generated via `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom`. Data is loaded asynchronously from a CSV URL using `d3.csv`. Axis labels are styled in green Times font.

Activity-6_Task-2

Activity-6_Question-1.2

This example displays a horizontal bar chart of population data for 20 countries in 2010, with country names on the y-axis and population values on the x-axis. The visualization is rendered as SVG within a React application, using D3 scaleBand and scaleLinear to map data to positions, and custom React components (AxisBottom, AxisLeft, Marks) to draw axes and bars. Data is loaded asynchronously via the d3.csv function from a GitHub-hosted CSV file, with population values formatted using the d3 format function and converted to billions for tick labels.

Activity-6_Question-1.1

Activity-6_Task-1

This example displays a horizontal bar chart of the top 30 countries by population in 2020. The visualization uses React to render SVG elements, with D3 v5 functions like `scaleBand` and `scaleLinear` for positioning and an axis generated through custom `AxisBottom` and `AxisLeft` components. Data is loaded asynchronously from a CSV file via D3’s `csv` method, and each bar includes a native SVG `<title>` tooltip showing the population value. The chart uses a light green fill for the marks and blue axis lines.

6 Buddha

The visualization displays a colorful, abstract rendering of the Buddha's silhouette, composed of overlapping translucent shapes. It uses React with SVG, where nested `map` functions generate multiple `<null>` elements at random positions with random RGB colors and opacity, creating a chaotic, layered effect. The Buddha's form is drawn using SVG `<path>` data within a `<g>` transform, set against a floral background image.

5 Buddha

Five overlapping, translucent Buddha silhouettes are rendered on a black background. The image is built from a static SVG path, while an additional layer of randomly colored polygons is generated by nested `A.map` loops in React, with coordinates based on `Math.random` and a `rotate` transform. The project uses React and ReactDOM to compose the SVG elements, with the Buddha path data embedded directly in the code.

Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

The visualization displays a large, ornate Buddhist figure rendered as a detailed SVG path, overlaid with hundreds of randomly placed, semi-transparent circles. Built with React and ReactDOM, the code uses nested `map` functions to generate 20³ colored circles with randomized positions and RGB fill values, while a separate `<path>` element draws the Buddha’s complex outline. The SVG canvas is 960×1000 pixels, with the path scaled and translated, and the circles set to 80% opacity over a black background.