AkhileshVadlakonda@my.unt.edu

Activity 7

This donut chart displays the mobile market share percentages of various brands for 2024, with each slice labeled directly on the chart. A supplementary legend lists each brand alongside its corresponding percentage. Built with D3 v7, the visualization uses `d3.pie()` to compute slice geometry, `d3.arc()` for rendering paths, and `d3.scaleOrdinal` with the Set3 color scheme. The data is loaded from a remote CSV file via `d3.csv()`, and the chart is rendered as SVG with interactive-free, static labels positioned using the arc centroid method.

Nov 6, 2024

Question 3

This visualization displays a dense, colorful mosaic of rotated diamond shapes scattered across an SVG canvas, overlaid on a flower background image. The diamonds are generated through nested array mappings, with each polygon’s position, size, and fill color determined by random calculations based on an array of numbers. The piece uses React to render the SVG elements, including polygons and an image tag, with both React and ReactDOM loaded via UMD scripts. The background image is sourced from an external URL, and the entire composition is rendered through a React component directly manipulating SVG attributes.

Oct 25, 2024

Question 2.3

This example visualizes IMDb movie ratings across six music genres, showing the percentage distribution of ratings in five categories from "below 5.0" to "above 8.5" using a stacked horizontal bar chart. The chart is rendered as SVG with D3 v7, using `d3.stack()` to create stacked bars, `d3.scaleBand()` and `d3.scaleLinear()` for axes, and `d3.scaleOrdinal()` for color encoding. Interactive tooltips appear on mouseover via D3 event handlers, displaying the exact percentage for each segment. The data comes from a local CSV file loaded through `d3.csv`.

Task - 4 Question 9

This bubble chart shows the correlation between GDP per capita, life expectancy, and population for ten countries. Each circle’s x-position represents GDP, y-position represents life expectancy, and its radius encodes population size. The visualization uses D3 v7 with SVG rendering and animation, reading data from a CSV file. It includes axis labels, tooltips on mouseover, and legends for both bubble size and country color, which uses the `d3.schemeTableau10` scale.

Activity6_Task4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for various car makes. Each circle's x-position represents horsepower, the y-position represents torque, and the circle's radius encodes highway MPG, with color distinguishing makes. The chart uses D3.js v7 with an SVG rendering and includes interactive tooltips on mouseover. The implementation demonstrates D3's selection, scales, and data join APIs, along with axis generation and custom legends for size and categorical color encoding.

Task - 3 Question 6

This scatter plot shows each student’s Math and English scores from a CSV file, with one colored circle per student. The chart uses D3.js v7 to create axes, grid lines, and labels, with an ordinal color scale mapping students to distinct colors. Circles animate by growing and turning red on hover, then revert to their original size and color on mouse-out. The plot is rendered as SVG with linear scales fixed to the 50–100 score range for both axes.

Task - 3

The visualization displays the Iris dataset as a scatter plot, using sepal length on the x-axis and petal length on the y-axis. Each point's shape encodes the species, with a custom legend explaining the shapes. It uses d3.scaleLinear for axes, d3.scaleOrdinal with symbolsFill for categorical shapes, and d3.axisLeft/axisBottom for axis rendering. Labels for axes and species are added via SVG text elements, with data loaded asynchronously from a CSV file.

Activity6_Task3

This scatter plot visualizes the Iris dataset, displaying petal length and petal width for individual flowers while using color to distinguish species (setosa, versicolor, and virginica). Built with D3.js v6 as an SVG rendering, the code loads CSV data via `d3.csv`, scales values with `scaleLinear` and `extent`, and renders circles with `selectAll().join()`. The visualization includes custom axes created with `axisLeft` and `axisBottom`, labeled to show measurement dimensions.

Activity6_Task2

This stacked bar chart shows the distribution of IMDb movie ratings across five genres, with each bar representing the percentage of movies falling into rating brackets from below 5.0 to above 8.5. Hovering over a segment reveals the exact percentage for that rating level within the selected genre. Built with D3 v7, the visualization uses `d3.stack()` to compute the stacked layout, `d3.scaleOrdinal` for color encoding, and `d3.scaleBand` for categorical positioning along the y-axis. The SVG rendering includes interactive tooltips that display precise values on mouse events.

Question 1.2

This visualization displays the populations of the top 20 countries in 2010 as a horizontal bar chart, using a linear x-scale for population values and a banded y-scale for country names. The chart loads CSV data from a GitHub repository and renders bars as SVG rectangles with native tooltips. Built with React and D3 v5, it uses `scaleLinear`, `scaleBand`, `csv`, and `format` to process data, compute scales, and format tick labels. The axes are custom React components that generate `line` and `text` SVG elements.

Task-1 Question 1.1

This bar chart displays the populations of ten countries in the year 2000, ranked vertically with horizontal bars. The visualization uses React and D3 v5, with `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. Data is loaded via `d3.csv` from a remote GitHub CSV source, and bars are rendered as SVG rectangles with tooltips formatted using D3’s `format('.2s')` to abbreviate large numbers. The axes are custom React components, and the styling includes green bars and blue tick lines.

Activity 6

This horizontal bar chart visualizes the 2020 population of 30 countries, sorted alphabetically on the y-axis with population encoded by bar length on the x-axis. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` for positioning, with data loaded via `d3.csv` from a GitHub dataset. SVG rendering includes custom `AxisBottom` and `AxisLeft` components, while `Marks` renders bars with tooltips formatted using `d3.format`.

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

A dense field of small, colorful polygons scatters randomly across a black SVG canvas, with a large, intricate Buddha silhouette rendered in overlapping orange paths at the center. The code uses React and ReactDOM to generate a 960x1000 viewport, mapping nested arrays to create hundreds of polygons with randomized positions, colors, and rotations. A static SVG path element draws the Buddha figure, while the polygon layer employs JavaScript’s `Math.random()` for its chaotic placement and hues.