Shasankreddyganta@my.unt.edu

Activity7_Task9_Question1

A pie chart built with D3.js v7 visualizes movie genre ratings from a static array of 20 genres, using arc size to encode rating values. The chart renders as SVG, with each genre slice colored using `d3.schemeCategory10` and positioned via `d3.pie` and `d3.arc`. A legend lists all genres with matching color swatches, while d3 axis components for category and linear scales display alongside the pie, though the axes appear redundant to the circular representation. The example demonstrates D3 module loading via UNPKG and local ES6 imports.

Apr 21, 2024

Activity6_Task4_Question4

This bubble chart visualizes the relationship between two numeric values across ten movie genres, with each genre positioned by its value1 (x-axis) and value2 (y-axis) coordinates. Circular markers use a radius scale based on the larger of the two values, creating proportional bubble sizes. The visualization is rendered as an SVG using D3 v7, with the `d3.scaleLinear` API handling axis and radius mappings, and `d3.axisBottom` and `d3.axisLeft` generating the positional axes. Sample data is hardcoded within the JavaScript module.

Activity6_Task4_Question4

This interactive bubble chart from VizHub visualizes the correlation between car horsepower, MPG, and weight using data from a local cars.csv file. Each bubble’s x-position maps to horsepower, y-position to MPG, and radius to vehicle weight, rendered as SVG circles with tooltips. Built with D3 v7, it uses `d3.scaleLinear` for axes and bubble sizing, `d3.axisBottom` and `d3.axisLeft` for scales, and mouse event handlers for the tooltip. The chart animates opacity changes on hover, with black stroke outlines and skyblue fills.

Actvity6_Task4_Question4

This bubble chart visualizes product sales performance by plotting sales revenue on the x-axis and profit on the y-axis, with bubble size representing units sold. Each product is colored using `d3.scaleOrdinal` with `d3.schemeCategory10`, and the chart includes axis labels and a title. The data is loaded from a CSV file using `d3.csv`, and the visualization is rendered as an SVG using D3 v7 APIs such as `d3.scaleLinear` for axes and bubble scaling.

Actvity6_Task4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for various car makes. Each circle’s position represents horsepower (x-axis) and torque (y-axis), while its size encodes highway MPG and its color distinguishes the car brand, with a legend for both. Rendered using D3 v7 with SVG and animation, the chart includes interactive tooltips on mouseover, implemented via D3 event handlers. The code uses `d3.scaleLinear` for axes and bubble size, `d3.scaleOrdinal` with `d3.interpolateTurbo` for colors, and the data comes from `bubblechart.csv`.

Activity_Task3_Question_3

This example shows a scatter plot of fifty randomly generated points, each belonging to one of three categories (A, B, or C) and plotted on a simple Cartesian grid. The visualization distinguishes categories by encoding each one with a distinct symbol—circle, cross, or diamond—and a unique color from the `d3.schemeCategory10` palette. Using D3 v7, the code creates SVG paths via `d3.symbol`, scales numeric x and y values with `d3.scaleLinear`, and adds labeled axes rendered through `d3.axisBottom` and `d3.axisLeft`.

Actvity6_Task3.2

This example visualizes the Iris dataset, plotting sepal length against petal length in a scatter plot where each point’s shape encodes the species. The visualization uses D3 v7 APIs including `scaleLinear`, `scaleOrdinal`, `symbolsFill`, and `symbol` to generate shapes, along with custom axes and shape legend modules. Data is loaded asynchronously via CSV from a GitHub URL, parsed with `csvParse`, and rendered in an SVG that fills the viewport. The chart updates dynamically when the data arrives, with the legend positioned at a fixed coordinate.

Activity6_Task3

This example visualizes the Iris dataset as a scatter plot, mapping petal length and width as its x and y axes while coloring each point by species (setosa, versicolor, virginica). The code loads CSV data from a GitHub gist, parses numeric columns, and uses D3 v6 scales and axes (`scaleLinear`, `extent`, `axisLeft`, `axisBottom`) to position circles in an SVG rendered to the full window. Each circle’s radius is fixed, but its fill color distinguishes species. The visualization includes rotated axis labels for petal length and sepal length, with layout margins and custom tick styling.

Activity6_Task2_Question2

This interactive stacked bar chart visualizes the distribution of five fruit types across five quantity bins, from "Below 100" to "Above 400." A radio-button interface toggles between two animation states: step one displays the full stacked bars, while step two separates each category into thinner, individual segments. Built with D3 v4, the visualization uses `d3.scaleBand`, `d3.scaleLinear`, `d3.stack`, and `d3.scaleOrdinal` to map data from a CSV file. The SVG rendering and smooth `.transition()` animations bring the data comparisons to life.

Activity6_Task2

This stacked bar chart displays the distribution of IMDb movie ratings across six genres, showing the percentage of titles falling into five rating brackets from below 5.0 to above 8.5. Each horizontal bar breaks down a genre's total into colored segments corresponding to rating ranges, with tooltips revealing exact percentages on hover. The visualization uses D3 v7's `d3.stack()` and `d3.scaleOrdinal()` for data aggregation and color mapping, rendered as SVG with `d3.axisBottom` for the percentage axis and a custom tooltip built from HTML divs. Data comes from the provided CSV file, where each row represents a genre's proportions across rating categories.

Activity 6_Task 1

This example shows a horizontal bar chart of the 20 most populous countries in 2010, with population values on the x-axis and country names on the y-axis. It uses React with D3 v5’s `scaleBand` and `scaleLinear` to position bars, while custom `AxisBottom` and `AxisLeft` components render tick marks and labels. Data is loaded asynchronously from a CSV via `d3.csv` and `useEffect`, with population converted from thousands. A `Marks` component draws each rectangle and includes a `title` element for hover tooltips.