koushikkumarreddykoorapati@my.unt.edu

Activity7-Q2

This area chart shows the relationship between wine quality scores and average alcohol content, using red wine quality data loaded from a GitHub-hosted CSV. The visualization aggregates the dataset by grouping wines according to their quality rating and calculating the mean alcohol percentage for each group, then renders this as a crimson, semi-transparent area path. The code uses D3 v7 APIs including `d3.csv` for data loading, `d3.rollups` and `d3.mean` for aggregation, `d3.area` for the shape, and `d3.axisBottom` and `d3.axisLeft` for the labeled axes.

Apr 10, 2025

Activity7-Q1

This visualization displays the distribution of wine quality scores as a pie chart, with each slice representing a quality rating and its segment size proportional to the number of wines with that score. A legend to the right maps colors to quality values, while axis labels clarify that axes are not applicable for this chart type. The implementation uses D3 v7's `d3.pie` layout, `d3.arc` for path geometry, `d3.scaleOrdinal` with the `schemeSet2` color palette, and `d3.rollup` to aggregate counts from the CSV dataset fetched from GitHub. All elements are rendered as SVG using D3's append and join operations.

Apr 10, 2025

Activity6 Task4 Q 1

A bubble chart compares movie production budgets against box office revenue, with bubble size encoding popularity and color distinguishing genres such as Action, Sci-Fi, and Drama. Hovering over a bubble reveals a tooltip with the movie title, genre, budget, revenue, and popularity score. Built with D3 v7, the visualization uses `d3.csv` to load data, `scaleLinear` for axes, `scaleSqrt` for bubble radii, and `scaleOrdinal` with `schemeCategory10` for genre colors. SVG circles render the bubbles, and a legend identifies genre colors.

Activity6 Task4 Q 1

This scatter plot shows the relationship between movie production budgets and box office revenues for 51 films, with each point colored by genre (Action, Animation, Sci-Fi, etc.). Hovering over a point enlarges the circle and displays a tooltip with the movie title, release year, genre, budget, and revenue. The visualization uses D3.js v7 with `d3.scaleLinear` for both axes, `d3.scaleOrdinal` with `d3.schemeCategory10` for genre colors, and `d3.csv` to load the dataset. Mouse events trigger smooth transitions and tooltip positioning.

Activity6 Task3 Q 1

An interactive SVG scatter plot visualizes the relationship between movie budgets and box office revenue, with each point colored by genre, and hover tooltips revealing title, year, budget, and revenue. The visualization loads data from a CSV file and uses D3.js v7 scales for axes, an ordinal color scale for genre categories, and D3 transitions to animate points and tooltips on mouseover and mouseout events.

Activity6 Task4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for various car makes. Each circle, rendered with SVG and D3.js, positions vehicles by their performance metrics, while bubble size encodes fuel efficiency and color distinguishes the manufacturer. The visualization includes an interactive tooltip that displays the car make on hover, and a legend for interpreting the MPG scale. Data is loaded from a local CSV file using `d3.csv`.

Activity6 tutorial 3.2

This example visualizes the classic Iris dataset as a scatter plot, mapping sepal length on the x-axis and petal length on the y-axis. Each species—setosa, versicolor, and virginica—appears as a distinct shape (circle, cross, or diamond) rendered as SVG paths using d3.symbol(). The code builds the chart with d3.scaleLinear for axes, d3.scaleOrdinal for shape mapping, and d3.axisBottom/axisLeft for ticks. A custom shapeLegend function creates a legend showing each species symbol. Data is loaded from a remote CSV via d3.csv.

Activity 6 Tutorial 3.2

A scatter plot of Iris flower measurements uses sepal length on the x-axis and petal length on the y-axis, with species encoded by shape in a custom legend. The visualization renders SVG marks via the D3 v7 API, using `scaleLinear` and `scaleOrdinal` for positioning and shape encoding, plus `symbol` and `symbolsFill` for point glyphs. The code loads the Iris dataset from a GitHub-hosted CSV, parses it with `csvParse`, and applies a join-based declarative rendering pattern for axes and marks.

Activity 6 Tutorial 3.1

This scatter plot visualizes the Iris dataset, showing petal length on the x-axis and petal width on the y-axis, with each dot colored by species (skyblue for setosa, lightgreen for versicolor, orange for virginica). The SVG visualization uses D3 v6 APIs including `csv`, `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `select`, with circles sized by a fixed radius but also encoding sepal dimensions via the `rx` and `ry` attributes. Data loads from a GitHub-hosted CSV file, and axes are labeled with rotated text.

Activity 6 Tutorial 3.1

This scatter plot visualizes the Iris dataset, showing petal length on the x-axis and petal width on the y-axis, with each point colored by species (setosa, versicolor, or virginica) using green, orange, and skyblue markers. The visualization also encodes sepal dimensions as the x and y radii of each circle. Built with d3.v6, the example uses `d3.csv` to load data from a GitHub gist, `d3.scaleLinear` for axes, and `d3.extent` to compute domains, rendering circles as SVG elements with axis labels and ticks.

Activity6 Question2

A stacked bar chart displays the normalized proportions of horsepower, torque, and highway MPG for six car makes, with each bar summing to 100%. The x-axis uses percentage formatting, and a categorical color legend identifies the three metrics. Built with D3 v7, the chart uses `d3.stack()` to compute stacked series, `d3.scaleBand()` for the categorical y-axis, and `d3.scaleLinear()` for the numeric x-axis. Data is loaded from an inline array derived from the provided CSV, and SVG rectangles render each segment.

Activity6_Task2

This visualization uses a stacked horizontal bar chart to compare IMDb rating distributions across six film genres, with each bar segmented into five rating brackets from "below 5.0" to "above 8.5". The chart reads percentages along the x-axis and genres along the y-axis, enabling quick comparison of how ratings cluster differently by genre. The implementation uses d3.stack to compute stacked segments, d3.scaleBand for the categorical y-axis, and d3.scaleLinear for the continuous x-axis. The SVG renders interactive tooltips on mouseover that display the exact percentage for each rating segment. The transparent background and custom color scale help distinguish the five rating categories.

Activity6 Question 1.2

This example shows the populations of 30 countries in 2010 using a horizontal bar chart. The chart uses React functional components with D3 scales to map country names to the y-axis and population values to the x-axis. Bars are rendered as SVG rectangles with hover effects, and axis labels are formatted using D3’s `format` function to display values in billions. Data is loaded asynchronously from a CSV file using D3’s `csv` method. The code includes custom axis components for the bottom and left sides.

Activity6 Question 1

This horizontal bar chart ranks the top 10 countries by population in the year 2000, using data from a CSV file. React components with D3 v5 scale functions (`scaleBand`, `scaleLinear`) render SVG rectangles whose lengths are proportional to population values, with hover tooltips. The chart formats large numbers with `format('.2s')` to display values in billions.

Activity 6 Question 1

This chart displays the populations of 10 countries in the year 2000, sorted from largest to smallest in a bar chart. The visualization uses D3.v7 with SVG rendering, employing `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the population y-axis, with values formatted in billions. The data is loaded from a CSV file via the `useData` module and rendered through custom `AxisBottom`, `AxisLeft`, and `Marks` components.

Activity 6 Q1

This chart shows the population of ten countries in the year 2000 as a bar chart, with country names on the x-axis and population counts on the y-axis. It loads a CSV dataset from a GitHub repository, filters for year 2000, and takes the first ten entries. Using d3.v7, it creates an SVG with `d3.scaleBand` and `d3.scaleLinear`, renders teal rectangles for each bar, and adds rotated axis labels via `d3.axisBottom`. The chart includes a centered title and uses `d3.autoType` for data parsing.

Activity 6_Task 1

A horizontal bar chart shows the 2020 population of 30 countries, sorted from largest at the top to smallest at the bottom. The visualization uses React components with d3.scaleBand for the y-axis and d3.scaleLinear for the x-axis, rendering marks as SVG rectangles. Data is loaded via d3.csv from a GitHub-hosted dataset, with population values formatted using d3.format. The chart includes labeled axes and a tooltip showing the exact population value for each bar on hover.