rahulsiddhartha123@outlook.com

Activity 6_Task 4

This interactive scatter plot visualizes the Iris dataset, mapping sepal length against petal length and using different point shapes to distinguish species. The D3 v7 visualization updates dynamically as data loads asynchronously. It employs D3's `scaleLinear`, `scaleOrdinal`, and `symbol` APIs to render the plot, alongside custom modules for axes and shape legends. The chart demonstrates reusable D3 pattern joins, fetch-based CSV loading via `csvParse`, and configurable margin and label options.

Activity 6_Task 4

This example demonstrates how to integrate D3.js within a web page to dynamically display text. It uses the `d3.select` API to target an HTML element and update its content with a message imported from a local ES6 module. The visualization loads D3 from UNPKG and shows a simple pattern for combining external libraries with modular JavaScript code. The rendered output is a centered greeting, styled via a linked CSS file.

Activity Task 3

This scatter plot visualizes the Iris dataset, displaying petal length and width on the x and y axes while coloring each point by species (setosa, versicolor, and virginica) using a custom color mapping. The visualization uses D3 v6 with SVG rendering, leveraging `d3.csv` for data loading, `scaleLinear` and `extent` for scaling, and `axisLeft` and `axisBottom` for axes. The circles also encode sepal dimensions through `rx` and `ry` attributes, though these appear non-standard for circle geometry. The graph is dynamically sized to the browser window.

Activity Task 2

This visualization displays the proportional ratings for different genres as horizontally stacked bars, using the classic Iris dataset. It maps the percentage composition of each genre across the data, with a legend indicating the rating categories. The code builds a stacked bar chart using `d3.stack()`, `d3.scaleBand()`, and `d3.scaleLinear()`, rendered as SVG. Interactive tooltips appear on mouseover, showing the exact percentage for each segment, and colors are assigned via `d3.scaleOrdinal()`.

Activity 6_Task 1 Question 2

This bar chart displays the 2010 populations of 30 countries, ranked from largest to smallest, using a horizontal layout. The visualization loads data from a CSV file hosted on GitHub and renders it with React and SVG. The implementation uses D3 v5 for data processing and scales, specifically `csv`, `scaleBand` for the y-axis, and `scaleLinear` for the x-axis, with custom components for axes and marks. Blue tick lines and light green bars are rendered, with tooltips showing formatted population values.

Activity 6_Task 1