Khushi Desai

Activity 7 Pie Chart

This pie chart visualizes the Happiness Dataset, showing the happiness scores of the top 20 countries with all remaining countries aggregated into an "Others" slice. D3's `pie` and `arc` generators create the SVG slices, while `scaleOrdinal` with `schemeCategory10` assigns colors, and a custom legend is drawn alongside. The data is loaded asynchronously via D3's `csv` method from a GitHub gist, with the `processData` function sorting and aggregating scores before rendering.

Activity 7 Area Chart

Activity 7 Tutorial

Activity6_Task1

Activity6_Question3

This scatter plot visualizes city data, mapping population on the x-axis against area on the y-axis, with each point colored by region using a categorical color scale. The code loads a CSV file from GitHub, parses it, and renders circles in an SVG using D3 v6 APIs such as `csv`, `scaleLinear`, `scaleOrdinal`, `axisLeft`, `axisBottom`, and `entries`. A legend, built with appended rectangles and text, identifies the region colors. The visualization uses the browser’s full window dimensions and positions axes with margin conventions.

Activity6_Question2

A stacked bar chart displays energy consumption proportions across four sectors—Residential, Commercial, Industrial, and Transportation—from 2016 to 2020, using data from data.csv. The visualization uses d3.scaleBand, d3.scaleLinear, and d3.scaleOrdinal with d3.stack to layer bars, while d3.axisBottom and d3.axisLeft render axes with percentage formatting. An SVG legend maps colors to sectors, and the chart is styled via external CSS.

Activity6_Question3

This D3.js v7 example displays a scatter plot of city data, plotting population against area and using distinct symbols to represent different regions. The visualization fetches its data from a CSV file hosted on GitHub and renders it into a full-window SVG. It uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` with `d3.symbols` for region-based shapes, and demonstrates a custom legend for mapping shapes to regions. The code loads D3 via UNPKG and uses local ES6 modules for its component structure.

Activity6_Question4

Activity6_Task2

This stacked bar chart shows the percentage distribution of movie ratings across six genres, revealing how genres like Documentary and Action differ in their rating profiles. Each bar segment represents a rating category from below 5.0 to above 8.5, with hover interactions displaying exact percentages via a tooltip. Built with d3.v7, the visualization uses d3.stack for data transformation, d3.scaleOrdinal for color mapping, and d3.scaleBand for categorical positioning. Data originates from a CSV file containing genre-specific rating proportions. SVG rendering handles the visualization, with axes generated through d3.axisBottom and d3.axisLeft.

Activity6_Task4

This bubble chart displays the correlation between average horsepower, torque, and highway MPG across various car makes. Each circle’s position maps horsepower on the x-axis and torque on the y-axis, while its radius represents highway MPG and its color identifies the make. The visualization includes interactive tooltips on hover and a legend for bubble size and color categories. The chart is built with D3 v7, using `d3.scaleLinear`, `d3.scaleOrdinal`, SVG rendering, and data loaded from a CSV file.

Activity6_Task 4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes. Each circle is positioned by horsepower (x-axis) and torque (y-axis), with its size scaled to highway MPG and color representing the manufacturer. The example demonstrates D3 v7 data loading via `d3.csv`, linear scales for axes, ordinal color scaling, and interactive tooltips on mouseover. It uses SVG rendering with `join` for data binding and includes a dual legend for bubble size and categorical colors.

Activity6_Task4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for various car makes. Each circle’s x-position represents horsepower, its y-position represents torque, and its size encodes highway MPG. The color of each circle distinguishes the car manufacturer. Built with the D3.js v7 framework, the visualization uses SVG rendering for the plot and animation for tooltips. It employs `d3.scaleLinear` for axes and bubble radius, `d3.scaleOrdinal` with `d3.interpolateTurbo` for color, and interactive tooltips on mouseover.

Fork of Hello VizHub

A stacked bar chart visualizes regional sales across three product categories, with each bar showing total value per region and segments colored by category. The visualization loads data from a CSV file and renders SVG graphics using D3 v7, employing `d3.csv` for data parsing, `d3.scaleBand` and `d3.scaleLinear` for positioning, and `d3.stack` to compute stacked series. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, while regions are ordered alphabetically on the vertical axis.

Activity6_Task2

This example shows a stacked horizontal bar chart of movie ratings across six genres, using the D3.js library (v7) to portray the percentage distribution of ratings from low to high for each genre. The data, sourced from a CSV file, is rendered as SVG. The code defines ordinal color scales for the rating categories, uses linear and band scales for positioning, and adds interactive tooltips on mouseover that display the exact percentage. D3 APIs like `d3.scaleOrdinal`, `d3.scaleLinear`, `d3.scaleBand`, `d3.axisBottom`, `d3.axisLeft`, and `d3.format` are used for layout and formatting.

Activity6_Question6

This scatter plot visualizes the relationship between patient age and Na-to-K ratio, with each point colored by drug type. It loads a CSV dataset from a GitHub repository and renders an SVG using D3 v6. The code uses `d3.csv` for data loading, `d3.scaleLinear` for axes, `d3.axisBottom` and `d3.axisLeft` for tick marks, and `d3.scaleOrdinal` with `d3.schemeCategory10` for drug categories. A custom legend maps colors to drug names, and axis labels are added via appended text elements.

Activity6_Task3.2

This example demonstrates a scatter plot of iris flower measurements, encoding sepal and petal length on the axes and using different symbols to distinguish species. It loads the Iris dataset from a GitHub-hosted CSV file and parses it with `d3.csvParse`. The visualization is built with D3 v7, using `d3.scaleLinear` for axes, `d3.scaleOrdinal` with `d3.symbolsFill` for shape encoding, and modular ES6 imports for reusable axes and legend components. The legend is rendered with `d3.symbol` positioned at a fixed coordinate within the SVG canvas.

Activity6_Task3

Activity6_Question2 Khushi

This bar chart displays the population of 20 countries in 2010, sorted by country name along the vertical axis with horizontal bars indicating population size. The visualization uses React with D3 v5 to load CSV data from GitHub, scale bands and linear scales to position marks, and SVG rectangles for rendering. The code imports d3.csv, scaleBand, scaleLinear, max, and format from the D3 library, while custom Axis components generate tick marks and labels. Population values are formatted using the SI prefix notation, converting gigabytes to billions via the xAxisTickFormat function.

Activity6_Question1 Khushi

activity 5

Fork of buddha khushi

Fork of buddha khushi

A React application renders an abstract, Buddha-like silhouette composed of multiple overlapping, semi-transparent green vector paths on a floral background image. The code uses ReactDOM to draw SVG paths, with each path's `d` attribute containing complex coordinate data for the figure's geometry. The visualization showcases the Buddha shape repeated at different scales and translations, creating a layered, kaleidoscopic effect. Style changes in stroke width and color, alongside the flower backdrop, give the image a textured, organic appearance.

test

Six mirrored Buddha silhouettes appear in a row, each rendered in a different color with a horizontally flipped reflection beside it. The visualization uses React and ReactDOM to generate SVG paths, with the Buddha shape defined by a single polygonal path string. Each color maps to a transformed group element, using SVG scale and translate to position and mirror the figures. The background is a flower image applied via CSS, creating a decorative context for the colored shapes.

6 backgrounds

An abstract, colorful composition of overlapping diamond shapes is rendered on a black background. The piece appears algorithmic: nested loops generate the diamonds at random positions with vibrant RGB fills, while a hand-coded SVG path forms a central Buddha-like silhouette. Built with React and rendered as SVG, the visualization combines generative randomness with a detailed, pre-defined geometric image.

buddha khushi

This example displays a dense, chaotic field of randomly generated, semi-transparent polygons layered over a large, detailed SVG path of a Buddha. The code uses React to render the SVG, with nested `map` functions creating hundreds of overlapping shapes with randomized positions, colors, and rotations. The polygon points are calculated using `Math.random()` multiplied by array values, while the Buddha path is drawn from hardcoded coordinate data. The background is black, and the overall effect is a colorful, abstract collage obscuring the underlying figure. The visualization relies on React's `ReactDOM` for rendering and plain SVG elements like `polygon` and `g`.