jaideeptripurani12@gmail.com

question 2

This example shows a chart that uses an area path to compare average math scores between male and female students, with the D3 area generator mapping gender categories along the x-axis and score values along the y-axis. The visualization loads student performance data from a hosted CSV file, aggregates the math scores by gender using `d3.rollup`, and renders the result as an SVG area chart with labeled axes. The code applies D3 v7 scales, axes, and generators like `d3.area`, `scaleBand`, and `scaleLinear` to construct the figure.

question 2

This example displays an area chart of temperature values across multiple cities using D3 v7. The chart renders as an SVG and fetches CSV data from a GitHub Gist, which it parses with d3.csvParse. It uses d3.scaleBand for the x-axis, d3.scaleLinear for the y-axis, and defines the area with d3.area. The visualization includes rotated x-axis labels, y-axis title, and axis labels for temperature and cities.

Scatter plot Activity 8

question1

A pie chart displays the distribution of film genres from a Movie-Rating CSV dataset, with each genre’s count calculated via `d3.rollup` and rendered using the `d3.pie` and `d3.arc` generators. An ordinal `d3.scaleOrdinal` with `d3.schemeCategory10` colors the arcs, and labels are positioned using `arc.centroid`. A legend is appended manually, while the SVG is sized at 960 by 500 pixels using D3 v7.

2nd visual

2nd

3rd

This visualization shows the cumulative number of COVID-19 vaccinations in the United States over time, plotted as a green line with individual data points. It uses D3 v7 to load a CSV dataset from GitHub, parse dates, and render an SVG chart with time and linear scales. Tooltips appear on mouseover via D3 event handlers, displaying the exact date and vaccination count, while rotating x-axis labels and axis generators like `d3.axisBottom` and `d3.axisLeft` structure the timeline.

1st

Question 2

A horizontal bar chart displays population change for ten countries from 1950 to 2020, with each row representing a year and bar length scaled to population. The chart uses D3 v7’s `scaleBand` for the year axis, `scaleLinear` for population, and `scaleOrdinal` with `schemeCategory10` for country colors. Interactive tooltips appear on mouseover, showing the exact year and population value. Data comes from a local CSV file loaded and parsed by D3.

question 4

question 3

A scatter plot visualizes car dataset attributes, plotting horsepower on the x-axis against highway MPG on the y-axis, with each point colored by car make. It loads data from a remote CSV via `d3.csv`, then uses `d3.scaleLinear` for axes and `d3.scaleOrdinal` with `schemeTableau10` for the categorical color legend. Axes are rendered with `d3.axisLeft` and `d3.axisBottom` in SVG, and circles are joined to the data using `selectAll().data().join()`. The chart is fully responsive, sizing to window dimensions.

Question 4

bubble chart

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes, with bubble size encoding MPG and color encoding brand. Built with D3 v7, it loads data from a CSV and renders SVG circles with animated tooltips on mouseover. The chart includes axes, a size legend for MPG values, and a color legend listing each make.

question 3

Activity 6 scatter plot with shape

Activity 7 scatter plot

Activity 6 Task3

Activity 6 task 2

This stacked bar chart visualizes the percentage distribution of book ratings across five genres, using data from a CSV file. Each bar represents a genre, segmented by rating ranges from "below 4.0" to "above 8.5", with a horizontal axis showing percentages. The visualization uses D3 v7's `d3.stack`, `d3.scaleOrdinal`, `d3.scaleLinear`, and `d3.scaleBand` APIs, rendering as SVG in a browser. Interactive tooltips display precise rating percentages per genre when hovering over bar segments, with opacity changes on mouseover. The chart includes axis labels, a title, and a color-coded legend for rating ranges.

activity 2 task 6

Fork of QUESTION 1 (2)

question 1

A horizontal bar chart displays the population of ten countries in the year 2000, sorted by name. Built with React and D3 v5, it uses `d3.scaleBand` for the categorical axis and `d3.scaleLinear` for the quantitative axis, rendering SVG rectangles. Population values from a CSV file are formatted with `d3.format` and displayed via `d3.scaleLinear` ticks.

QUESTION 1 (2)

A horizontal bar chart displays the populations of twenty countries from 2010, using a responsive React component with SVG rendering. D3 v5 scales (`scaleBand` and `scaleLinear`) position the bars, while custom `AxisBottom` and `AxisLeft` components format tick labels with SI prefixes (e.g., "B" for billions). The `Marks` component adds native SVG `<title>` tooltips, and data loads asynchronously via `d3.csv` from a GitHub-sourced CSV file where population figures are multiplied by 1,000. Green rectangular marks encode values along the x-axis, with styled tick lines and text for visual clarity.

Activity_6

Fork of 5 Buddhas

The visualization is a dense, colorful composition of 20 nested polygons and a large Buddha-shaped path, rendered as SVG inside a React app. The polygons are generated procedurally, each with randomized positions, colors, and opacities, creating a layered, chaotic texture across a 960x1000 canvas. Overlaid on this is a prominent orange-and-red Buddha figure, drawn from an SVG path and scaled to overlap the abstract background. The result is a vibrant, abstract piece where algorithmic randomness meets a recognizable religious icon, blending generative art with traditional imagery.

5 Buddhas

Five Buddhas renders five overlapping Buddha silhouettes in a black void, each drawn as a complex SVG path and repeated with scale transformations. The composition layers the sacred figure in a mandala-like arrangement, with each instance distinguished by position and size. Built with React and ReactDOM, the visualization uses SVG circles scattered randomly alongside the paths, colored via dynamically generated RGB values with high opacity. The paths are defined through extensive coordinate data, and the rendering relies on React's declarative approach to construct the SVG elements directly in the DOM.