lokasaivenkatatammineedi@my.unt.edu

Activity 7 Pie Chart

This pie chart displays the all-time leading NBA scorers by total points, with each slice labeled by player name and accompanied by a legend showing the player and their point total. The visualization uses D3.js v7 to load CSV data from a GitHub repository, compute the pie layout with `d3.pie()`, and render SVG path arcs via `d3.arc()`. A categorical color scale (`d3.scaleOrdinal` with `d3.schemeSet1`) distinguishes players, while SVG text elements and manually positioned legend rectangles provide labeling. The chart is generated entirely with client-side SVG rendering.

Apr 4, 2025

A6_Q6_Shape

This scatter plot uses distinct shapes to visualize the relationship between GDP per capita and life expectancy for ten countries, with each shape representing a different continent. Built with D3 v7 and rendered as an SVG, the chart maps data points using a linear scale for both axes and an ordinal scale for shape encoding. Interactivity is provided through mouseover events that display a tooltip with the country’s details, including its GDP, life expectancy, and continent.

Activity6_Q9

This bubble chart from pravanth-tammineedi visualizes the relationship between revenue and employee count for ten technology companies, using bubble size to encode market capitalization and color to distinguish each company. Built with D3 v7 and rendered as SVG, the chart employs d3.scaleLinear for both axes and d3.scaleSqrt for bubble radii, with interactive tooltips showing company details on mouseover. The visualization includes a categorical color legend and a supplementary size legend for market cap values; data is loaded from a local CSV file using d3.csv.

Activity6_Task4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes, with circle size encoding MPG and color representing manufacturer. The D3.js v7 code uses `d3.csv` to load data, `d3.scaleLinear` for x, y, and radius scales, and `d3.scaleOrdinal` with `d3.interpolateTurbo` for color. SVG circles render with interactive tooltips on mouseover, alongside a legend showing MPG values and color-coded makes.

Activity6_Q6

This scatterplot displays the relationship between GDP per capita and life expectancy for ten countries, with each point colored by continent. Built with D3.js v7, the visualization uses `d3.csv` to load data, `d3.scaleLinear` for axes, and `d3.scaleOrdinal` with `d3.schemeSet2` for categorical coloring. Hovering over a circle triggers a tooltip showing country name, GDP, and life expectancy. The SVG rendering includes labeled axes and axis ticks generated via `d3.axisBottom` and `d3.axisLeft`.

Activity6_Task3.2

This interactive scatter plot visualizes the classic Iris dataset, showing the relationship between sepal length and petal length. Each of the 150 flowers is rendered as a D3 path mark, with the species type (setosa, versicolor, virginica) encoded by different fill symbols as shown in a custom legend. The visualization uses D3 v7 APIs including `scaleLinear` for axis scaling, `scaleOrdinal` for shape mapping, and `symbolsFill` to generate the distinct marker shapes. Data is loaded asynchronously from a CSV file via `csvParse`.

Activity6_q3

This visualization shows the percentage contribution of five statistical categories—points, rebounds, assists, steals, and blocks—for ten NBA players, using a stacked horizontal bar chart where each player’s row sums to 100%. The code loads data from a CSV via `d3.csv`, normalizes each player’s stats, and renders the SVG with `d3.stack()`, `d3.scaleOrdinal` for colors, and `d3.scaleBand` for the y-axis. Interactive tooltips appear on mouseover, displaying the category’s percentage using `d3.format`.

Mar 30, 2025

Activity6_Task3.1

This scatter plot visualizes the Iris dataset, encoding petal length on the x-axis and petal width on the y-axis, with each point colored by species (skyblue for setosa, lightgreen for versicolor, orange for virginica). The visualization uses d3.csv to load the data, d3.scaleLinear for both axes, and d3.axisLeft and d3.axisBottom to render the ticks. The SVG circles also carry sepal length and width values in their rx and ry attributes, though these do not affect the visual representation. The chart fills the full browser window with custom margins and labeled axes.

Mar 30, 2025

Activity6_Task2

This visualization shows the distribution of IMDb movie ratings across different genres, using a stacked horizontal bar chart where each bar represents a genre and segments represent percentage ranges from "below 5.0" to "above 8.5". The chart uses a diverging color scheme with five distinct colors. Built with D3.js v7, the code employs `d3.stack()` with keys from the data columns, `d3.scaleBand()` for the y-axis, and `d3.scaleLinear()` for the x-axis percentage scale. Interactive tooltips display exact percentages on hover, while data is sourced from a CSV file containing genre-specific rating proportions.

Mar 30, 2025

Activity6_Q1

This horizontal bar chart displays the top 10 most populous countries in the year 2000. The visualization uses D3 v7 to load CSV data from a remote GitHub repository and render light green SVG rectangles, whose widths correspond to population values sorted in descending order. The chart employs linear and band scales for positioning, with formatted tick labels converting large numbers to abbreviated units. Axis components and marks are modularized into separate files, and margins define the plotting area within an 800×500 SVG canvas.

Activity6_Q2

This example shows the top 20 countries by population in 2010 as a horizontal bar chart, using a lightgreen fill for each bar. The chart is rendered with D3 v7 in an SVG container, with a linear x-scale for population values and a band y-scale for country names. Data is loaded from a CSV file via `d3.csv` and sorted in descending order before being sliced to the top 20. The axes are customized with formatted tick labels (using `d3.format` to abbreviate billions) and axis title text, and the chart redraws responsively on window resize.

Activity6_Tutorial_1

A horizontal bar chart displays population figures for the top 30 countries in 2020, sourced from a CSV hosted on GitHub. The chart encodes population on a linear x-axis and country names on a categorical y-axis using colored bars. The visualization is built with D3 v7, using `d3.scaleLinear`, `d3.scaleBand`, and SVG rendering. Axis labels are added manually; the x-axis uses a custom tick format to display large numbers in billions. The rendering pipeline fetches data via `d3.csv`, selects the top 30 rows, and draws the marks with `Marks.js`.

Fork of Activity 6_Task 1

This example shows a horizontal bar chart of 2020 population estimates for 30 countries, ranked by country name. It uses React with D3 v5’s `scaleBand` and `scaleLinear` to map countries to bars and population values to bar widths, rendered as SVG `<rect>` elements with a `<title>` tooltip. The data is loaded via `d3.csv` from a GitHub gist, and axes are built custom components using D3’s tick generation.