RISHIK KURIKELLY

Assignment-2_Question-2

This area chart visualizes the relationship between age and weight using a green filled path. The data is loaded from a remote CSV file via `d3.text` and parsed with `d3.csvParse`, then sorted by age. The chart uses `d3.scaleLinear`, `d3.extent`, `d3.area`, `d3.axisBottom`, and `d3.axisLeft` to build the SVG rendering, with axes labeled "Age" and "Weight (kg)" and a title. The visualization employs a standard margin-based layout with a 600×400 SVG canvas.

Assignment-2_Question-1

Activity-6_Question-3

A scatter plot visualizes Test Cricket records, mapping matches played on the x-axis and total runs on the y-axis for individual players. Each circle is colored by the player’s country using `d3.scaleOrdinal` with `d3.schemeCategory10`, and the data is loaded from a remote CSV via `d3.csv`. The visualization uses `d3.scaleLinear`, `d3.extent`, `axisLeft`, and `axisBottom` to construct axes, with an SVG rendering driven by D3 v6 selections.

Activity-6_Question4

This bubble chart shows the correlation between GDP per capita, life expectancy, and population area ratio across 20 countries. Each circle’s position encodes GDP and life expectancy, while its size represents population density, with color distinguishing nations. A tooltip reveals exact values on hover. Built with D3 v7, it uses `d3.scaleLinear` for axes and bubble sizing, `d3.scaleOrdinal` with `d3.schemeCategory10` for colors, and SVG circles with mouse event handlers for interactivity. Data comes from `bubblechart.csv`, rendered with standard SVG elements and a categorical legend.

Activity-6_Question-4

This bubble chart visualizes the correlation between GDP per capita, life expectancy, and population area ratio across 20 countries. Each circle’s position encodes GDP per capita on the x-axis and life expectancy on the y-axis, while its size reflects population density. The code uses d3.csv to load data, d3.scaleLinear for axes and bubble sizing, and d3.scaleOrdinal with schemeCategory10 for country colors. Interactive tooltips appear on mouseover, and a legend is built with SVG circles and text labels.

Activity-6_Question-3

This scatter plot shows the relationship between sepal length and petal length for three iris species, with each species distinguished by a unique symbol shape and a corresponding legend. The visualization uses d3.scaleLinear for the x and y axes, d3.scaleOrdinal to map species to d3.symbolsFill shapes, and d3.axisLeft and d3.axisBottom for the axes. Data is loaded asynchronously from a CSV file and parsed with d3.csvParse, with the chart rendered using D3 v7’s data join pattern.

Activity-6_3.2

This example shows a scatter plot of sepal length versus petal length for the Iris dataset, with each of the three species encoded by a distinct shape. The visualization uses d3.scaleLinear for the axes, d3.scaleOrdinal and d3.symbol to generate shape-based marks, and includes a custom legend mapping species to symbols. Data is loaded asynchronously from a remote CSV file and parsed with d3.csvParse. The code is built with reusable modules for axes, scatter plot, and legend, all rendered in an SVG using D3 v7.

Activity-6_Question-2

This example visualizes the impact of movie genres on ratings using a stacked bar chart, where each genre (represented by vegetables in the data) is broken down into rating-level percentages that sum to 1. Hovering over any segment displays a tooltip with the precise percentage for that rating category. The chart is built with D3 v7, using `d3.stack()` to create stacked bars, `d3.scaleBand()` for the y-axis, and `d3.scaleLinear()` for the x-axis. User interactions are handled through `.on('mouseover')`, `.on('mousemove')`, and `.on('mouseout')` events, with data loaded from an embedded CSV.

Activity-6_QUESTION-1.2

Activity-6_QUESTION-1.1

This bar chart shows the 2000 population for the top 10 countries from a CSV file sourced from a GitHub repository. The visualization uses React with D3 v5 to render SVG elements, employing `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. Horizontal bars are colored light green, with a tooltip displaying the formatted population value. The x-axis labels use D3's `format` function to abbreviate large numbers, converting 'G' to 'B' for billions, while the y-axis lists country names.

Activity_6-Task4

Activity_6-Task4

This example displays a simple text message, demonstrating the foundational features of VizHub. It loads D3.js from a CDN and uses the `select` function to set the text content of a div element. The code also imports a local ES6 module, `myMessage.js`, to provide the string, and includes a regular expression and variable declaration to show basic JavaScript usage. The rendering approach is straightforward DOM manipulation via D3's selection API, with styling applied through an external CSS file.

Activity_6-Task-3.1

Activity_6-Task-2

This stacked bar chart shows the proportional distribution of IMDb ratings across six movie genres, with each genre’s full bar representing 100%. The visualization uses D3.js v7 to render SVG rectangles, with a color scale mapping five rating categories (from below 5.0 to above 8.5). Hovering over any segment triggers a tooltip displaying the exact percentage for that genre and rating level. The data is loaded from a CSV file, and the chart uses linear and band scales for axes.

6 Buddhas

Six Buddha silhouettes are drawn in overlapping, random positions across a 1000x1000 SVG canvas, each filled with a random RGB color and 0.8 opacity over a floral background image. The visualization uses React to generate nested array maps that create 30 coordinate steps, while native SVG `<path>` and `<g>` elements render the repeated Buddha shapes.

5 Buddhas