Vidya Lakshmi Chitturi

Activity7_Question2

This chart visualizes GDP growth rates over time as a stacked area chart, with each country represented by a distinct colored layer. The data is loaded from a CSV file using `d3.csv` and processed with `d3.groups` to organize values by year, then stacked using `d3.stack()`. The visualization uses D3 v7’s scale functions (`scaleLinear`, `scaleOrdinal`) and the `d3.area` generator to render smooth SVG paths, with axes drawn via `d3.axisLeft` and `d3.axisBottom`. A legend manually constructed with SVG rectangles and text identifies each country.

Activity7_Q1

This example visualizes the distribution of wine quality ratings from the WineQT dataset, showing the count of wines for each quality score as a pie chart. The SVG chart is generated with D3 v6, using `csv` to load data from a GitHub repository, `pie` and `arc` to compute and draw slices, and `scaleOrdinal` with `schemeCategory10` for colors. A custom legend displays each quality label with its count.

Activity7_Question1

This example visualizes the distribution of wine quality scores from the WineQT dataset with a D3.js pie chart. Each slice represents a quality score, with the slice's size proportional to the number of wines at that quality level, and the legend details the count per category. The visualization is rendered as an SVG created using `d3.select`, `d3.pie`, and `d3.arc` to generate the chart arcs and labels, with `d3.scaleOrdinal` and `d3.schemeCategory10` providing the color scheme. The data is loaded remotely from a CSV file with `d3.csv`.

Activity6_Q4

Activity6_Q3

This scatter plot shows the relationship between GDP per capita (in billions) and life expectancy for countries in 2015, sourced from a GitHub-hosted GDP dataset. It uses d3.csv to load the data, scales the GDP axis logarithmically via d3.scaleLog, and colors points using d3.scaleOrdinal with d3.schemeCategory10. SVG circles are rendered with D3's data join, and hover interactions display a tooltip showing country name, GDP, and life expectancy. The axes are labeled using d3.axisBottom and d3.axisLeft.

Activity6_Q2.3

This visualization shows the proportional distribution of population across Africa, Asia, and Europe for five countries, with each horizontal bar normalized to 100% to facilitate cross-country comparison. The chart renders as a normalized stacked bar chart using SVG, where each segment’s length represents its percentage share. The code loads data from a CSV file, converts values to percentages, and uses d3.stack() for stacking, d3.scaleLinear() and d3.scaleBand() for axes, and d3.scaleOrdinal() for colors. Interactive tooltips display exact percentages on hover.

Activity6_Q1.2

This horizontal bar chart displays the population of 20 countries in 2010, sorted by country name. The visualization uses React with D3 v5 scales, including d3.scaleBand for the categorical y-axis and d3.scaleLinear for the continuous x-axis. Data is loaded via d3.csv from a GitHub repository and rendered as SVG rectangles with native tooltips showing formatted population values. Custom React components handle axis rendering with tick formatting that converts Giga units to Billions.

Activity6_Q1.1

Activity6_Task1

Activity6_Task3.1

Activity6_Task4

A bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for different car makes, using circle size to represent highway MPG and color to distinguish makes. The visualization includes interactive tooltips that reveal the make on hover. Built with D3 v7, it renders as an SVG with linear scales for positioning and size, an ordinal color scale using interpolateTurbo, and a legend showing MPG values. Data is loaded from a local CSV file.

Activity6_Task3.2

This interactive scatter plot visualizes the Iris dataset, mapping sepal length on the x-axis and petal length on the y-axis, with species distinguished by different symbol shapes. The visualization uses D3.js v7, employing `scaleLinear` for both axes, `scaleOrdinal` with `symbolsFill` for shape encoding, and a custom shape legend component. Data is loaded asynchronously from a GitHub-hosted CSV file using `d3.csvParse`. The chart responds to window resizing by redrawing within the full viewport, with axes and labels generated through reusable `axes.js` and `scatterPlot.js` modules.

Activity6_Task3

This scatter plot visualizes the Iris dataset, showing petal length against petal width, with circles colored by species (setosa, versicolor, virginica). It uses d3.v6’s `csv` loader, `scaleLinear`, `axisLeft`, and `axisBottom` to build the SVG visualization. The plot reads data from a GitHub-hosted CSV, maps each row to circle positions via x and y scales, and renders colored markers with fixed radius.

Activity6_Task2

This visualization displays a stacked horizontal bar chart showing the distribution of IMDb movie ratings across six genres, with each bar segment representing the percentage of movies falling into five rating ranges from below 5.0 to above 8.5. The data comes from a CSV file containing genre and rating proportion values. Built with D3.js v7, the visualization uses `d3.stack()` to compute stacked series and `d3.scaleOrdinal()` for color encoding, with mouseover tooltips revealing exact percentages. The SVG-rendered chart includes axis labels, a title, and interactive highlighting of individual segments.

Activity6_Q1.1

Activity6_Task1

This example displays a horizontal bar chart comparing the 2020 population data for 30 countries, with bars sized by xScale and country names on the y-axis. It uses React components to render SVG elements, with d3.scaleBand and d3.scaleLinear for positioning and d3.format for tick labels. The bars are light green rectangles with tooltips showing formatted population values, and the data is loaded from a CSV file via d3.csv.

Activity6_Task1

This is a horizontal bar chart displaying the 2020 populations of 30 countries, loaded from a CSV file and sorted from largest to smallest. The visualization is rendered as an SVG using React and D3 v5, with `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and custom `AxisBottom` and `AxisLeft` components for ticks. Green rectangles represent data values, with tooltips showing the formatted population in billions. The chart is part of a React app using `useData` to fetch and parse the data, with axes styled via CSS.