suhaibuddinahmed10@gmail.com

Activity 7_q2

final_iter

A grouped bar chart compares annual totals for Hail, Tornadoes, and Winds across four damage categories: property loss, crop loss, injuries, and fatalities. It aggregates CSV data from three separate Google Drive sources, summing each metric per event type. The visualization uses D3.js version 6’s `scaleBand` for the categorical axes and `scaleLinear` for the value axis, rendering four distinct colored bars per group via SVG rectangles. An ordinal color scale maps each category, with legends and axis labels generated using `d3.axisBottom` and `d3.axisLeft`.

Activity 7

This visualization displays a pie chart of the top 10 movie directors by number of directed films, with each slice labeled by its count and a legend identifying directors. The chart uses D3.js v6’s `d3.pie` and `d3.arc` to compute and render the SVG paths, while `d3.rollup` aggregates the CSV data from a GitHub Gist. A categorical color scale (`d3.scaleOrdinal`) with `schemeCategory10` colors the slices, and the title and legend are appended as SVG text elements.

Activity_6_Task_4

This example presents an interactive bubble chart showing the relationship between salary and experience, with bubble size encoding age and color distinguishing employee status (Stayed or Left). It loads CSV data from a GitHub repository and uses D3 v6 scales (scaleLinear, scaleOrdinal) to map attributes. The visualization renders as SVG, with axes, gridlines, and a legend constructed via d3.axisBottom, d3.axisLeft, and appended circle elements.

Activity_6_Task_3

This bubble chart visualizes the relationship between payment tier, experience in the current domain, and age, with bubble size encoding age and color indicating employee leave status (red for leaving, green for staying). The visualization uses D3 v6 with SVG rendering, loading data via d3.csv from a Gist. It employs d3.scaleLinear for both axes and bubble sizing, d3.scaleOrdinal for categorical color mapping, and d3.axisBottom and d3.axisLeft to generate the axes with grid styling applied through CSS.

Activity_6_Task_2

This stacked bar chart displays the percentage distribution of PaymentTier, ExperienceInCurrentDomain, and Gender across employee LeaveOrNot outcomes, using data loaded from a local CSV file. The visualization uses D3.js v7’s `d3.stack()` to compute stacked segments, with `scaleBand` and `scaleLinear` for axes, and `axisBottom` and `axisLeft` for ticks. Percentage labels on each bar segment and a legend are included, with styling defined in a linked stylesheet.

Activity_6_Task_1_q2

This interactive bar chart displays the population of 20 countries in 2010, sourced from a CSV dataset loaded via `d3.csv`. Rendered as an SVG using React, the chart maps countries to the y-axis and population values to the x-axis using `d3.scaleBand` and `d3.scaleLinear`. The D3 library formats axis tick labels (e.g., converting billions) and provides tooltips on hover. Custom components like `AxisBottom` and `Marks` structure the visualization, while CSS styles the bars and gridlines.

Activity_6_Task_1

This horizontal bar chart displays the population of the top ten countries in the year 2000, using a green fill for each bar. Built with React and D3 v5, the visualization loads CSV data from a GitHub repository and renders as an SVG. The code creates scales with `scaleBand` and `scaleLinear`, formats axis tick labels using `format`, and uses `csv` to parse the data, with tooltips showing the population values.

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

The visualization renders an overlapping Buddha silhouette using hand-coded SVG paths. The path data appears to originate from a pre-existing SVG shape, scaled and positioned within a React component. The code creates a fixed-size `<svg>` canvas via `ReactDOM` and includes commented-out experimental geometry that generates random polygons, suggesting iterative exploration. A background image of flowers and large red text are also styled on the page. The piece relies on React’s declarative syntax to structure the SVG elements, with the Buddha path repeated or layered in a “forked” evolution, though only a single path is actively drawn in the visible code.