aschowdary.shashi@gmail.com

Activity_7

This pie chart visualizes fruit category proportions loaded from a GitHub Gist CSV file, with each slice labeled and colored using d3.scaleOrdinal with d3.schemeSet3. The D3 v7 code loads the data via d3.csv, converts values to numbers, and generates arcs with d3.pie and d3.arc. A custom legend, built as HTML divs, displays each category’s color and percentage. The SVG rendering includes white category labels positioned at slice centroids.

Nov 7, 2024

Activity7

This visualization presents a pie chart illustrating the proportional distribution of fruit categories, with each slice labeled by its category name. The chart loads a CSV dataset from a GitHub repository, parsing the numeric values to generate the pie geometry. Using D3.js v7, the code defines the chart dimensions, creates an SVG container, and applies an ordinal color scheme for slice differentiation. A custom legend is appended to the page, using HTML divs to display each fruit category with its corresponding percentage value.

Nov 7, 2024

Question4

This bubble chart visualizes smartphone performance by mapping battery life on the x-axis, RAM on the y-axis, and screen size to bubble radius, with colors distinguishing brands. Hovering over a circle reveals a tooltip showing brand, battery life, and RAM. The visualization uses d3.csv to load data, d3.scaleLinear for positioning and sizing, d3.scaleOrdinal with d3.schemeCategory10 for colors, and d3.axisBottom and d3.axisLeft for axes. Data is rendered as SVG circles with mouseover, mousemove, and mouseleave event handlers managing tooltip transitions.

Oct 24, 2024

Question3

This scatter plot visualizes the relationship between horsepower and miles per gallon for a small set of car models, encoded as colored circles. Each point’s position maps horsepower on the x-axis and MPG on the y-axis, with a categorical color scale distinguishing individual vehicles. The visualization is built with D3 v6, using `d3.csv` to load data from `car1.csv`, `d3.scaleLinear` for axes, and `d3.axisBottom`/`d3.axisLeft` to render ticks. The SVG output includes labeled axes for horsepower and MPG, with a fixed 800×600 canvas.

Oct 24, 2024

Activity6_Task4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for various car makes. The plot positions each vehicle make by its horsepower on the x-axis and torque on the y-axis, while the size of each circle encodes the highway MPG value, and the color distinguishes the car brand. The visualization uses d3.scaleLinear for axes and bubble sizing, d3.scaleOrdinal for color mapping with interpolateTurbo, and d3.select for SVG rendering. It includes interactive tooltips on mouseover and a legend for bubble size and color categories, sourced from a local CSV file.

Activity6_Tutorial_3.2

This example presents a scatter plot of the Fisher Iris dataset, mapping sepal length to the x-axis and petal length to the y-axis, with each species distinguished by a unique fill symbol. The visualization includes labeled axes and a shape legend to identify species. Implemented with D3 v7, it uses `scaleLinear` and `scaleOrdinal` for scaling, `symbol()` for symbol generation, and custom modules for drawing axes and legend, fetching the data from a GitHub-hosted CSV file.

Fork of Fork of Activity6_Task3

This scatter plot visualizes the Iris dataset, showing petal length against petal width, with each point colored by species (setosa, versicolor, or virginica) via a simple switch function. The visualization uses d3.csv to load remote CSV data, then d3.scaleLinear with extent domains to map values to screen coordinates, and d3.axisLeft and d3.axisBottom for labeled axes. Circles are rendered as SVG elements with fixed radius via d3.selectAll().join(), while sepal length and width are stored as unused data fields. The plot fills the browser viewport, with green axis titles rotated vertically for the y-axis.

Fork of Activity6_TAsk3

This example demonstrates how to combine D3.js with ES6 modules in a minimal VizHub setup. It uses the D3 `select` function to target a `#message` div and update its text content with a string exported from a local module. The page loads D3 from UNPKG, while the main script imports both D3 utilities and a custom `message` function from a separate JavaScript file. The rendering approach is straightforward DOM manipulation, with a CSS stylesheet controlling the text alignment and size.

Activity6_TAsk3

This example demonstrates a minimal D3.js visualization that renders a text message centered on the page. It shows how to compose a D3-based web application using ES6 module imports, including importing the `select` function from D3 and a custom exported `message` constant from a local module. The code uses `select('#message').text(message)` to set the DOM element’s content, with styling applied via an external CSS file. The visualization is a static text display, serving as a template for integrating D3 with modern JavaScript module systems.

Question2

This stacked bar chart visualizes the distribution of customer ratings across five service categories, with each bar segmented into proportions from "poor" to "excellent." The chart uses a horizontal layout with a linear x-axis for percentages and a categorical y-axis for services. It is built with D3 v7, leveraging `d3.stack`, `d3.scaleLinear`, `d3.scaleBand`, `d3.scaleOrdinal`, and `d3.axisBottom` to render the SVG. Hovering over any segment reveals a tooltip displaying the exact percentage for that rating category.

Question2

This example demonstrates a minimal VizHub project that loads D3 via UNPKG and displays a static text message on a webpage. The code uses D3’s `select` method to target an HTML element and set its text content, while a local ES6 module (`myMessage.js`) supplies the string. The page’s styling comes from a CSS file, and the visualization’s primary purpose is to show how D3 and modular JavaScript integrate within the VizHub environment rather than presenting any data or dynamic chart.

Tutorial-2

A stacked horizontal bar chart displays the percentage of IMDb ratings across different movie genres, with each bar segmented by rating category and colored via a categorical scale. The visualization loads data from a CSV file and uses D3 v7's `d3.stack`, `d3.scaleBand`, `d3.scaleLinear`, and `d3.scaleOrdinal` to render SVG rectangles. An interactive tooltip, implemented with D3 event handlers, shows exact percentages on mouseover.

Oct 20, 2024

Activity6_Task2

This stacked bar chart shows how movie ratings are distributed across genres, with each bar representing the proportion of ratings falling into five categories from "below 5.0" to "above 8.5". Hovering over a segment reveals the exact percentage via a tooltip. The visualization uses d3.stack to compute the stacked segments, d3.scaleBand for the categorical y-axis, d3.scaleLinear for the percentage x-axis, and d3.axisBottom for ticks, rendering everything as SVG elements with a color-coded legend. The data comes from a CSV file containing genre and rating-level percentages.

Activity 6_Task 1

This bar chart displays the population of 20 countries in 2010, with countries listed on the y-axis and population values on the x-axis. The visualization uses React with D3 v5’s scaleBand for the categorical y-axis, scaleLinear for the numeric x-axis, and SVG rectangles for the bars. Data is loaded asynchronously via d3.csv from a GitHub-hosted CSV file, and tooltips appear on hover through native SVG title elements.

Fork of 6 Buddha

This example displays an SVG of a Buddha figure in green, layered over a floral background image. The visualization uses React and ReactDOM to render the SVG, with the background image embedded directly via an `<image>` element. The Buddha shape is drawn using a complex `path` element, and the code includes scaling and translation transformations to position the figure. A static array and a cubic function are also defined, though their output is not visualized.

6 Buddha

A single Buddha silhouette is rendered as a violet SVG path over a green floral background image. The path is drawn with a thick white stroke and filled with violet, creating a bold, outlined figure. The visualization uses React to render an SVG element, with the background image applied via CSS and also embedded as an SVG `<image>` element. The path data is a static, complex set of coordinates, and the example demonstrates layered SVG rendering with React.

6 Buddha

Six layered Buddha silhouettes overlap in a kaleidoscopic pattern, each rendered as an SVG polygon cluster with randomized points and rainbow fill colors. The composition sits atop a floral background image, creating a dense, psychedelic visual collage. Built with React and ReactDOM, the code generates triangular polygons through nested array maps, applying random coordinates, RGB values, and 45-degree rotations to each shape. The Buddha paths themselves are static SVG path data, transformed and scaled to create the repeating central motif.

Oct 18, 2024

Fork of 5 Buddhas

A five-buddha SVG composition renders overlapping polygon clusters on a black background, each shape generated from nested array maps and positioned through randomized calculations. The visualization uses React to manage the SVG elements, with ReactDOM rendering the component tree. The piece incorporates a large Buddha path traced using polygon point data, with each diamond-like shape rotated at 45 degrees and filled with randomized RGB color values derived from the Math.random() function.

Oct 17, 2024

Fork of 5 Buddhas

This visualization layers 125 overlapping polygon shapes generated from a nested React map across a 20-element array, each with randomized coordinates and translucent RGB fills. The SVG rendering uses React’s createElement pattern to produce a dense, chaotic field of small, semi-transparent polygons against a black background. Superimposed on this generative backdrop is a detailed Buddha figure drawn as a single SVG path, scaled and translated into the center, creating a stark contrast between algorithmic noise and structured line art. The code relies on React and ReactDOM for rendering.

Oct 12, 2024