harshaps15@gmail.com

Task-9 Q2

Task-9 Q1

Task-9 Tutorial

Activity-6 Q4

Activity-6 Q3

Activity-6 Q3

This scatter plot displays the goals scored across different football leagues, with each circle representing a data point whose position is determined by its x and y values. The visualization uses a linear scale from d3 to map data extents to the plotting area, and renders circles with configurable radius, opacity, and color. The chart includes a background rectangle and axes with labels, built using d3's scaleLinear, extent, and the @curran/responsive-axes library's axes function. The code leverages d3's join operation for efficient SVG element updates.

Fork of Activity-6 Task3

This fork visualizes the classic Iris dataset as a scatter plot in an SVG canvas. It uses D3 v7 to map sepal length and width to x- and y-positions, with each of the three iris species distinguished by color. The code creates an 800x600 SVG element, reads the data from a linked source, and binds it to circles using standard D3 scales and selections. The rendering relies on `d3.scaleLinear` for axes and `d3.select` to append elements, with no interaction beyond the static plot.

Activity-6 Q2

Fork of Activity-6 Task2

This stacked bar chart illustrates the distribution of movie ratings across genres, revealing how genre impacts rating percentages. Hovering over a segment displays the exact percentage via a tooltip. Built with D3.js v7, the visualization computes stacked proportions from CSV data and renders the chart as SVG, using `d3.stack`, `d3.scaleBand`, and `d3.scaleOrdinal` for the color scale. The tooltip is a positioned HTML div.

Fork of Activity-6 Q1.2

This visualization shows a horizontal bar chart of 2020 populations for 20 countries, ordered by country name, with green bars and blue tick lines. The React app loads data from a CSV file via `d3.csv`, then uses `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis, rendering SVG rectangles with `<title>` tooltips. Axes are drawn with custom components, and tick labels use `d3.format` to abbreviate values (e.g., "B" for billions).

Activity-6 Q1.1

This chart shows the populations of ten countries in the year 2000, arranged as a horizontal bar chart with country names on the y-axis and population values on the x-axis. The visualization uses React to render SVG elements, with `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the quantitative x-axis. Population data is loaded and parsed from a CSV file via `d3.csv`, with values scaled and formatted using `d3.format` to display in billions. The bars display a native SVG tooltip showing the formatted population value on hover.

Activity-6 Task4

Activity-6 Task3.1

Activity-6 Task3

This scatter plot displays the Iris dataset, mapping petal length and width for each flower specimen. Points are colored by species—setosa in skyblue, versicolor in lightgreen, and virginica in orange—while the circle radii are proportionally set to sepal length and width values. Using d3.csv to load the raw CSV from GitHub, the visualization applies d3.scaleLinear for both axes, d3.axisLeft and d3.axisBottom for tick marks, and d3.select with data joins to render SVG circles. Axis labels indicate petal length and sepal length.

Activity-6 Task2

Activity-6 Task1

Activity-6 Task1

A horizontal bar chart displays the 2020 population estimates for the top 30 countries. The visualization uses React to render SVG elements, with D3 v5's `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and `csv` to load data from a remote gist. Bars are colored light green, with blue axis ticks and a labeled population axis.

Activity-6 Task1

This bar chart displays the 2020 population estimates for 30 countries, ordered by country name along the vertical axis and population magnitude along the horizontal axis. Built with React and D3 v5, the visualization uses SVG rectangles for the bars and custom axes. The `csv()` function loads the data, while `scaleBand()` and `scaleLinear()` map the categorical and continuous values. Hovering over a bar reveals a tooltip with the population formatted in billions via D3's `format()`.

tut1

This example shows a horizontal bar chart of the 2020 population for 30 countries, loaded from a CSV file via `d3.csv`. The chart uses `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the quantitative x-axis, with SVG rectangles for bars. The `d3.format` API formats tick labels, converting billions to a readable "B" suffix. Both axes are rendered in React, with the bottom axis using `xScale.ticks()` and the left axis iterating over the domain. The visualization, built with D3 v5, applies a green fill to bars and blue tick lines, and provides tooltips via `<title>` elements.

Five Buddhas

Five Buddhas visualizes twenty randomly generated polygons, each rotated and filled with vibrant, semi-transparent colors, layered atop a single, large Buddha silhouette. The composition is built from overlapping diamond shapes, creating a dense, kaleidoscopic effect against a black background. The Buddha path is repeated five times at different scales and positions, with the outermost shapes rendered in bright hues and the innermost in white, producing a glowing, radial focus. Built with React and SVG, the piece uses randomized coordinates and colors to generate a unique, almost algorithmic aesthetic while maintaining a meditative symmetry.