aashrithas2000@gmail.com

expenditure

This visualization shows monthly grocery expenditure, plotting price against month using a filled area chart with a smooth curved baseline. The SVG rendering uses D3 v6 scales, including `scalePoint` for the month axis and `scaleLinear` for price, with axes generated via `axisBottom` and `axisLeft`. The area path is created with the D3 `area` generator and `curveBasis` interpolation, while data loads from a CSV hosted on GitHub. Axis labels and a title annotate the chart, with grid lines drawn from tick sizes.

Fork of ICE7 Areachart

This example shows monthly sales data as a smooth area chart, with a line tracing sales values across months and a shaded region beneath it. The SVG rendering uses D3 v5's `scalePoint` and `scaleLinear` for axes, `area` with `curveBasis` for the smoothed path, and `axisLeft` and `axisBottom` for labeled ticks. Data comes from a CSV of order records, aggregated by month, loaded via `d3.csv`. The chart includes gridlines, rotated y-axis label, and a centered title.

T9 & 10 Q1

This pie chart shows the distribution of car accidents across US states, using a color-coded slice for each state with accident counts formatted in thousands. The visualization includes labeled slices with values and a legend listing each state alongside its corresponding accident total. Built with D3 v5, the code fetches CSV data from a GitHub gist, uses the `pie` and `arc` generators to create the chart, and applies a `scaleOrdinal` color scale to differentiate states. The SVG rendering includes interactive legend elements and centered labels positioned via arc centroids.

T9& 10 Q1

This pie chart visualizes shopping category data by state, showing the proportional value of each category. The chart uses D3 v7’s `pie` and `arc` generators to create slices, with a categorical color scale distinguishing sections. Labels display scaled values in thousands, and a legend lists states with corresponding colors and totals. The data is loaded from a GitHub-hosted CSV file using `d3.csv`, while `scaleOrdinal` and `format` handle color mapping and axis tick formatting. The visualization is centered in an SVG container with fixed dimensions, and the legend is positioned separately to the right.

Task 9 & 10

This animated scatter plot cycles through four iris flower measurements (petal width, sepal width, petal length, and sepal length) on the x-axis, with sepal length on the y-axis, using D3.js and the Iris dataset. Each species is distinguished by color (skyblue, lightgreen, orange) with a legend. The visualization uses D3 scales and axes, with a setInterval timer updating the x-value mapping, while SVG circles are drawn and re-rendered dynamically. Axes and labels are generated using D3's axisLeft and axisBottom.

Task 9 & 10

Agriculture

This visualization dashboard displays pollution trends across Indian states using two complementary chart types. A line chart tracks pollutant concentrations (SO2, NO2, RSPM, SPM, PM2.5) over time for a user-selected state via an interactive dropdown menu. Four bar charts compare average pollutant levels across all states. The D3.js code (v6) uses d3.csv to load data, d3.rollups for aggregations, d3.scaleOrdinal with d3.schemeCategory10 for coloring, and d3.axisBottom/axisLeft for scales, rendering all charts as SVG elements.

Fork of Activity-6 t2 Q3

Activity6_Q4

Activity6_Q4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes. Each circle’s position encodes horsepower (x-axis) and torque (y-axis), while radius maps to highway MPG and color distinguishes vehicle brands. The visualization uses d3.csv to load data, d3.scaleLinear for axes and sizing, d3.scaleOrdinal with d3.interpolateTurbo for color assignment, and includes interactive tooltips on mouseover. Static SVG rendering with an animated hover effect highlights individual data points, with legends for both MPG and make categories.

Activity6_T4

This interactive bubble chart visualizes the correlation between average horsepower (x-axis), average torque (y-axis), and highway MPG (bubble size) for various car makes. Using D3.js v7, it renders SVG circles with color-coded makes and provides tooltips on hover showing the make name. The visualization includes axis labels, a legend for the MPG bubble size scale, and a categorical color legend. Data is loaded from a CSV file and rendered with SVG primitives, with transitions used for tooltip opacity.

Fork of Activity6_Q3

This interactive scatter plot visualizes the relationship between horsepower and torque for various car models, using distinct D3 symbols to differentiate vehicle makes. The visualization employs scales from d3.scale, including scaleLinear for axes and scaleOrdinal with symbolsFill to map makes to shapes. Data is loaded asynchronously via d3.csvParse from a GitHub-hosted dataset, with axes and a custom shape legend rendered through modular functions. The chart updates dynamically when new data arrives, displaying a color-coded legend for categorical identification.

Activity6_t3.2

This scatter plot visualizes the Iris dataset, mapping sepal length on the x-axis and petal length on the y-axis while using different symbols to distinguish between species. The D3.js v7 code constructs the visualization using `scaleLinear` for axes, `scaleOrdinal` with `symbolsFill` for shape encoding, and a custom shape legend. Data is loaded asynchronously from a CSV file hosted on GitHub, with axes and labels configured through custom functions.

Activity6_Tutorial 3.2

This scatter plot visualizes the Iris dataset, mapping petal length and petal width for individual flowers while coloring each point by species. It uses D3 v6 APIs including `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load data, create scales, and render SVG axes and circles. The chart encodes only petal dimensions spatially, with a static categorical color scheme for species.

Activity6_Tutorial 3

This scatter plot visualizes the Iris dataset, mapping petal length and width for sepal length and width, with points colored by species (setosa, versicolor, and virginica) using skyblue, lightgreen, and orange. The visualization uses D3 v6 (d3.csv, d3.scaleLinear, d3.extent, d3.axisLeft, d3.axisBottom) to load the CSV from a GitHub repository, compute scales, and render SVG circles. Axis labels are added via SVG text elements, and the plot resizes to the full window dimensions.

Activity-6 t2

A stacked horizontal bar chart shows the distribution of IMDb movie ratings across six genres, using percentage categories from below 5.0 to above 8.5. The visualization encodes each genre as a row of segmented bars, colored by rating bucket via `d3.scaleOrdinal`, with a tooltip displaying exact percentages on hover. Data from a CSV is processed with `d3.stack` and rendered as SVG rectangles scaled by `d3.scaleLinear` and `d3.scaleBand`, with axes generated by `d3.axisBottom` and `d3.axisLeft`.

Activity6_data_vis Q1.2

This bar chart displays the population of 20 countries for the year 2010, with each country listed on the y-axis and the population value extending horizontally. The visualization uses React with SVG rendering, leveraging D3’s `scaleBand` for the categorical y-axis and `scaleLinear` for the x-axis. A custom tooltip, provided by the `<title>` element, shows the formatted value on hover. Data is loaded from a CSV file using D3’s `csv` function, and axis tick formatting converts large numbers to billions using D3’s `format`.

Fork of Activity6_data_vis Q1.1

A horizontal bar chart displays population figures for ten countries in the year 2000, using green bars with blue axis ticks and tooltips showing formatted values. The visualization is built with React and D3 v5, using `scaleBand` for the categorical country axis and `scaleLinear` for the numeric population scale. Data is loaded asynchronously from a CSV file via `d3.csv`, with population values multiplied by 1000 during preprocessing. SVG rendering handles the marks and axes, with tick formatting converting values into billions using D3's `format` function.

Activity6_data_vis

This example displays the populations of 30 countries for 2020 as a horizontal bar chart, with countries ordered along the y-axis and population values plotted along a linear x-axis. The visualization uses React to render SVG elements, with D3 v5 scales (scaleBand and scaleLinear) computing positions, while custom AxisBottom and AxisLeft components generate the tick marks and labels. Population values are formatted using D3's format function and the data is loaded from a remote CSV file via d3.csv.

Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

A colorful Buddha silhouette emerges from a dense field of overlapping, randomly rotated polygons. The React application renders an SVG scene where a nested triple loop generates over 8,000 small shapes with randomized positions, colors, and opacity over a black background. The central Buddha path is drawn using an SVG `path` element with a fixed black fill, while the polygon layers are created dynamically using JavaScript `Math.random` calls within the React component. The visualization combines generative art with a pre-defined iconographic shape.

Fork of 5 Buddhas

A grid of hundreds of semi-transparent, randomly colored, rotated square polygons is generated procedurally and layered beneath a large, overlapping Buddha silhouette. Built with React and rendered as SVG, the visualization uses nested `map` operations to create the polygon field with random coordinates, fill colors, and rotations. The Buddha shape is drawn from a single complex SVG `path` with numerous Bézier curve commands, and the entire figure is transformed and scaled via a `g` element. The index.html title references a series of forked Buddha examples, and the code includes unused mathematical functions and arrays.