Nitish Thotakura

Activity - 7 - Q1

This pie chart shows the sales figures for a set of books, with each slice labeled by its sales value in crores and accompanied by a color-coded legend. The visualization loads data from a GitHub-hosted CSV file using `d3.csv` and renders the chart with D3 v5's `pie` and `arc` generators. Slice colors are assigned via `d3.scaleOrdinal`, and the final SVG output places the chart and its legend within a 960 by 500 pixel canvas.

Apr 10, 2025

Activity6_Question - 4

This interactive bubble chart displays the correlation between processor speed, RAM, and battery life across various laptop models. Each circle’s position encodes processor speed (x-axis) and RAM (y-axis), while its radius represents battery life in hours, colored by brand. Users can hover over bubbles to view model names via a tooltip. The visualization uses D3 v7 with SVG elements, including axis scales, a bubble-size scale, and an ordinal color scale, alongside a legends for both bubble size and categorical colors. Data is loaded from a CSV file, with animations applied during mouse interactions.

Activity6_Task - 4

This interactive bubble chart visualizes the relationship between average horsepower, torque, and highway MPG across 31 car makes. Each circle’s position maps to horsepower and torque on the x and y axes, while its radius encodes highway MPG. Color distinguishes car brands, with an ordinal scale using d3.interpolateTurbo. Hovering reveals a tooltip displaying the make. The chart includes legends for bubble size and color categories, using SVG rendering with D3 v7 scales (d3.scaleLinear, d3.scaleOrdinal) and event handlers for interactivity.

Activity6_Question - 3

This scatter plot visualizes butterfly measurements, showing the relationship between antenna length and wing length for different species, with each species represented by a distinct shape symbol. The visualization uses D3 v7 with a module-based structure, employing `scaleLinear` for both axes and `scaleOrdinal` for mapping species to `symbolsFill` shapes. A custom shape legend displays the species categories, while the data is loaded from a CSV file hosted on GitHub and parsed using `csvParse`. Axis labels are generated through a reusable axes module.

Activity6_Task - 3.2

This visualization displays the Iris dataset as a scatter plot, mapping sepal length on the x-axis and petal length on the y-axis while using different symbol shapes to distinguish between iris species. The chart, built with D3 v7, uses `d3.scaleLinear` for both axes and `d3.scaleOrdinal` with `d3.symbolsFill` to encode species as shapes. A custom legend generated via `d3.symbol` shows which shape corresponds to each species. Data is loaded asynchronously from a GitHub CSV file and parsed with `d3.csvParse`.

Activity6_Task - 3.1

This interactive scatter plot visualizes the Iris dataset, mapping petal length and width to the x and y axes while encoding species identity through point color (setosa in skyblue, versicolor in lightgreen, and virginica in orange). Built with D3 v6 and rendered as SVG, the visualization downloads the CSV data directly from a GitHub repository and uses `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to construct scales and axes. The code calculates geometry dynamically based on the browser window size and applies distinct styling to axis labels, which are rotated and colored green.

Activity6_Question - 2

A horizontal stacked bar chart displays global smartphone market share across six countries, with each bar segmented by manufacturer (Apple, Samsung, Xiaomi, Oppo, Vivo, Others) and encoded in color via `d3.scaleOrdinal`. Built with d3.v7 and SVG, the visualization uses `d3.stack()` to compute cumulative segment positions, `d3.scaleLinear` for the share axis, and `d3.scaleBand` for country grouping. Interactive tooltips, styled in CSS, reveal precise percentages on mouseover, while the data originates from the embedded `data.csv` file.

Activity6_Task - 2

This stacked bar chart shows the distribution of IMDb movie ratings across six genres, with each bar divided into five rating ranges from below 5.0 to above 8.5. The chart uses d3.stack() to compute the stacked segments, d3.scaleBand() for the categorical genre axis, and d3.scaleLinear() for the percentage scale. A tooltip appears on mouseover to display the exact percentage for each rating segment. The data is loaded from a CSV file containing genre and rating proportion columns.

Activity6_Question - 1.2

A horizontal bar chart displays the population of 20 countries in 2010, using green bars with labeled axes and tick marks. The visualization loads CSV data from a GitHub repository via `d3.csv`, transforms the population values, and renders the chart as an SVG using React components. The `Marks`, `AxisBottom`, and `AxisLeft` components structure the bars and axes, with `d3.scaleBand` and `d3.scaleLinear` handling the scales and `d3.format` applying compact number formatting.

Activity6_Question - 1.1

This visualization displays the top 10 countries by year 2000 population as a horizontal bar chart. The chart uses React components to render SVG rects scaled by a linear population scale, with country names on a band scale. Data is loaded from a remote CSV using d3.csv and formatted with the d3.format function to abbreviate large numbers. The axes are built with custom React components that map d3.scaleLinear and d3.scaleBand outputs to SVG elements.

Activity6_Task - 1

A horizontal bar chart displays the 2010 populations of 30 countries, ordered by name along the y-axis, with bar lengths proportional to population values on a linear scale. React components render the SVG visualization, while d3 v5 utilities (`csv`, `scaleBand`, `scaleLinear`, `max`, `format`) load data from a GitHub-hosted CSV and compute scales and tick formatting, abbreviating large numbers with SI prefixes. The bars use CSS fill colors, and hover tooltips show formatted values via native SVG `<title>` elements.