yellahemalatha@gmail.com

multi line chart- d3

This multi-line chart visualizes changes in six continental populations—Africa, Asia, Europe, North America, Oceania, and South America—over time using data loaded from a remote CSV file via `d3.text`. The code renders six distinct colored lines using `d3.line` paths within an SVG, with each region assigned a unique stroke color. The chart uses `d3.scaleBand` for x-axis months and `d3.scaleLinear` for y-axis values, which is fixed between 1,000 and 3,600,000. Interactive circular markers, created with SVG `circle` elements, display tooltips on mouseover via `d3.select` and event listeners, showing the specific data values for each month. The visualization is built with React, utilizes D3.js version 7, and is rendered entirely as vector graphics.

line chart - d3

Assignment 2

This visualization presents a pie chart of the top 10 movies and their IMDb ratings, sourced from a CSV file. The chart uses distinct colors for each segment and includes a legend that pairs movie titles with their ratings. Built with D3 v5, the code uses `d3.csv`, `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate the SVG, with labels and a legend constructed from SVG `path` and `text` elements.

Area chart Assignment2

Area chart Assignment 2

Area chart assignment 2

Assignment 2

This example shows the distribution of IMDb ratings for a set of movies, presented as a pie chart with a separate legend listing each movie title and its corresponding rating. The chart uses D3.js v5 to load CSV data from a GitHub gist, bind it to SVG path segments via the `pie` and `arc` generators, and color-code slices using `scaleOrdinal`. Text labels, positioned with `arcGenerator.centroid`, display each value, while the legend renders rectangles and text elements. The data is parsed as numbers before rendering, and the visualization is sized to 960 by 500 pixels.

Assignment 2

This pie chart displays student details from a CSV file fetched via D3’s `csv` method, with slices colored by gender and labeled by occupation. It uses `d3.pie` and `d3.arc` to generate SVG paths, `scaleOrdinal` for color mapping, and includes a legend showing student names. The visualization is rendered in an SVG element with D3 v5, though the code references `d3.arc` in the bundle.

Activity6 Task_1

Activity 6

This example demonstrates how to set up a minimal VizHub project with D3.js, displaying the text "Hello VizHub!" centered on the page. The code imports the `select` function from D3 via UNPKG and a local ES6 module exporting a message string. It uses `select('#message').text(message)` to update the DOM, with styling applied through an external CSS file for large centered typography. The project illustrates basic module imports, D3 selection, and CSS integration in a single-page setup.

buddha5

A decorative Buddha silhouette is composed entirely of stacked SVG rectangles, each with randomized dimensions, rotation, position, color, and opacity. The shapes are generated through nested React array maps, creating a dense, overlapping mosaic effect against a green background. The visualization uses React to render SVG elements, with each rectangle's properties computed via JavaScript's `Math.random()` to produce a chaotic, colorful pattern that still preserves the recognizable Buddha form from the embedded SVG path data.

5 buddhas

Five overlapping Buddha silhouettes are rendered in a dark, vertically oriented SVG canvas. The image combines a precise, repeated line drawing of the Buddha form with a scattering of semi-transparent colored polygons generated from nested array mappings. The drawing is constructed using SVG `path` elements with complex cubic Bezier curves, while the random, colorful polygons are placed using computed `cx` and `cy` attributes based on mathematical operations, all built with React and ReactDOM.