anish6005@gmail.com

Activity 7_Q2

This area chart visualizes the number of matches played by cricketer MS Dhoni over time. The chart uses an x-axis for the year and a y-axis for the match count, with a smoothed, red-filled area beneath a black line. The visualization is built with D3 v5, using functions like `scaleLinear`, `scaleTime`, `axisBottom`, `axisLeft`, `line`, and `area` to render the SVG. Data is loaded from a remote CSV file containing yearly match statistics.

Activity 7_Q1

This visualization shows the box office collections of Prabhas films as a pie chart, with each slice labeled with its collection amount in millions and a legend listing film names. The dataset is loaded from a GitHub Gist using `d3.csv`. The chart is rendered with SVG paths generated by `d3.pie` and `d3.arc`, while `d3.scaleOrdinal` assigns colors from a predefined array. Labels and legend text are positioned using `arc.centroid` and fixed translations, with D3 v5 used throughout.

Activity6_Q4

A bubble chart displays foreign exchange rates for multiple countries across two years (2016 and 2017), using bubble size and color to encode the exchange rate values along a categorical x-axis and a linear y-axis. The D3 v7 application imports data from a CSV file, sorts it by rate, and renders an SVG with axes, labels, and interactive tooltips. It uses `d3.scalePoint`, `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.schemeCategory10` for positioning, sizing, and coloring, with mouse events (`mouseover`, `mousemove`, `mouseleave`) showing detailed tooltip information.

Activity6_Q4

This interactive bubble chart visualizes the relationship between healthcare spending (in USD) and life expectancy across several countries from 1970 to 1974. The visualization uses D3 v7 to render SVG circles, with bubble size proportionally mapped to spending values and color assigned per country via an ordinal scale with an interpolated Turbo colormap. A custom tooltip displays precise data on hover. The chart includes axis labels, bubble size legends, and a country color legend. Data is loaded from a local CSV file and rendered with animation-ready SVG elements.

Activity6_Task4

A bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for various car makes. Each circle's x-position represents horsepower, the y-position represents torque, and the circle's radius encodes highway MPG. Color distinguishes different makes, with a legend showing the MPG scale. The chart uses D3.js v7, employing `d3.scaleLinear` for axes and bubble size, `d3.scaleOrdinal` for color, and SVG rendering. Interactive tooltips display the car make on mouseover, updating position and visibility with D3 transitions.

Activity3_Q3

This interactive SVG scatter plot visualizes the palmer penguins dataset, plotting bill length on the x-axis against bill depth on the y-axis. Each point represents an individual penguin, color-coded by species (Adelie, Chinstrap, and Gentoo). The visualization uses `d3.csv` to load the data from a Gist URL, `d3.scaleLinear` for the axes, and `d3.axisLeft` and `d3.axisBottom` for chart ticks. The code also calculates flipper length and body mass for potential use, though only the two bill measurements are displayed.

Activity6_Task3.2

Activity6_Task3

This scatter plot visualizes the Iris dataset, showing petal length on the x-axis and petal width on the y-axis, with points colored by species (setosa, versicolor, virginica) using d3.scaleLinear. The SVG rendering uses d3.select, data joins with .join(), and axis components via d3.axisLeft and d3.axisBottom. Data loads asynchronously from a CSV file using d3.csv with custom row parsing, while axes are labeled with text elements.

Activity6_Task2_Q2

This stacked bar chart displays the distribution of movie ratings across five Prabhas films (Saaho, RadheShyam, Adipurush, Salaar, and Kalki2898AD), broken down by percentage ranges from 1.0-2.0 to 4.0-5.0. Each bar segment uses a distinct color from a categorical scale, with tooltips showing exact percentages on hover. The chart loads data from a CSV file using D3 v7, employs `d3.stack()` for stacking, `d3.scaleBand()` and `d3.scaleLinear()` for axes, and renders as SVG with an interactive legend.

Activity6_Task2

A divergent stacked bar chart shows the distribution of IMDb ratings by genre, with each bar divided into five rating percentage categories from below 5.0 to above 8.5. The visualization uses D3.js version 7 via UNPKG, loading data from a CSV file. It employs `d3.stack()` for the stacked bar layout, `d3.scaleBand()` for the y-axis, `d3.scaleLinear()` for the x-axis, and `d3.scaleOrdinal()` with a custom color palette. Mouseover interactions trigger tooltips displaying the exact percentage for each rating category.

Activity6_Task1_Q2

This bar chart displays the population of 20 countries in 2010, sorted by country name along the y-axis with population values extending horizontally. Built with React and D3.v5, it loads CSV data from a GitHub repository, uses scaleBand for categorical positioning and scaleLinear for the numeric axis, and renders SVG rectangles with hover tooltips showing formatted population values.

Activity6_Task1_Q1

This example displays a horizontal bar chart ranking the populations of ten countries for the year 2000, using a green fill. The visualization is rendered in SVG through a React component that imports D3 v5 functions for scaling, formatting, and CSV data handling. The chart uses `d3.scaleBand` for the y-axis categories, `d3.scaleLinear` for the x-axis population values, and `d3.format` to convert large numbers into a readable axis tick format. Data is loaded from a GitHub-hosted CSV file and limited to the top ten rows.

Activity 6_Task 1

This example displays a horizontal bar chart of the 2020 populations for the top 30 countries, as ranked by a UN population dataset. The visualization uses React and D3 v5 to render SVG elements, with axes and bars built from custom components. The code imports d3 utilities like `scaleBand`, `scaleLinear`, `max`, and `format` to calculate scales and format tick labels, while a `useData` hook loads the CSV data. Each bar includes a tooltip showing the population value.

Activity 6

This example demonstrates how to combine D3.js with ES6 modules in a VizHub project. It uses the D3 `select` function to target a div element and update its text content with a message imported from a local module. The code imports `selection` methods from the D3 library via UNPKG and uses a custom `myMessage.js` module to supply the string. The page renders a simple, centered text display styled with CSS, showing basic data-binding and modular JavaScript integration without any external data source.

Q3. 6 Buddhas

Six nearly identical Buddha silhouettes overlap in a vertical column, each rendered as a filled SVG path with different solid colors. The paths are drawn from a single hardcoded `d` attribute string, and the layering creates a dense, intertwined composition. The visualization is built with React, using `react` and `react-dom` to mount an SVG element that maps over a numeric array to generate random background rectangles. The page includes a flower-patterned background image and a title, with all SVG elements positioned and scaled via a `<g>` transform.

5 Buddhas

A dense field of randomly generated, semi-transparent polygons depicts an abstract, colorful backdrop against which a single detailed Buddha silhouette is drawn. The piece, rendered in SVG via React, uses a nested array mapping to create hundreds of coordinate-based shapes with randomized positions, colors, and rotations. A large, fixed SVG path defines the Buddha's intricate line art, which is transformed and scaled to overlap the chaotic background, visually contrasting the structured figure with the procedural noise.