AnirudhaKulakarniKaranam@my.unt.edu

Assignment2_Q1

This interactive pie chart visualizes the distribution of video game ratings across different platforms, using the "Action" genre as the slice value. The chart loads CSV data from an external GitHub repository via `d3.csv` and renders it as an SVG with D3 v7. Mouseover interactions change arc opacity and display the numeric Action score at the centroid using `arc.centroid`, while each slice is permanently labeled with its platform name. The visualization relies on `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` with `d3.schemeCategory10` for coloring.

Apr 12, 2024

Assignment2_Q1

This pie chart visualizes the distribution of video game scores across genres, based on IGN data loaded from a CSV file using D3.js. The code uses D3’s `pie` layout and `arc` generator to compute and render the slices as SVG paths, with each genre assigned a color via a hue rotation. The chart is generated from a single data row and displayed without labels or legend, emphasizing the proportional comparison between categories.

Apr 10, 2024

Activity6_Q4

This bubble chart visualizes monthly visitor counts for four cultural sites in Los Angeles from 2014 to 2016. Each circle represents a month, positioned along the x-axis by date and y-axis by the number of visitors to the America Tropical Interpretive Center. The circle’s radius encodes Avila Adobe visitor numbers using a linear scale. Built with React and D3 v7, the SVG visualization uses `d3.scaleTime` and `d3.scaleLinear` for axes, with hover tooltips displaying specific values.

Apr 5, 2024

Activity6_task4

This visualization shows the correlation between average horsepower, torque, and highway MPG across 31 car makes. Each bubble’s position encodes horsepower (x-axis) and torque (y-axis), while its radius represents highway MPG and its color distinguishes the manufacturer. The chart uses D3.js v7 to render SVG circles with linear scales for axes and bubble size, plus an ordinal color scale. Interactive tooltips appear on mouseover, and a legend explains the bubble sizing.

Activity6_Q3

This scatter plot visualizes candy data, showing the relationship between sugar percentage and win percentage, with each point colored by competitor name. The chart uses D3 v6 with an SVG rendering approach, employing `scaleLinear` for both axes, `extent` for domain calculation, and `scaleOrdinal` with `schemeCategory10` for color encoding. Data is loaded asynchronously from a CSV file via `d3.csv`, and circles are bound to the data using the join pattern. Axes are generated with `axisLeft` and `axisBottom`, with additional text labels for each dimension.

Activity6_task3.2

This example shows a scatter plot of the Iris dataset, mapping sepal length on the x-axis and petal length on the y-axis, with each species distinguished by a unique shape symbol. The visualization includes labeled axes and a custom legend that displays the shape-to-species mapping. Built with D3.js v7, it uses `scaleLinear` for the axes, `scaleOrdinal` with `symbolsFill` for shapes, and the `symbol` generator to draw the marks. Data is loaded asynchronously from a CSV file and parsed with `csvParse`.

Activity6_task3

This visualization displays the Iris dataset using a scatter plot, mapping petal length on the x-axis and petal width on the y-axis. Each point is colored by species (setosa, versicolor, virginica) using skyblue, lightgreen, or orange. The code loads CSV data from a GitHub repository via `d3.csv`, scales axes with `d3.scaleLinear`, and renders SVG circles with `d3.selectAll` and `data.join`. Axis labels are added using text elements, while `d3.axisLeft` and `d3.axisBottom` generate the tick marks.

Activity6_Q2

This stacked bar chart displays monthly sales data for two products across five months, with each bar segmented to show the relative contribution of product1 and product2. The visualization uses D3.js v7's `d3.stack()` to compute the stacked series and `d3.scaleBand` for the categorical x-axis. Bars are rendered as SVG rectangles with hover opacity changes, while `d3.axisBottom` and `d3.axisLeft` generate the month and sales axes. The dataset is hardcoded as an array of objects in the script.

Acitivity6_task2

A stacked bar chart visualizes how movie genres relate to IMDb rating categories. Each horizontal bar represents a genre and is divided into five colored segments for rating brackets from below 5.0 to above 8.5, scaled as proportions of 100%. Hovering highlights a segment and displays a tooltip with the exact percentage. Built with D3 v7, it uses `d3.stack`, `d3.scaleOrdinal`, `d3.scaleBand`, and `d3.scaleLinear` to generate SVG rectangles and axes from CSV data.

Fork of Activiry6_Task2

This stacked bar chart shows the distribution of IMDb movie ratings across five genres, with each bar segment representing the percentage of ratings within a specific range. The visualization reveals how genre influences rating outcomes, such as documentaries receiving higher ratings than action films. Built with D3 v7, the chart uses `d3.stack()` to create the stacked segments and `d3.scaleBand` for the categorical genre axis. Interactive tooltips display exact percentages when hovering over each segment, with the chart data loaded from a CSV file and rendered as SVG.

Fork of Activiry6_Task2

Activiry6_Task2

This stacked bar chart shows the percentage distribution of IMDb ratings across six movie genres. The horizontal bars are segmented into five rating categories, from "below 5.0" to "above 8.5", with each genre’s total summing to 100%. The visualization reveals how different genres skew toward higher or lower ratings. The chart is rendered as an SVG using D3 v7. The code uses `d3.stack()` to create the stacked segments and `d3.scaleOrdinal` for color mapping. Interactive tooltips appear on mouseover, displaying the precise percentage for each rating segment. The data comes from a CSV file containing genre and rating percentage columns.

Activity6_Q1_Part2

This bar chart displays the top 20 most populous countries in 2010, ranked from largest to smallest along a vertical axis. The visualization uses React to render SVG elements, with D3 scale functions (`scaleBand`, `scaleLinear`) and axis components (`AxisBottom`, `AxisLeft`) to position the marks. Population values are parsed from a CSV file using D3’s `csv` loader, formatted with `d3.format` to abbreviate large numbers (e.g., “1.5B”), and each bar includes a tooltip via an SVG `<title>` element.

Apr 1, 2024

Activity6_Q1_part1

This visualization displays the population of the top 10 most populous countries in the year 2000, using a horizontal bar chart. Each bar’s length encodes the population value, with country names listed along the vertical axis. The chart is built with D3 v5’s `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis, rendered as SVG rectangles. Data is sourced from the United Nations World Population Prospects 2019, loaded via D3’s `csv` function. The React-based interface includes custom components for axes and marks, with green bars and blue tick lines styled via CSS.

Apr 1, 2024

Activity6_Task1

This visualization displays the 2020 population estimates for 30 countries as a horizontal bar chart, with bars colored light green and axis ticks in blue. Population values are formatted using D3's `format` function to abbreviate billions and millions. The chart is built with React components that use D3 scales (`scaleBand`, `scaleLinear`) to position bars, while custom `AxisBottom` and `AxisLeft` components render the axes. Data loads asynchronously from a remote CSV file via `d3.csv` and renders as SVG elements.

Apr 1, 2024

6 Buddha

Six overlapping Buddha silhouettes drift across a flower-background canvas, each path defined by detailed SVG coordinates and filled with translucent random RGB colors. The React app generates roughly 30,000 small null elements at randomized positions, layering them with the Buddha paths at varying scales and transforms. Using React 16.10 and direct SVG rendering, the visualization creates a dense, overlapping composition without external data sources, relying on pure procedural generation and transparent opacity to blend shapes.

Buddhas

A dense, overlapping field of small, brightly colored rotated polygons forms a chaotic abstract composition on a black background. The visualization renders a single large Buddha silhouette as an SVG path, layered behind the scattered geometric shapes. Built with React and ReactDOM, the code generates points from a generic numeric array and maps them to polygon elements with random positions, colors, opacity, and rotation. The Buddha path itself is drawn directly from embedded SVG path data, producing a static, high-contrast contrast between the structured figure and the seemingly random colorful overlay.

Buddha

This example displays a colorful, abstract Buddha-like figure constructed from overlapping translucent polygons. The visualization uses React to manage the SVG structure, with polygon elements positioned via a computed array and rendered with haphazard random coordinates and colors. A large path element traces the detailed contour of a seated figure, layered on top of the chaotic polygon field. The scene is set against a black background, with the entire composition rendered using scalable vector graphics.

Buddha

A generative Buddha portrait is rendered as an overlapping arrangement of semi-transparent polygons, each filled with a randomized RGB color on a black background. The composition layers hundreds of triangular shapes across the SVG canvas, producing a colorful, abstract mosaic effect. Built with React and ReactDOM, the visualization generates positions and colors using JavaScript's `Math.random()`. A detailed SVG path outlines the Buddha figure, scaled and translated over the polygon field, blending structured line art with chaotic, generative color fields.

Buddha

This example displays a colorful, abstract Buddha created from thousands of overlapping SVG polygons, generated procedurally with React. The image is built by mapping over an array of numbers, each iteration creating a polygon with randomized position, fill color, and opacity. A precise `d` path defines the Buddha's silhouette, rendered inside an SVG element. The code uses React and ReactDOM for structure and rendering. The background is black, aiding the vibrant, chaotic color composition.