Skip to main content
Log in
A

Areeba Hassan

@areebahassan01·14 public vizzes

Loading thumbnail…

Pie Chart of Titanic

This pie chart visualizes survival outcomes for Titanic passengers, splitting the dataset into green "Survived" and red "Not Survived" slices with value labels and a legend. It loads CSV data from a GitHub repository using `d3.csv`, aggregates counts via `d3.rollup`, and generates the chart with `d3.pie` and `d3.arc`. Hover interactions trigger a scale transition on slices, while SVG text elements provide axis labels and legend annotations. The visualization renders entirely in SVG with D3 v7.

Nov 6, 2024
Loading thumbnail…

Area Chart of Global Temperatures

This area chart visualizes global temperature anomalies over time, with the y-axis representing temperature anomaly in degrees Celsius and the x-axis showing the year. The visualization uses D3.js version 7 to generate the SVG rendering, employing the `.area()` API to create the filled area and adding interactive tooltips through circle elements that respond to mouseover events, displaying year and temperature values for each data point.

Nov 5, 2024
Loading thumbnail…

Activity7

This example displays a pie chart of Spotify top songs, showing the market share distribution of different artists. The chart is rendered as an SVG with D3 v6, using `d3.pie()` to compute arc segments and `d3.scaleOrdinal` with the `schemeCategory10` color palette to distinguish artists. A legend with colored dots and artist names annotates the chart, while the data is loaded from a remote CSV file via `d3.csv()`. The code also appends axis-style labels for "Market Share Distribution" and "Market Share (%)", despite pie charts typically lacking axes.

Nov 4, 2024
Loading thumbnail…

Activity6_Task4

This interactive bubble chart shows the correlation between average horsepower, torque, and highway MPG across different car makes. Each bubble’s position encodes horsepower (x-axis) and torque (y-axis), while its radius represents highway MPG, and its color represents the car brand. Hovering a bubble displays a tooltip with the make name. Built with D3 v7, the visualization uses `d3.scaleLinear` for axes and bubble sizing, `d3.interpolateTurbo` for the color scale, and SVG circles with mouse event handlers for interactivity. Legend circles and labels clarify the MPG scale.

Oct 22, 2024
Loading thumbnail…

Activity6_Question4

This bubble chart compares violent crime rates and aggravated assault rates across U.S. cities, with bubble size encoding population and distinct colors differentiating cities. The visualization uses d3.csv to load the dataset, d3.scaleLinear for positioning and sizing, and d3.scaleOrdinal with d3.schemeTableau10 for color assignment. Interactive tooltips appear on mouseover, displaying city name, population, and violent crime count. SVG circles are rendered with D3 v7, and a size legend shows population values of 20,000, 50,000, and 80,000.

Oct 22, 2024
Loading thumbnail…

Activity6_Question3

This scatter plot visualizes the relationship between height and weight for individuals, colored by gender. It displays data points as circles with a tooltip showing exact values on mouseover, along with labeled axes and a color-coded legend. The visualization loads data from a CSV file via `d3.csv` and renders with SVG. It uses D3's `scaleLinear`, `scaleOrdinal`, `axisBottom`, and `axisLeft` APIs to map data to coordinates, axes, and categorical colors for male and female observations.

Oct 22, 2024
Loading thumbnail…

Activity6_Task3.2

This example shows an interactive scatter plot of iris flower measurements, mapping sepal length against petal length with species indicated by different symbol shapes. The visualization uses D3 v7 APIs including `scaleLinear`, `scaleOrdinal`, `symbol`, and `axisLeft`/`axisBottom` to construct the plot and its legend. Data is loaded asynchronously from a remote CSV file using `csvParse` and fetched via the Fetch API, with numeric fields coerced to numbers. The chart displays three shapes from `symbolsFill`, with axes labeled and a custom shape legend positioned within the SVG.

Oct 22, 2024
Loading thumbnail…

Activity6_Task3.1

This is a static scatter plot of the classic Iris dataset, using D3.js v6 to position circles based on petal length and petal width. Each point is colored by species (setosa, versicolor, or virginica) and encodes additional sepal dimensions in the circle's horizontal and vertical radii. The visualization loads CSV data from a remote GitHub gist and renders as an SVG, with axes and labels generated using `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom`.

Oct 22, 2024
Loading thumbnail…

Activity6_Question2

This stacked bar chart visualizes how students across six academic domains perceive AI, showing the percentage distribution across five GPA ranges. The chart uses D3 v7 to load CSV data and render SVG elements, employing `d3.stack()` to generate stacked series and `scaleOrdinal` for color encoding. Interactive tooltips display domain, GPA range, and exact percentage on hover, while axis labels and a legend clarify the categorical breakdown.

Oct 22, 2024
Loading thumbnail…

Activity6_Task2

This stacked bar chart shows the percentage distribution of IMDb rating categories across six movie genres, revealing how genre influences audience scores. Each genre’s bar is divided into five rating segments, from “below 5.0” to “above 8.5,” with hover tooltips displaying exact percentages. The visualization uses D3 v7’s `d3.stack()` for data stacking, `d3.scaleLinear` and `d3.scaleBand` for axes, and SVG rendering. Data comes from a CSV file, with a custom tooltip providing interactive detail on mouseover.

Oct 22, 2024
Loading thumbnail…

Activity6_Task1

This bar chart shows the population of ten countries in the year 2000, ranked and scaled by count. Built with React and D3 v5, it uses SVG rendering with `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. The code imports D3 functions like `csv`, `scaleBand`, `scaleLinear`, `max`, and `format` to load and process data from a GitHub-hosted CSV. Custom axis and mark components render rectangles with tooltips, and the x-axis labels are formatted using SI prefixes, converting 'G' to 'B' for billions. The chart includes styled ticks, a light green fill for bars, and a Poppins font.

Oct 22, 2024
Loading thumbnail…

Activity6_Question1.2

A horizontal bar chart displays the 2010 population for 20 countries, sorted by a categorical country axis. Each red bar’s length encodes population values using a linear scale, with hover tooltips formatted as billions. The React app loads CSV data via `d3.csv` and renders SVG marks with `scaleBand` and `scaleLinear`. Axes are custom components using D3’s tick generation.

Oct 22, 2024
Loading thumbnail…

6 Buddhas

A decorative visualization displays a seated Buddha figure composed of intricate SVG paths, overlaid on a green floral background photograph. The artwork is rendered through React, which generates the SVG elements programmatically. The code includes experimental array operations and cubic calculations that appear unrelated to the final visual output. The composition layers the Buddha silhouette with a semi-transparent overlay, creating a meditative portrait within a framed gallery-style presentation.

Oct 17, 2024
Loading thumbnail…

6 Buddahs

Six overlapping Buddha silhouette paths form a layered mandala-like composition against a black background. Each path is drawn with an SVG `<path>` element, while hundreds of semi-transparent colored circles are scattered across the canvas using randomly generated coordinates and RGB fill values. The visualization uses React’s `ReactDOM` to render the SVG, with nested array maps generating the circle positions. The Buddha paths appear derived from a single geographic dataset, transformed and scaled to create symmetric overlapping forms.

Oct 17, 2024