sindhuja27b@gmail.com

Q3

This choropleth map visualizes the distribution of salaries by country, using a blue color scale to indicate aggregated mean salary values. The map renders geographic boundaries from a GeoJSON file ("world_map.geojson") onto an SVG canvas. It loads salary data from a hardcoded array, aggregates entries via `d3.rollups` and `d3.mean`, and colors each country path with a sequential interpolator (`d3.interpolateBlues`). Countries without matching salary data appear gray. The visualization relies on `d3.geoPath` for path generation and D3's `d3.json` loader to fetch the map data.

q2

This visualization shows the progression of total COVID-19 cases over time for Afghanistan, with a blue area chart and individual data points that reveal exact values on hover. The y-axis starts at 100 to emphasize the exponential growth curve. Built with D3 v7, it uses `d3.area` for the filled region, `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.axisBottom` with rotated date labels. Tooltips appear via mouseover events, while SVG circles mark each reported case count from the supplied `data.csv` file.

Fork

This visualization displays the total annual rainfall in India from 1960 to 2017 as an area chart, with a hover tooltip revealing the exact value for each year. The chart uses D3.js v7 to load CSV data, aggregate rainfall by year across all states, and render the area with d3.area. The x-axis (year) is linear, and the y-axis (rainfall in mm) is scaled to the maximum aggregate. An interactive overlay rect captures mouse movements, using d3.bisector to locate the nearest year and display a tooltip and hover point.

Q1

This bar chart displays the average salary for various job titles, using data loaded from a remote CSV file. The visualization renders as an SVG with colored bars, a rotated x-axis for readability, and hover tooltips that reveal exact salary values. The code employs D3 v7 APIs including `d3.csv`, `d3.rollup`, `d3.mean`, `d3.scaleBand`, and `d3.scaleLinear`. Each bar is colored via a categorical ordinal scale, and mouse events trigger tooltip transitions to provide interactive feedback.

Fork of barChart

This visualization displays rice production across Indian states using a bar chart, where each bar represents the total production for a state with a unique color. The chart loads data from a CSV file via `d3.csv`, and uses `d3.rollup` to aggregate production values by state. Hovering over a bar reveals a tooltip showing the state name and its total production, with rounded values to two decimal places. The visualization uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.scaleOrdinal` with `d3.schemeCategory10` for bar colors, with axes labeled and rotated via `d3.axisBottom`.

T1

This pie chart visualizes the proportional distribution of entry-level, mid-level, and senior-level data professionals across geographic locations, based on aggregated salary and COVID-19 population density data. The chart aggregates population density values from `covid.csv` for each location, then uses `d3.csv` to load and `d3.group` to organize the data. Using `d3.pie` and `d3.arc`, the visualization renders SVG arcs with `d3.schemeCategory10` for color encoding, placing location labels at each arc’s centroid via `arc.centroid()`.

2

A monthly temperature area chart compares values across months using an SVG rendering with D3 v7. The visualization reads CSV data via `d3.csv` and maps months to a band scale with `d3.scaleBand`, while temperatures are scaled linearly. An area generator (`d3.area`) fills the region beneath the temperature curve in steel blue, and red circles mark each data point. Hovering over a circle triggers a mouseover event that displays a tooltip showing the month and exact temperature in degrees Celsius.

1

This example shows a pie chart of country populations, with each slice labeled by country name and a legend mapping colors to countries. Hovering over a slice’s label displays a tooltip with the population (formatted with commas) and literacy rate. Built with D3 v7, the visualization uses `d3.pie()` and `d3.arc()` to generate SVG paths, while data is loaded via `d3.csv()` from a GitHub gist. The tooltip is manually shown and hidden through D3 selection and style updates, and colors come from `d3.schemeSet3`.

Q4

This bubble chart uses D3 v7 to visualize sales data from a CSV file, plotting each product’s Revenue on the x-axis and Units Sold on the y-axis. Each circle is sized at a fixed radius and colored with `d3.scaleOrdinal` and `d3.schemeCategory10`. Hovering reveals a tooltip with product details, implemented via mouseover and mouseout events. The SVG is rendered with `d3.select` and `d3.append`, and axes are generated using `d3.axisBottom` and `d3.axisLeft`. The data is loaded with `d3.csv`.

Q2

This stacked bar chart displays the distribution of five technology job roles across four experience levels (Entry Level, Intermediate, Senior, and Expert). The chart uses d3.stack() to calculate cumulative segment heights and d3.scaleOrdinal with the d3.schemeCategory10 palette for color encoding categories. d3.axisBottom and d3.axisLeft generate the axes, while the SVG rectangles respond to mouseover events to trigger a custom tooltip, loaded from a local data.csv file.

Q3

A scatter plot maps book reviews against price for the BestSellers dataset, with each point colored blue or green to distinguish Fiction from Non Fiction genres. The visualization loads CSV data via `d3.csvParse`, scales axes with `d3.scaleLinear`, and renders circles in an SVG. It uses `d3.axisBottom` and `d3.axisLeft` for labeled axes, while an ordinal `d3.scaleOrdinal` assigns genre colors and a custom legend displays the two categories.

Activity6_Task3.1

This scatter plot visualizes the Iris dataset, mapping petal length and width for each flower sample. Circles are colored by species—sky blue for setosa, light green for versicolor, and orange for virginica—revealing distinct clusters. The example loads data from a remote CSV file using the `d3.csv` function, then renders the chart as an SVG. It uses `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to create the scales and axes, with the `select` and `join` pattern to bind data to circle elements.

Activity6_Task2

A stacked horizontal bar chart displays the distribution of IMDb ratings across six film genres, with each bar broken into five rating brackets from below 5.0 to above 8.5. The visualization uses D3 v7’s `d3.stack()` to compute stacked segments, `d3.scaleOrdinal` for color encoding, and `d3.scaleBand` for the categorical axis. Hovering over a segment triggers a tooltip showing the exact percentage for that genre and rating range. Data comes from the included CSV file and renders as SVG with custom styling.

Activitty6_Task4

Task3.2

This interactive scatter plot displays the relationship between sepal length and petal length for three iris species, distinguishing each species with a distinct symbol shape and a legend. The visualization uses D3 v7 scales, axes, and reusable chart modules, with the scatterPlot component rendering SVG path marks via d3.symbol. The axis and legend components are composed using D3’s selection joins and call syntax. Data loads asynchronously from a remote CSV file, parsed with d3.csvParse, and scales are computed from extents using d3.scaleLinear and d3.scaleOrdinal.

Activity6_Task3.2

Q2

A horizontal stacked bar chart displays age-group categories (0–10 through 41–50) in a CSV, with each bar divided into four colored segments representing Category1 through Category4. The chart uses D3 v7’s `scaleBand` for vertical positioning, `scaleLinear` for the value axis, and `stack()` to compute segment offsets, with `axisBottom` and `axisLeft` for axes. SVG rectangles render each segment, and mouseover events show tooltip values via `d3.select`. A legend identifies the four category colors.

Q1.2

Q1.1

activity 6_Task 1

This example shows a horizontal bar chart ranking 30 countries by their 2020 population, using a dataset loaded from a GitHub-hosted CSV file. React manages the component state, while D3 v5 provides the `scaleBand` and `scaleLinear` functions for positioning bars and axes, and the `format` helper for abbreviating tick labels (e.g., converting “G” to “B”). The SVG is rendered with reusable axis and mark components, each bar displaying a native tooltip via the `<title>` element. The visual design uses green bars, blue axis lines, and a Poppins font.

6 Bhuddhas (Q2)

Six overlapping Buddha silhouette paths repeat in a vertical composition, each rendered with a distinct solid color and white outline. The React application maps an array of coordinates to produce scaled and translated SVG `<path>` elements, using the same source path data for all six figures. The visualization is drawn with SVG inside a React component, against a background image of flowers, with hardcoded path geometry defining the Buddha shapes.

6 Bhuddhas

Six Buddhas overlap in a black field, each rendered as a dense network of translucent, colored circles generated through repeated `Array.map` iterations with random positioning and RGB fill values. The composition layers these geometric noise patterns over a single large SVG path drawing of a Buddha figure, which is transformed and scaled using SVG group attributes. Built with React and ReactDOM, the visualization combines procedural circle generation with static path data under an MIT license via a bundled JavaScript bundle.

5 Bhuddhas

5 Buddhas visualizes a series of five overlapping geometric Buddha-like forms composed of translucent polygons. Each polygon is generated procedurally from a fixed coordinate array, with its position, fill color, and rotation angle derived from pseudo-random calculations, producing a vibrant, chaotic layering of shapes. Rendered in SVG via React, the work uses translucent, neon-bright fills on a black background to create a dense, mandala-like composition. The polygons are drawn programmatically with nested loops, while the central Buddha figure is defined by an SVG path, integrating generative and structured elements in a single visual space.