Sahithi.R

Activity7_Q1

This pie chart visualizes deaths caused by air pollution across different countries, with each slice and legend entry color-coded and labeled with death counts in thousands. The code fetches data from a CSV file using d3.csv, then uses d3.pie and d3.arc to generate the chart’s segments, while d3.scaleOrdinal assigns colors to the categories. The SVG rendering includes slice labels positioned via arc.centroid and a separate legend showing country names and values.

Nov 7, 2024

Activity7_Task1

This animated scatter plot of the Iris dataset cycles through different feature pairs, showing how sepal and petal measurements cluster by species. It uses D3 version 6.7 to build the interactive SVG visualization, with a custom `scatterPlot` module that maps data to circles. Every few seconds, the animation updates the x-axis to display a different measurement column, while colored markers (skyblue, lightgreen, orange) distinguish species. The plot includes a legend, a rotating title, and axis labels generated via the `axisLeft` and `axisBottom` APIs, with data loaded from a remote CSV file.

Nov 6, 2024

Activity6_Q4

This interactive bubble chart visualizes sepal length, sepal width, and petal length for 150 iris flowers, with bubble size encoding petal length and color distinguishing three species. The visualization uses D3 v7 with linear scales for axes, an ordinal color scale, and CSV data loading from a GitHub repository. Hovering over a bubble triggers tooltips displaying species and measurement details, while the semi-transparent circles respond to mouse events for highlighting. The chart renders as SVG with fixed margins and axis labels for sepal dimensions in centimeters.

Activity6_Task4

This bubble chart displays the correlation between average horsepower, torque, and highway MPG for various car makes. Each circle represents a make, positioned by its horsepower (x-axis) and torque (y-axis), with radius encoding highway MPG and color distinguishing brands, using D3.js with linear scales. Hovering reveals a tooltip via mouseover events, while the legend explains the MPG bubble sizes and color-coded makes. The visualization reads from a CSV, uses SVG rendering, and applies the `d3.interpolateTurbo` color scheme.

Activity6_Q3

This scatter plot visualizes movie genres based on the percentage of ratings falling below 5.0 and above 8.5, with each genre represented by a colored point. The chart uses D3.js v7 to load CSV data from a GitHub repository, scales the axes with `d3.scaleLinear`, and colors points using `d3.scaleOrdinal` with `d3.schemeCategory10`. The visualization is rendered as SVG elements, with axis labels applied via `d3.axisBottom` and `d3.axisLeft`, and includes a legend generated from the color scale’s domain.

Activity6_Task3.2

A scatter plot visualizes iris flower measurements, encoding sepal length on the x-axis, petal length on the y-axis, and species as categorical shapes. The code loads the iris dataset from a remote CSV, parses it with `d3.csvParse`, and renders the chart using D3 v7. Axes, shape legends, and SVG marks are generated with `d3.axisLeft`, `d3.axisBottom`, `d3.scaleLinear`, and `d3.symbol`.

Activity6-Task3.1

This example displays a scatter plot of the Iris dataset, mapping petal length and width as the primary x and y coordinates while encoding species with distinct colors (skyblue, lightgreen, orange). It also overrides circle radii with sepal length and width values via `rx` and `ry`, creating elliptical points. The visualization uses D3 v6 APIs including `csv`, `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and SVG circle joins. Data is loaded from a remote CSV URL, and the chart is rendered to an SVG canvas with custom axis labels.

Activity6_Q2

This stacked bar chart compares car performance by manufacturer, breaking down horsepower, torque, and highway MPG into color-coded segments along a horizontal axis. It loads CSV data via D3 v7, uses `d3.stack()`, `d3.scaleBand()`, `d3.scaleLinear()`, and `d3.axisBottom()` to render SVG bars, and includes interactive tooltips on mouseover for metric values. A legend maps the three metrics to distinct colors.

Activity6_Task2

A stacked bar chart displays the percentage distribution of IMDb ratings across six movie genres, with each bar segmented into five rating intervals from "below 5.0" to "above 8.5". The visualization uses D3 v7's `d3.stack()` and `d3.scaleOrdinal()` for color encoding, with `d3.scaleBand()` for genre categories and `d3.scaleLinear()` for percentages. Interactive tooltips appear on mouseover, showing the exact percentage value via `d3.format('.2f')`. Data comes from an external CSV file, rendered as SVG within a 960×500 viewport.

Activity 6_Q1.2

This example displays a horizontal bar chart of the populations of the top 20 countries in 2010, using a green fill for each bar. It uses React to render an SVG, with D3 v5 utilities such as `scaleBand` and `scaleLinear` for chart scales, and custom components for the axes and marks. Population data is loaded via `d3.csv` from a GitHub-hosted CSV file, and tooltips show the formatted value with a custom SI formatter.

Activity 6_Task 1

A horizontal bar chart displays the populations of 30 countries in 2020, ranked by country name, with each bar's length proportional to its population value. The visualization loads CSV data from a GitHub repository and renders using React with SVG. D3 v5 APIs including `scaleBand`, `scaleLinear`, and `csv` handle data loading and scaling, while custom React components define the axes and marks. The chart features a blue axis line, green bars, and formatted tick labels that convert values into billions.

Activity 6_Q1.1

This example displays a horizontal bar chart of population data for ten countries from a CSV file, using green bars ordered by country name. It loads data via `d3.csv` and renders the visualization with React and SVG. The chart uses `scaleBand` for the y-axis, `scaleLinear` for the x-axis, and custom `AxisBottom`, `AxisLeft`, and `Marks` components to draw the bars and axes. Blue tick lines, formatted tick labels using `d3.format`, and a "POPULATION-2000" axis label are included.

Question3-6 Reflection Buddha

A field of randomly rotated and colored polygons animates across the screen, while a vector silhouette of a Buddha figure, rendered as an SVG path, is overlaid on a background image of flowers. The visualization uses React to generate the polygon grid and SVG for the path geometry, with the opacity set to zero for the polygons, and relies on the ReactDOM library for rendering.

Q3-Six Reflection Buddha

An organic cluster of colorful, semi-transparent polygons floats over a solid green field, while a large, ornate human silhouette rendered in red SVG path data is centered within the composition. The shapes are generated by iterating over an array of twenty integers, with each polygon’s position, fill color, and rotation determined by random values and cube calculations. The project uses React and ReactDOM to render the static SVG output, with the figure derived a complex `<path>` definition and the background set via CSS. The animation-like randomness opposes the static figure, creating a layered, mixed-media aesthetic.

5 Buddhas

Five glowing, multi-colored Buddha silhouettes overlap in a dark SVG canvas, each constructed from dense, vibrating outlines of paths and polygons. The composition uses a repeating pattern of randomized triangles anchored to a grid, layered with Buddha path data rendered in translucent, rainbow-like fills. Built with React and ReactDOM, the visualization leverages SVG primitives like `polygon`, `path`, and `g` with `transform` to generate organic, stacked forms. The code’s array-mapping approach creates a chaotic, generative texture beneath the central iconography.

Question3-6 Refelction Buddha

Six colorful triangles derive from a 20-value integer array, rendered via React and SVG polygons. Each polygon's position, size, and hue are generated using JavaScript's `Math.random()` with a 45-degree rotation. Amidst the noisy, randomized triangle field sits a detailed Buddha silhouette, drawn as a single SVG `<path>`, creating a bright, decorative contrast on the black background. The visualization uses the ReactDOM library to mount the component.

Question3-six reflection Buddha

This visualization displays six overlapping Buddha silhouettes rendered in a kaleidoscopic pattern. The piece uses randomly generated coordinates and color values to create a vibrant, abstract composition of repeated polygon shapes layered across the canvas. Built with React and rendered as SVG, the code maps over an array to generate hundreds of polygons with random positions, colors, and opacity values, while each Buddha path is transformed and scaled within the scene. The background is set to green with hidden overflow, and the visualization relies on React DOM for rendering the SVG elements.