Anilreddyveeraiahgari@my.unt.edu

@Anilreddyveeraiahgari·15 public vizzes

Activity_7.2

This area chart compares export values for China and the USA over time, using semi-transparent light blue and light green filled regions to show the trends for each country. The visualization is built with D3.js v7 and renders to SVG, using `d3.area()` to generate the stacked-looking paths and `d3.scaleLinear()` for the axes. Data is loaded from a remote CSV file and parsed before being mapped to the x-axis (year) and y-axis (exports in billion USD).

Apr 11, 2025

Loading thumbnail…

Activity_7

This pie chart visualizes the average match ratings of football players from a CSV dataset, with each slice representing a player and labeled directly with their name. The chart uses D3.js v6 to load and parse the data, then applies `d3.pie` and `d3.arc` to generate the slices, colored by a categorical scale. A legend lists each player with their rating, while the SVG rendering includes axis-style labels above and below the chart, despite the circular layout. A welcome message appears on page load via plain JavaScript.

Apr 11, 2025

Loading thumbnail…

Bubble Chart_Question4

This bubble chart compares mobile phone brands by battery life, price, and units sold. The x-axis shows battery hours, the y-axis shows price in USD, and the circle size encodes units sold. Each brand is color-coded using `d3.schemeSet3`. The visualization uses D3.js v7 with SVG rendering and includes interactive tooltips on hover. Data is loaded from a CSV file using `d3.csv`, with scales created via `d3.scaleLinear` and `d3.scaleSqrt`. A legend identifies each brand's color.

Apr 4, 2025

Loading thumbnail…

Bubble Chart_task4

This interactive bubble chart visualizes the relationship between average horsepower, torque, and highway MPG across 31 car makes, with bubble size encoding MPG and color distinguishing manufacturers. Built with D3 v7, the SVG chart includes a tooltip displaying the make on hover, along with legends for bubble size and color categories. The x-axis represents horsepower, the y-axis torque, and the data is loaded from a CSV file using `d3.csv`.

Apr 4, 2025

Loading thumbnail…

Activity6_Question3

This scatter plot compares accident numbers against vehicle speed for two sample datasets. Each point is colored according to accident severity on an ordinal green-to-red scale. The chart is built with D3 v6, using `d3.scaleLinear` for the axes and `d3.scaleOrdinal` for color mapping, with all marks rendered as SVG circles within an 800x500 canvas.

Apr 4, 2025

Loading thumbnail…

Activity6_Task3.2

This scatter plot visualizes the relationship between sepal length and petal length for different iris species, using distinct glyph shapes to encode the categorical species variable. The visualization employs D3 v7's `scaleLinear` for the continuous axes, `scaleOrdinal` with `symbolsFill` for shape mapping, and a custom shape legend. Data is loaded as CSV from a GitHub repository and parsed with `csvParse`. The plot is rendered at full window size using D3's join-based approach with `select`, `path.mark`, and custom axis modules.

Apr 4, 2025

Loading thumbnail…

Activity6_Task3.1

This scatter plot visualizes the Iris dataset, showing the relationship between petal length and petal width, with each point colored by species (setosa, versicolor, or virginica). The visualization uses D3 v6 with SVG rendering, employing `d3.csv` to load data from a GitHub repository, `scaleLinear` and `extent` to map the scales, and `axisLeft`/`axisBottom` for the axes. Circles are positioned using the `cx` and `cy` attributes, with labels for petal length and sepal length, though the y-axis label is mismatched with its data.

Apr 4, 2025

Loading thumbnail…

Activity6_Task3.2

This scatter plot displays the relationship between sepal length and petal length for different iris species, with each species distinguished by a unique symbol shape. A shape legend identifies the species categories. The visualization uses D3 v7 APIs including `scaleLinear`, `scaleOrdinal`, `symbolsFill`, and `symbol`, along with custom modules for axes and legend rendering. Data is loaded from a CSV file hosted on VizHub via `fetch` and parsed with `csvParse`.

Apr 4, 2025

Loading thumbnail…

Activity6_Task3

This visualization displays a scatter plot of the Iris dataset, showing petal length against petal width with points colored by species (setosa in skyblue, versicolor in lightgreen, and virginica in orange). The code uses D3 v6 APIs including `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load and render the data as SVG circles. Axis labels are added for petal length and sepal width, though the actual plotted values use petal measurements. The chart fills the browser window and pulls data from a GitHub-hosted CSV file.

Apr 4, 2025

Loading thumbnail…

Fork of Activity6_Question2

This stacked bar chart displays the percentage distribution of low, mid, and high categories across six fictional movie genres, encoded with a diverging color palette. Built with D3 v7, it uses `d3.stack()` to create the layered segments and `d3.scaleBand()` for the categorical y-axis. Rectangles render as SVG elements, with interactive tooltips triggered by mouseover events to reveal exact segment percentages. Data is loaded from a static CSV file, though the chart here uses hardcoded JavaScript arrays for demonstration.

Apr 4, 2025

Loading thumbnail…

Activity6_Question2

This stacked horizontal bar chart shows the percentage distribution of IMDb movie ratings across six genres, broken into five rating brackets from “below 5.0” to “above 8.5.” The code uses D3 v7’s `d3.stack()` to create the stacked segments, `d3.scaleBand()` for the genre axis, and `d3.scaleLinear()` for the percentage axis. A tooltip appears on mouseover, displaying the exact percentage for each genre-rating combination. Data is loaded from a CSV file, and the SVG rendering includes a color legend for the rating categories.

Apr 4, 2025

Loading thumbnail…

Activity6_Task2

This stacked bar chart displays the percentage distribution of IMDb rating levels across six movie genres, revealing how genre influences audience scores. The visualization uses D3.js v7 with SVG rendering to create horizontal stacked bars, where each genre’s total percentage sums to 100%. A custom tooltip, implemented via D3 event handlers, shows precise rating percentages on mouseover. The chart employs `d3.stack()` for data stacking and `d3.scaleOrdinal` for color mapping, with axes and labels rendered using `d3.axisBottom` and `d3.axisLeft`.

Apr 4, 2025

Loading thumbnail…

Fork of activity 6_Question 1.2

This example displays a horizontal bar chart of the 2020 population for 20 countries, taken from a CSV file hosted on GitHub. Built with React and D3 v5, it uses `d3.scaleBand` and `d3.scaleLinear` to position bars and axes, rendering to an SVG canvas. Population values are formatted with `d3.format` to display in billions, and each bar includes a tooltip via an SVG `<title>` element.

Apr 4, 2025

Loading thumbnail…

activity 6_Question 1.1

This example shows a horizontal bar chart comparing the population of the top 10 countries in 2020. The bars are rendered as SVG rectangles using React, with the length of each bar encoding population magnitude. The code uses d3.scaleBand for the categorical y-axis, d3.scaleLinear for the quantitative x-axis, and d3.format to display tick labels in abbreviated form (e.g., "B" for billions). Data is loaded asynchronously from a CSV file using d3.csv, and tooltips appear via SVG `<title>` elements. The chart includes labeled axes for country names and population values.

Apr 4, 2025

Loading thumbnail…

activity 6_Task 1

This example displays a horizontal bar chart of population figures for 30 countries in 2020, with country names on the y-axis and population totals on the x-axis. The visualization uses React components to render SVG elements, with d3.scaleBand and d3.scaleLinear for positioning and scaling, and d3.csv to load the dataset from a raw GitHub URL. The bars are colored purple, axis ticks are styled in red and gray, and hover tooltips show formatted population values using d3.format.

Apr 4, 2025