varmanithish5@gmail.com

Piechart_Q1

This pie chart displays the distribution of horsepower across car makes, including Scion, MINI, Kia, Honda, Ferrari, and Lamborghini. The visualization uses a D3.js (v5/v6.7) pie layout with an SVG rendering, assigning distinct colors from the `schemeCategory10` palette to each make. Tooltips reveal horsepower values, and a legend identifies car models, with data loaded via `d3.csv` from a remote GitHub URL and arcs generated through the `d3.pie` API.

Apr 13, 2024

Question1_A1

This pie chart visualizes the distribution of car horsepower across different makes, using D3 v7 to render SVG arcs and labels. The chart encodes horsepower values as arc sizes and colors each segment by car make, with a legend positioned to the right. Labels are placed along the arcs using `d3.arc`’s centroid method, and the data comes from an inline array of `{make, horsepower}` objects. A hover effect on the paths provides subtle interactive feedback.

Apr 13, 2024

Activity 6

This chart displays the population of ten countries in the year 2000 using horizontal bars, with a green bar for each nation and its population value shown on hover. Built with React and D3 v5, it uses a `scaleBand` for the categorical country axis and a `scaleLinear` for the numeric population axis, rendering SVG rectangles via the `Marks` component. The bottom axis applies D3’s `format` function to abbreviate large numbers (e.g., converting billions), while data is loaded asynchronously from a remote CSV file using D3’s `csv` function.

Activity6_Question4

This bubble chart visualizes the relationships between sepal length, sepal width, and petal length for three iris species. The x-axis represents sepal length, the y-axis represents sepal width, and the size of each bubble encodes petal length. Color distinguishes the species categories: setosa, versicolor, and virginica. The visualization uses d3.scaleLinear for both axes and bubble sizing, with d3.scaleOrdinal and d3.schemeSet2 for color mapping. d3.axisBottom and d3.axisLeft generate the axes. The chart loads data from a remote CSV file and renders circles as SVG elements with white strokes and 0.7 opacity.

Activity6_Tutorial4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes. It reads data from a CSV file using `d3.csv` and renders circles in an SVG, with axes and labels scaled by `d3.scaleLinear`. Bubble size encodes MPG, while color maps each make via a `d3.scaleOrdinal` using `d3.interpolateTurbo` for the spectrum. Interactive tooltips appear on mouseover, showing the make, with a legend for MPG values and make categories.

Activity6_Question3

This interactive scatter plot visualizes car performance by plotting horsepower on the x-axis against torque on the y-axis, with each circle’s size and color encoding highway MPG using d3.scaleSqrt and d3.scaleSequential with the Viridis interpolator. The d3.csv-loaded dataset from a GitHub repository (bubblechart.csv) is rendered as SVG circles, and hover interactions trigger a tooltip displaying the car make and MPG value. Axes are generated with d3.axisBottom and d3.axisLeft, while d3.event positions the tooltip during mouseover and mouseout transitions.

Activity6_Tutorial3.2

This example shows a scatter plot of the Iris dataset, mapping sepal length against petal length and using distinct symbol shapes to encode the species of each flower. A custom legend explains the shape-to-species mapping, with axes labeled accordingly. The visualization is built with D3 v7, using `scaleLinear` for the x and y positions and `scaleOrdinal` with `symbolsFill` for the categorical shapes. Data is loaded remotely as CSV and parsed with `csvParse`, while the chart, axes, and legend are composed from modular functions that manipulate SVG selections.

Activity6_Tutorial3.1

This example visualizes the Iris dataset with a scatter plot, mapping petal length and petal width on the x- and y-axes while coloring each point by species (setosa, versicolor, virginica). The SVG rendering uses D3 v6’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to position and label the axes, with circles sized at a fixed radius. Data is loaded asynchronously via `d3.csv` from a GitHub raw URL, and each mark’s fill color is assigned through a custom switch statement. Axis labels are added as SVG text elements with rotated and centered styling.

Activity_6_Task2_Q2

This stacked bar chart visualizes the distribution of horsepower, torque, and highway MPG across 31 car makes, using d3.stack with d3.scaleBand for the y-axis and d3.scaleLinear for the x-axis. Each bar segment represents one attribute, colored via d3.scaleOrdinal, and hover interactions display the precise attribute value in a tooltip. The SVG renders data from a local CSV, with axes, labels, and gridlines styled using D3’s axis methods and external fonts.

Activity_6_Task2

This stacked bar chart visualizes the percentage distribution of IMDb movie ratings across five genres, with each bar segment representing a rating level from below 5.0 to above 8.5. The chart reveals how genre influences ratings, showing that documentaries achieve higher percentages of top ratings while action films skew toward lower scores. Built with D3 v7 and rendered as SVG, the visualization uses `d3.stack()` to create the stacked segments and `d3.scaleOrdinal` for color encoding. Interactive tooltips appear on mouseover, displaying precise percentages for each rating level within a genre, calculated from the provided CSV data.

Fork of Activity 6

A horizontal bar chart displays the populations of twenty countries using data from a CSV file, with a linear scale for population values and a band scale for country names. D3 v5 utilities (`csv`, `scaleLinear`, `scaleBand`, `max`, `format`) handle data loading and scaling within a React component. The SVG bars include native tooltips via `<title>` elements, styled with blue tick lines and green bars.

6 Buddhas

The visualization displays six overlapping Buddha silhouettes, each rendered as an SVG path filled with semi-transparent, randomly generated RGB colors. The figures are positioned through a transform that scales and translates a single path definition, creating a layered, kaleidoscopic effect. The code uses React to generate a grid of 30 null elements with random positions and colors via `Math.random()`, while the Buddha path itself is drawn using SVG `<path>` data. A CSS background image of flowers provides a textured backdrop.

5 Buddhas

A grid of randomly generated, overlapping squares is rendered inside an SVG element, forming a kaleidoscopic pattern. The visualization uses React to map an array of values and generate multiple polygon elements with random coordinates, fill colors, and rotations. The code also includes a Buddha face path, scaled and translated over the geometric background. The rendering relies on React's DOM manipulation and SVG polygon and path elements.