gsdontineni518@gmail.com

Activity 7.1 - Area chart

This area chart visualizes the total Spotify streams of the most streamed songs aggregated by their release year, showing how streaming totals trend across decades. The chart uses a steel-blue filled path generated by `d3.area()` with linear scales for both axes. Data is loaded from a remote CSV file using `d3.csv`, then processed with `d3.rollups` to sum streams per year before sorting chronologically. Axes are rendered using `d3.axisBottom` and `d3.axisLeft`, with the SVG output containing numbered year ticks and labeled axis titles.

Nov 7, 2024

Activity6_Task4

This SVG bubble chart, rendered with D3 v7, visualizes the Iris dataset by plotting sepal length against sepal width. Each circle's radius encodes petal length, while its color distinguishes the three species using a categorical scale. The code loads data from a remote CSV, employs `d3.scaleLinear` and `d3.scaleOrdinal` for positioning and coloring, and provides interactive tooltips on hover. A static legend identifies species, and the visualization supports animation through D3's transition methods.

Activity6_task3.2

This example shows a scatter plot comparing car horsepower and torque, with car make encoded by symbol shape and a custom legend. The visualization uses D3 v7 APIs including scaleLinear, scaleOrdinal, schemeCategory10, symbolsFill, and symbol to render marks. Data is loaded from a remote CSV and parsed with csvParse, then visualized using a modular structure with local ES6 modules for axes and legend components.

Activity6_Task3

This interactive scatter plot, built with D3.js v6, visualizes a car dataset by plotting horsepower against torque. Each circle represents a car model, with its color encoding the vehicle's highway MPG value using a sequential blue color scale. The visualization uses a tooltip that appears on mouseover to display the car's make, horsepower, torque, and MPG. The axes are labeled and scaled using `d3.scaleLinear`, with the SVG output rendered to fill the browser window, pulling data from a remote CSV file.

Activity6_Task2

Iris measurements from the classic Iris dataset appear as horizontally stacked bars for each species, with four segment colors mapping the sepal and petal dimensions. The chart uses d3.stack and scaleBand to arrange layers per species, and hover tooltips reveal exact numerical values per segment. Axis ticks are drawn with d3.axisBottom, and the SVG rendering includes explicit axes, labels, and a color legend.

Activity6_task1

This horizontal bar chart displays the populations of 20 countries in 2010, sorted by country name along the y-axis. Each bar’s length encodes population value, with a formatted tick label converting SI units (e.g., "B" for billions) for readability. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis, `scaleLinear` for the continuous x-axis, and renders SVG rectangles via the `Marks` component. Data is loaded asynchronously from a CSV file using `d3.csv`, then sliced to the first 20 rows.

activity 6_Task 1

This bar chart displays the population of 10 countries in the year 2000, ordered along a vertical band scale with horizontal bars extending from a shared origin. The visualization uses React with d3-scale’s `scaleBand` and `scaleLinear` to map country names and population values, while custom React components render SVG axes and marks. Population values are loaded from a CSV file, scaled using d3-format’s `format('.2s')` to abbreviate tick labels (e.g., ’B’ for billions), and exposed via native SVG `<title>` tooltips. Styling applies blue tick lines, light green bars, and a Poppins font.

Fork of buddha

A generative React art piece renders a flurry of semi-transparent colored squares over a low-opacity SVG portrait of Buddha, with the portrait repeated and scaled inside a bordered frame. The image uses React 16.10 to map nested arrays into SVG `<null>` elements, assigning each a random position, fill color, and opacity. A large SVG `<path>` defines the Buddha figure, which is layered beneath the randomized square overlay. The example demonstrates procedural, non-interactive composition through nested array mapping in React's JSX syntax.

Fork of buddha

A geometric Buddha figure is drawn as an intricate SVG path, layered over a field of randomly generated colored squares that form a scattered, abstract backdrop. The visualization uses React to render the SVG elements, with the background squares generated through nested array mappings that apply random positioning and color values. The main figure is constructed from a detailed SVG path, transformed and scaled, while the square layer demonstrates procedural generation through JavaScript's `Math.random()` for both layout and RGB color selection.

Fork of buddha

This example visualizes a geometric Buddha-like figure composed of repeating circular patterns and a single detailed vector path. The graphic is built with React and rendered as SVG, using nested `Array.map()` calls to generate hundreds of semi-transparent, randomly colored circles across a black background. The central Buddha shape is drawn with a complex SVG `path` element, scaled and translated into position. The code relies on React’s declarative JSX syntax and the native SVG circle and path APIs, with no external data source—the shapes are generated procedurally from hardcoded dimensions.

Fork of 2 reflections

A dense field of randomly positioned, colorful diamond polygons fills a black SVG canvas, generated by a nested React `map` that computes each polygon’s coordinates, fill color, and rotation from `Math.random()`. Overlaid near the center is a single intricate Buddha-like path traced in white, scaled and translated via React’s `transform` attribute. The example uses React 16.10 with JSX to render the SVG elements directly.

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

This example shows a series of overlapping Buddha head silhouettes rendered in a dark composition, with each copy shifted and scaled differently and layered with translucent SVG polygons. The image paths are drawn using SVG `<path>` elements with white and red strokes, while the background is filled with randomly generated colored triangles. It uses React and ReactDOM to render the SVG structure, and the code includes nested array mappings to generate multiple polygon elements.

Fork of 5 buddhas

This visualization displays a grid of colorful, rotating polygon shapes overlaid with a large, detailed Buddha path rendering. The SVG output uses nested `A.map()` iterations to generate hundreds of diamond-like polygons, each with randomized coordinates, fill colors, and rotation transforms. The Buddha figure itself is drawn using a complex SVG `path` element, while the background is black with the shapes rendered in bright, varied hues. The code relies on React and ReactDOM to render the SVG structure, with no external data source.