haripadmavathim2023@gmail.com

Activity-8_Question-1.1

This example displays a horizontal bar chart showing population figures for ten countries in the year 2000. The visualization uses React with D3 v5’s `scaleBand` and `scaleLinear` to map country names and population values to the SVG canvas. Bars are rendered as `rect` elements with tooltips, while axes are built from D3’s `format` utility to abbreviate large numbers (e.g., converting gigabytes to billions). Data loads asynchronously from a CSV file via D3’s `csv` function, and the chart includes custom axis styling with blue tick lines and green marks.

Activity-9_Question-2

This example shows an area chart of temperature over time, with a filled region beneath a line that maps date to temperature readings. The visualization uses D3 v5 to load a CSV dataset from a gist, parse dates with `d3.timeParse`, and create the chart with `d3.area` and `d3.scaleTime`/`d3.scaleLinear`. It renders to an SVG via a `path` element, styled with a categorical color scheme, and includes labeled x- and y-axes using `d3.axisBottom` and `d3.axisLeft`. The data source is a remote CSV file, and the chart displays the unlabeled series with a single filled area.

Activity-9_Question-1

Activity_9_Task-1

Fork of Reusable Scatter plot Activity 8

This interactive scatter plot explores the Iris dataset, cycling through four flower measurements as the x-axis while keeping sepal length on the y-axis. Animated via `setInterval`, the chart updates its axes and data points accordingly. Built with D3 v6, it uses `scaleLinear`, `axisLeft`, and `axisBottom` for scales and axes, with circles colored by species—skyblue, lightgreen, and orange for setosa, versicolor, and virginica. A legend and rotating axis labels clarify the current variable, and the SVG renders all marks.

Activity-9_Task-1

Activity-9_Task-1

Activity-8_Question-1.2

Activity-8_Question-4

This scatterplot visualizes the relationship between total reported alcohol and tobacco use across U.S. states, where each bubble’s size represents the population of adults aged 26 and older. The color intensity reflects the rate of alcohol use per 1,000 people, with tooltips providing exact values. Built with D3 v7, the chart uses `d3.scaleLinear` for position, radius, and color encoding, along with `d3.axisBottom` and `d3.axisLeft` for axes. Data comes from a CSV hosted on GitHub, rendered as SVG circles over linear-scaled axes with custom legends.

Activity-8_Task-4

Activity-8_Question-3

Activity-8_Task-3.2

A scatter plot displays sepal length against petal length for the Iris dataset, with each point's shape encoding the flower species. The visualization uses D3 v7 with a linear scale for both axes and an ordinal scale mapping species to distinct symbols. Points are rendered as SVG paths using the `symbol` generator, while a custom legend communicates the shape-species mapping. Data is loaded from a remote CSV and parsed with `d3.csvParse`. The plot includes axis labels and relies on reusable `axes` and `shapeLegend` modules, with axes drawn via `d3.axisLeft` and `d3.axisBottom`.

Activity-8_Task-3

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis and petal width on the y-axis. Each circle’s fill color distinguishes the three iris species using a switch statement. The chart uses D3 v6’s `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` functions. Data is loaded from a GitHub raw CSV, and circles are rendered with an SVG `circle` element, with axes and labels added to complete the visualization.

Activity-8_Question-2

Activity-8_Task-2

A stacked horizontal bar chart visualizes the distribution of IMDb ratings across six movie genres, dividing each genre's percentage into five rating categories from "below 5.0" to "above 8.5." The chart uses `d3.stack` to compose the segments and `d3.scaleBand` for the genre axis, with a linear scale for the percentage values. Rendered as SVG via D3 v7, it employs `d3.axisBottom` and `d3.axisLeft` for axes and includes interactive tooltips on mouseover that display the exact percentage for each segment. The data comes from a CSV file, and the styling uses custom fonts from Google Fonts.

Activity-8_Task - 1

5 Buddhas

This visualization renders five overlapping Buddha-like geometric forms composed of small rotated polygons, each generated from nested iterations over an array. The SVG is built with React, using semi-transparent, randomly colored diamonds positioned and rotated in a loose grid. Dark background and heavy layering create a dense, jewel-toned mandala effect, referencing Buddhist iconography through abstract, computational means.