nikhilthoutu24@gmail.com

Activity-7-Q2

This area chart visualizes the number of games played by Steph Curry across different years, with a smooth curve and a filled green area under the line. The data is loaded via d3.csv from a GitHub-hosted CSV file, then parsed and rendered as SVG. The code uses d3.scaleTime and d3.scaleLinear to map Year and Games values, while d3.line, d3.area, and d3.curveBasis generate the smoothed paths. Axes are created with d3.axisBottom and d3.axisLeft, and formatted using d3.format, with custom CSS styling the ticks and labels.

Activity-7-Q1

A pie chart visualizes the box office collections of films starring actor Natural Star Nani, with each slice representing a film and its collection in crores. The chart uses d3.pie and d3.arc to generate the segments and d3.scaleOrdinal for color mapping. A legend lists each film with its corresponding collection value. Data is loaded asynchronously from a GitHub-hosted CSV file using d3.csv. The SVG rendering centers the chart and labels each slice with its numeric value.

Activity 7 Tutorial

This scatter plot visualizes the Iris dataset, showing petal length against petal width. Each circle is colored by species: sky blue for setosa, light green for versicolor, and orange for virginica. The plot uses D3’s `csv`, `scaleLinear`, `extent`, and axis components, with SVG circles positioned via `cx` and `cy` attributes. Sepal length and width are parsed from the CSV but remain unused for positioning. Axis labels are added as rotated and standard text elements, with a green font style.

Activity6_Question 4

This D3.js bubble chart visualizes the correlation between GDP per capita, life expectancy, and population for 25 countries. The x-axis represents GDP in USD, the y-axis shows life expectancy in years, while bubble size encodes population in millions, and color distinguishes each country. The visualization uses `d3.scaleLinear` for axes and bubble size, `d3.scaleOrdinal` for color assignment, and `d3.axisBottom` and `d3.axisLeft` for tick marks. Interactive tooltips appear on mouseover, displaying detailed country data, implemented with SVG `circle` elements and HTML div overlays. A legend with sample circles and labels explains the population scale.

Activity6_Question3

This scatter plot displays the relationship between horsepower and miles per gallon for cars, with each point’s shape and color encoding the car’s type. The visualization uses d3.scaleLinear for the axes, d3.scaleOrdinal with symbolsFill and schemeSet1 to map categorical values to distinct shapes and colors, and d3.axisLeft/axisBottom for axes. Data is loaded from a remote CSV and parsed with d3.csvParse. A custom legend shows the shape-to-category mapping, with d3.symbol generating the icon paths.

Activity6_Task3.2

This scatter plot visualizes the Iris dataset, showing sepal length against petal length, with each species represented by a distinct symbol shape. The plot encodes the three Iris species through shape, using d3.scaleOrdinal with symbolsFill to assign different geometric marks, while a custom legend explains the species mapping. Axes are rendered via d3.axisLeft and d3.axisBottom, with labels for both dimensions. The data is loaded asynchronously from a GitHub-hosted CSV file using d3.csvParse, and the visualization updates through a state management pattern that handles loading and rendering.

Activity6_Question2

This stacked bar chart compares the proportional energy sources—coal, natural gas, nuclear, renewables, and other—across six countries using D3 v7’s `d3.stack`, `d3.scaleLinear`, and `d3.scaleBand`. Each bar segment is colored via a `d3.scaleOrdinal` color scale, and a hover tooltip reveals the exact percentage for each energy type. The SVG renders with custom axes and labels, reading the data from a CSV file that specifies each country’s energy mix as fractions.

Activity 6_Task 1

This visualization displays the population of 30 countries in 2020 as a horizontal bar chart. The chart is built with React and D3 v5, using `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. Data is loaded from a remote CSV file using D3’s `csv` function, and population values are multiplied by 1000. The SVG rendering uses custom React components for axes and marks, with tooltips formatted using D3’s `format` function to abbreviate large numbers (e.g., “1.23B”).

Activity6_Task4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for various car makes. Each circle's horizontal position maps to horsepower, its vertical position to torque, and its radius to highway MPG, while its color identifies the manufacturer. The chart uses D3.js v7 with SVG rendering and includes animated transitions for tooltip display. It features a legend for MPG scaling and color-coded make identification. The data originates from a CSV file containing aggregated performance metrics for 31 automotive brands.

Activity6_Task3.1

This scatter plot visualizes the Iris dataset, mapping petal length and petal width on the x- and y-axes while coloring each point by species (setosa, versicolor, virginica) using skyblue, lightgreen, and orange. It also encodes sepal length and width as additional properties per circle. Built with D3 v6, the code uses `csv`, `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and SVG circle elements. Data is loaded from a remote GitHub CSV, with axes and labels rendered into a full-window SVG.

Activity6_Task2

This visualization shows the distribution of IMDb movie ratings across six genres, with each genre displayed as a horizontal stacked bar chart broken into five rating categories from "below 5.0" to "above 8.5". The percentages reveal how genres like Documentary skew toward higher ratings, while Action films cluster in the lower ranges. Using D3 v7 with SVG rendering, the code builds the stacked layout via `d3.stack()`, scales positions with `d3.scaleLinear` and `d3.scaleBand`, applies a custom ordinal color scale, and implements interactive tooltips on mouseover to display exact percentage values for each rating segment.

Activity_6-Question-1.2

This horizontal bar chart shows the population of 20 countries in 2010, with each bar’s length representing total population and country names listed on the y-axis. The visualization uses React with D3 v5 scales (d3.scaleBand and d3.scaleLinear) to position bars and axes, rendering to SVG. Population values are loaded from a remote CSV file via d3.csv, formatted as billions using d3.format, and displayed with interactive tooltips via SVG `<title>` elements. The chart includes custom styled axis ticks and a labeled x-axis.

Activity_6-Question-1.1