Siva Kishore Reddy

Activity-7.1

This animated pie chart visualizes the price distribution of gadgets from a CSV file, with each segment labeled and a corresponding color-coded legend. The visualization uses D3 v7's `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` APIs, rendering SVG paths and text elements. Interactive tooltips appear on mouseover, displaying the gadget name and price. The chart is generated within an 800×500 SVG canvas, with the legend positioned separately and arcs animated from the center.

Nov 8, 2024

Activity-7.2

This example displays an area chart of car sales data loaded from a CSV file. The chart uses `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis, with an area path rendered using `d3.area`. Hovering over invisible rectangles reveals a tooltip with the car model and sales value, implemented with `d3.select` and `.on('mouseover')` methods.

Nov 6, 2024

Activity 6_Question 4

This interactive bubble chart visualizes correlations between average power, RPM, and mileage across multiple vehicle makes, using data loaded from the vehicles.csv file. The visualization renders as an SVG with D3 v7, where circle size encodes mileage, x-axis position represents power, and y-axis position represents RPM. A color scale maps vehicle makes to distinct colors using `d3.scaleOrdinal` with interpolated Turbo colors. Hover interactions trigger tooltips displaying the vehicle make, while a legend demonstrates how circle sizes correspond to mileage values.

Oct 25, 2024

Activity 6_Question 3

This example shows a scatter plot of vehicle performance data, mapping horsepower on the x-axis and weight on the y-axis for ten vehicles across different manufacturers. The visualization uses color-coded symbols from d3.symbolsFill to distinguish each manufacturer, with a legend explaining the shape mappings. Built with d3.v7, the code uses d3.scaleLinear for both axes, d3.scaleOrdinal for shape encoding, and d3.axisLeft/axisBottom for tick marks, while loading the CSV data asynchronously via d3.csv.

Oct 25, 2024

Activity 6_Question 2

This stacked horizontal bar chart displays the percentage distribution of energy generation across five sources, broken into five percentage ranges. The visualization uses d3.stack() to aggregate categories and d3.scaleBand() for the y-axis positioning, with d3.scaleOrdinal() assigning colors to each energy source. Interactive tooltips triggered by mouse events display precise percentage values for each segment. The chart includes axis labels, a title, and a legend, rendered as SVG elements with data loaded from a CSV file.

Oct 25, 2024

6 Buddhas reflections

The visualization presents a composition of six overlapping Buddha silhouettes, rendered as SVG paths with a dark floral background. Generated with React and ReactDOM, it overlays hundreds of semi-transparent, randomly colored circles across the canvas to create a textured, pointillist effect. The code uses nested map functions to place these circles, while each Buddha path is transformed and scaled, creating a reflective, kaleidoscopic arrangement. The visual mixes geometric abstraction with the sacred iconography, producing a vibrant, meditative piece.

Oct 24, 2024

Activity 6_Task4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes, using data from bubblechart.csv. The visualization encodes torque on the y-axis, horsepower on the x-axis, and highway MPG through both bubble size and color, with a color legend for car makes and a size legend for MPG values. The code uses D3 v7 with SVG rendering, employing scales (d3.scaleLinear, d3.scaleOrdinal) and interactive tooltips that respond to mouse events, with animated opacity transitions on hover.

Oct 22, 2024

Activity 6_Task3.2

This example shows a scatter plot of the Iris dataset, mapping sepal length to the x-axis and petal length to the y-axis, with the three flower species distinguished by different symbol shapes (circles, crosses, and diamonds) via a shape legend. The visualization is built with D3 v7, using `scaleLinear`, `scaleOrdinal`, `symbol`, and `symbolsFill` to position and style the marks. It fetches the CSV data from a GitHub repository and renders it in an SVG sized to the window. A modular structure separates the axes, legend, and plot logic into reusable functions.

Oct 22, 2024

Activity 6_Task3.1

This visualization displays the Iris dataset as a scatter plot, mapping petal length and width for each flower specimen. The D3 v6 code colors the circular marks by species—setosa, versicolor, and virginica—using a custom switch function. The SVG chart is created with d3.select, scaleLinear, extent, and axis functions, loading data from a CSV via d3.csv and parseRow.

Oct 22, 2024

Activity 6_Task2

This example visualizes the distribution of IMDb movie ratings across six genres, using stacked horizontal bars to show the proportion of movies in five rating brackets from "below 5.0" to "above 8.5." The chart is rendered as an SVG using D3 v7, with a diverging color scale distinguishing each rating category. The code employs `d3.stack()` to compute stacked bar segments, `d3.scaleBand()` for the genre axis, and `d3.scaleLinear()` for the percentage axis, with interactive tooltips that appear on hover to display the exact percentage for each rating segment. The data comes from the included `data.csv` file, and the visualization uses a clean, readable layout with custom fonts and styled axes.

Activity 6 Question 2

This bar chart displays the population of the top 20 countries in 2010, using horizontal bars to compare values. The chart is built with React and D3 v5, using `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Data is loaded from a remote CSV file via `d3.csv`. SVG rendering is used, with axis ticks, labels, and marks defined in separate component files. Tooltips show the formatted population value for each bar.

Activity 6 Question 1

A horizontal bar chart displays the population of ten countries in the year 2000, with bars rendered as green SVG rectangles and country names on the y-axis. The visualization loads CSV data from a GitHub repository and uses D3 v5 scales (d3.scaleBand, d3.scaleLinear) and formatting (d3.format) to map values. A tooltip appears on hover via SVG `<title>` elements, while custom React axis components render the tick marks and labels.

Activity 6_Task 1

This example displays a horizontal bar chart of 2020 population figures for 30 countries, with each bar’s length representing population size and country names on the y-axis. The visualization uses React with D3 v5’s `scaleBand`, `scaleLinear`, and `csv` loader to fetch and process data from a GitHub-hosted CSV. SVG rendering is driven by reusable React components for axes and marks, with axis labels and green bars styled via CSS. Tooltips appear on hover, showing the population value in a compact format (e.g., “1.2B”).

6 Buddhas

Six Buddhas overlap in a circular arrangement, rendered as dark outline paths filled with translucent, randomly colored circles on a black background with a floral image. The visualization uses React to manage SVG elements, mapping over arrays to generate dozens of circles per Buddha path, each with randomized position, RGB color, and opacity. The Buddha silhouettes are drawn using SVG path data, scaled and translated for each instance, while the circles layer atop them creates a textured, multicolored effect. The code relies on React’s component model and SVG APIs, with no external charting libraries.

Oct 18, 2024

6 Buddhas

The visualization displays six identical Buddha silhouettes overlapping in a vertical arrangement against a floral background. The image is generated using React and rendered as SVG, with each Buddha path drawn via SVG `<path>` elements. The code applies random colors, opacities, and positions using JavaScript’s `Math.random()` within nested map functions, while the background is set via CSS. The layout scales and translates each Buddha using SVG transform attributes, creating a layered, multicolored effect.

Oct 18, 2024

5 budhas

Five overlapping buddha faces appear in silhouette against a green background, rendered as a dense cluster of randomly colored, semi-transparent polygons. The visualization uses React to generate and map an array of polygon elements onto an SVG canvas, with each polygon’s position, fill, and rotation determined by JavaScript’s `Math.random()` calls. A detailed buddha path is layered on top and scaled, while the underlying computation includes cubic functions and array loops visible in the code. The rendering relies on React’s `ReactDOM` and SVG’s `<polygon>` and `<path>` elements.

2 buddhas

A visualization of two Buddha figures rendered in SVG, with three nested `Array.map` calls generating hundreds of semi-transparent colored circles that serve as a textured backdrop. Each circle’s position and RGB fill color are randomly computed via `Math.random()`, creating a dynamic, noise-like field behind the central path-based Buddha illustrations. The piece uses React to manage the component hierarchy, with the `width`, `height`, and `radius` defined as constants for the scene. The two Buddha shapes are drawn using complex SVG `path` data, one with a `scale(1.9)` transform, against a black background.

5 budhas

The visualization displays five overlapping Buddha-shaped glyphs, each built from a single complex SVG path defined with cubic Bézier curves. A field of 20 randomly placed colored circles (radius 5) scatters across a black 960×1000 canvas behind the silhouettes, with fill colors generated via `Math.random()` and opacity set to 0.8. The paths are rendered using React components, with the main image grouped and transformed via `translate` and `scale`, while the circles are produced through nested array maps in a React SVG wrapper.

Fork of 2 budhas

This visualization renders a stylized Buddha figure as a dark SVG path on a black background, layered beneath a dense field of semi-transparent colored circles generated from nested array mappings. The React component uses ReactDOM to draw the SVG elements, while the Buddha path is defined through detailed coordinate data and transformed with a scale and translate operation. The circles are positioned using random values multiplied by array indices, creating an organic, particle-like scattering effect around the central figure.