siddhubhupathi@gmail.com

Assignment3.2

This example visualizes monthly average temperature variations from January to December using a smoothed area chart. It renders an SVG graphic with red-filled areas and styled axes, drawing data from a CSV file hosted on GitHub. The visualization is built with D3 v5, using functions like `scalePoint`, `scaleLinear`, `area`, `curveBasis`, `axisBottom`, and `axisLeft` to create scales, the area path, and labeled axes. Axis ticks and labels are styled via CSS classes applied in the SVG output.

Apr 13, 2024

Activity6_Question4

This bubble chart shows the correlation between horsepower, torque, and highway MPG across 18 motorcycle brands. Each circle represents a brand, positioned by horsepower (x-axis) and torque (y-axis), with bubble size encoding highway MPG and color distinguishing manufacturers. Built with D3 v7 and SVG, it uses d3.scaleLinear for axes and bubble size, d3.scaleOrdinal with interpolateTurbo for colors, and interactive tooltips on mouseover. A legend explains bubble size values and includes a color key for all makes. Data comes from bikes.csv.

Apr 6, 2024

Activity6_Task4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across car makes from the bubblechart.csv dataset. Each circle’s x-position encodes horsepower, y-position encodes torque, and radius encodes highway MPG, while color distinguishes car makes. Built with D3.js v7 and rendered as SVG, the chart includes animated mouseover tooltips using D3’s selection and event handling, plus a legend with circle sizes for MPG values and color swatches for each make. The code uses d3.scaleLinear, d3.scaleOrdinal, d3.axisBottom, and d3.axisLeft.

5 Buddhas

Five Buddhas shows a series of overlapping Buddha silhouettes rendered as green SVG polygons on a dark background. Built with React and ReactDOM, the visualization uses nested array maps to generate random polygon coordinates, fills, and rotations, creating a chaotic, layered composition. Each polygon is drawn with explicit points and a 45-degree transform, while the Buddha paths are translated and scaled SVG paths. The code also includes mathematical functions and an array used to control the number of repetitions.

Activity 5 - Question 3

This visualization shows a dense, colorful scatter of overlapping rectangular SVG elements arranged randomly, layered over a large Buddha silhouette drawn with an SVG path and set against a floral background photo. The React app renders nested maps that generate thousands of rectangles with random positions, colors, and opacity, creating a chaotic, abstract composition. The Buddha path is scaled and translated within an SVG group, while the page uses React 16.10 for rendering and inline SVG for all graphics.

5 Buddhas

Five Buddhas draws a series of overlapping, monochromatic Buddha silhouettes. The visualization generates a 21×21 grid of small semi-transparent circles, each positioned with random coordinates and colored via randomly generated RGB values. The main visual element is a complex SVG path defining the Buddha's outline, which is replicated in five distinct color-tinted variations through repeated use of the `<g>` transform with scaling and translation. The code uses React to render the SVG elements, with the path data and random circle generation handled directly in JavaScript.

Activity 6_Question3

This scatter plot displays the relationship between length and width for objects in a dataset, with shape encoding representing material type. The visualization loads CSV data via `fetch` and `csvParse`, then renders points using D3 v7’s `scaleLinear`, `scaleOrdinal`, and `symbol` API to generate distinct shapes. Axes are drawn with `axisLeft` and `axisBottom`, while a custom legend maps materials to symbols. The chart is responsive, sizing to the window dimensions, and was created by SiddharthaBhupathi.

Activity6_Question3

This scatter plot visualizes the relationship between weight and length across different object types, using D3 v7’s scaleLinear and scaleOrdinal to map continuous values and categorical shapes. Each point is rendered as a symbol (circle, square, or triangle) via the symbol API, with a custom shape legend built using join methods. The data is loaded asynchronously from a CSV file, and axes are generated with axisLeft and axisBottom.

Activity 6_Task3.2

This scatter plot visualizes the Iris dataset, comparing sepal length against petal length while encoding species with different symbol shapes. The visualization uses D3.js v7 scales to map data positions and a shape legend to identify three species categories. Axes are rendered using d3.axisBottom and d3.axisLeft, with data loaded asynchronously via fetch from a CSV source. The implementation employs selection joins to manage updates and renders symbols using d3.symbol with the symbolsFill array for shape variety.

Activity6_Task3.2

This scatter plot visualizes the Iris dataset, mapping sepal length on the x-axis against petal length on the y-axis, with each species distinguished by a different symbol shape. The visualization includes a legend for the symbolic encodings and axis labels. Built with D3 v7, the code uses d3.scaleLinear for coordinate mapping, d3.scaleOrdinal and d3.symbolsFill to assign shapes, and d3.symbol to generate the path data for each mark. Data is loaded asynchronously from a remote CSV file and parsed with d3.csvParse.

Activity6_Task3.2

This interactive scatter plot visualizes the Iris dataset, displaying sepal length against petal length with points colored by species. Built with D3 v7, it uses d3.scaleLinear for axes, d3.scaleOrdinal with d3.symbolsFill to map species to distinct shapes, and d3.axisLeft/axisBottom for tick marks. A custom legend, rendered using d3.symbol, identifies each species. Data loads asynchronously from a CSV file and is parsed with d3.csvParse, with the chart resizing to fill the viewport.

Activity_Task3

This scatter plot visualizes the Iris dataset, using petal length and width for the x- and y-axes while coloring each point by species (setosa, versicolor, virginica). The SVG rendering is built with D3 v6, using `d3.csv` to load data, `scaleLinear` for axes, and `axisLeft`/`axisBottom` for tick marks. Custom data parsing converts numeric fields, and circle radius is fixed while fill color maps species through a switch statement.

Activity 6_Question2

This stacked bar chart shows the proportion of students enrolled in five different programs—Engineering, Computer Science, Business, Liberal Arts, and Health Sciences—across five universities, with each bar segmented by program and colored via a categorical scale. The visualization uses D3 v7’s `d3.stack()` to compute the stacked segments, `d3.scaleBand()` for the university categories, and `d3.scaleLinear()` for the percentage axis. Hovering over a segment triggers a tooltip displaying the exact percentage for that program at that university, using D3 event handlers. Data comes from an embedded `data.csv` file, rendered as SVG with custom styles from `styles.css`.

Activity 6_Question2.1

This example displays the population distribution across age groups for each U.S. state using a stacked horizontal bar chart rendered as SVG. The viz loads a CSV dataset and maps five age categories to color-coded segments along the x-axis, with states ordered along the y-axis. It relies on d3.stack, d3.scaleOrdinal, d3.scaleLinear, and d3.scaleBand for data transformation and layout, while axes are generated with d3.axisBottom and d3.axisLeft. Labels are formatted as percentages using d3.format.

Activity 6_Task2

This stacked bar chart displays the distribution of IMDb ratings across six movie genres, with each genre represented as a horizontal bar divided into five rating range segments from below 5.0 to above 8.5. The visualization uses D3 v7’s `d3.stack()` and `d3.scaleBand()` to structure the data, with `d3.scaleOrdinal()` assigning colors to rating categories. Interactive tooltips reveal the exact percentage for each segment via mouse events, while axes and labels are rendered using `d3.axisBottom` and `d3.axisLeft`. The chart is drawn as an SVG element with data loaded from a CSV file.

Activity 6 _Task2

This stacked bar chart shows the distribution of IMDb ratings across six movie genres, with each bar divided into five rating categories from "below 5.0" to "above 8.5" using percentage values loaded from a CSV file. The visualization uses d3.stack() to compute the stacked segments, d3.scaleOrdinal() for color mapping, and d3.scaleBand() and d3.scaleLinear() for the axes. Interactive tooltips appear on mouseover, displaying the percentage for each specific rating category within a genre, while semi-transparent highlighting emphasizes the hovered segment. The SVG rendering employs D3 v7 with custom styles for typography and tooltip formatting.

Question 1.2

A horizontal bar chart displays the population of 20 countries in 2010, with bars sorted by country name and labeled along the left axis. The visualization uses React to render SVG elements, with D3’s `scaleBand` and `scaleLinear` for positioning, and custom `AxisBottom`, `AxisLeft`, and `Marks` components. Data is loaded via D3’s `csv` from a GitHub-hosted CSV file, and tick labels are formatted using D3’s `format`.

Question 1

This visualization displays the population of ten countries in 2000 as a horizontal bar chart, using a green fill for each bar. The React app loads data from a CSV file via `d3.csv` and maps country names to a `scaleBand` and population values to a `scaleLinear`. Axes are rendered with custom `AxisBottom` and `AxisLeft` components, and tooltips on each bar use `d3.format` to show abbreviated values.

Activity 6_Task 1

A horizontal bar chart displays the 2020 populations of 30 countries, sorted by country name along the y-axis, using a React and D3 v5 stack. The visualization imports `scaleBand` and `scaleLinear` from D3 to map country names and population values to SVG rectangles, with axes generated by custom `AxisBottom` and `AxisLeft` components. Data loads from a CSV via `d3.csv` and formats tick labels with `d3.format`. Hovering over a bar reveals its exact population through a native SVG `<title>` tooltip.