Skip to main content
Log in
M

Mohammed Abdul Mannan

@AbdulMannan19·14 public vizzes

Loading thumbnail…

Assignment 7 - Question 2

This example shows a time-series area chart of a stock’s closing price, with a shaded region beneath a line plot to emphasize price levels over time. It loads CSV data from a GitHub gist, parses dates with `d3.timeParse`, and uses `d3.area` and `d3.line` generators to produce SVG paths. Axes are drawn with `d3.axisBottom` and `d3.axisLeft`, while scales (`d3.scaleTime`, `d3.scaleLinear`) map data to chart dimensions. The chart includes a title and axis labels, with an error message displayed if data loading fails.

Nov 7, 2025
Loading thumbnail…

Assignment 7 - Question 1

A pie chart visualizes the distribution of CSS named colors grouped by their first letter, showing the top 12 alphabetical categories with counts and percentages. The d3.v7 library loads CSV data from a GitHub gist, aggregates entries by initial character, and renders an SVG pie chart with ordinal color encoding, hover-to-scale effects, and interactive tooltips. Mouseover events trigger animated scaling and display details on category count and proportion, while a legend and title provide context.

Nov 7, 2025
Loading thumbnail…

Question 4

This bubble chart visualizes Olympic athletes from Summer Games between 2000 and 2016, plotting average weight on the x-axis and average height on the y-axis for each sport, with bubble size representing average athlete age. The code uses d3.csv to load data from the TidyTuesday Olympics dataset, then applies d3.rollup to aggregate athletes by sport and d3.mean to calculate averages. Filters exclude non-medalists, missing height/weight data, and sports with fewer than 10 medal winners. The SVG rendering includes axes via d3.axisBottom and d3.axisLeft, plus hover tooltips with opacity transitions. Only sports with complete data appear in the visualization.

Oct 31, 2025
Loading thumbnail…

Tutorial 4

This interactive bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes, with each bubble positioned by horsepower (x-axis) and torque (y-axis), while its radius and color encode highway MPG and make, respectively. Built with D3.js v7, the SVG chart includes animated mouseover tooltips that display the car make, and a legend showing MPG scale and color-coded makes. It reads from a CSV file, uses linear scales for axes and bubble size, and applies an ordinal color scale using interpolateTurbo.

Oct 31, 2025
Loading thumbnail…

Tutorial 4

This tutorial shows the relationship between horsepower, torque, and highway MPG across 30 car makes, with car brand labels placed on a scatterplot. Each point’s position encodes horsepower and torque, while its size reflects highway MPG. The visualization uses D3.js with `d3.forceSimulation` to position labels and avoid overlaps, and `d3.scaleLinear` and `d3.axisBottom` to map and render axes. The data comes from the provided `bubblechart.csv` file.

Oct 31, 2025
Loading thumbnail…

Question 3

This scatter plot visualizes the relationship between fuel efficiency (mpg) and horsepower for 65 cars, with each dot colored by the vehicle's region of origin (USA, Japan, or Europe). The chart uses D3 v7 to render SVG circles positioned by linear scales on both axes, with a categorical color scale distinguishing origins and a legend explaining the color mapping. The visualization highlights the negative correlation between horsepower and fuel economy, while also revealing that Japanese and European cars tend to cluster toward higher mpg values with lower horsepower output.

Oct 31, 2025
Loading thumbnail…

Tutorial 3.2

A scatter plot displays Iris flower measurements, plotting sepal length against petal length with a legend differentiating species by symbol shape. The visualization uses D3 v7’s `scaleLinear`, `scaleOrdinal`, `symbolsFill`, and custom axis and legend modules. Data loads from a CSV via `csvParse` and renders with `join` and `symbolGenerator`, while axes are built using `axisLeft` and `axisBottom`.

Oct 31, 2025
Loading thumbnail…

Tutorial 3.1

This scatter plot visualizes Fisher's Iris dataset, showing petal length on the x-axis and petal width on the y-axis, with each of the three species colored differently (skyblue, lightgreen, or orange). It uses d3.csv to load the data, d3.scaleLinear for axis scaling, and d3.axisBottom/axisLeft to render axes. Circles are drawn using the SVG join method, with data mapped to x/y coordinates and static fill colors based on species.

Oct 31, 2025
Loading thumbnail…

Fork of Activity 7 Scatter Plot

This scatter plot visualizes the Iris dataset, plotting petal length on the x-axis and petal width on the y-axis, with each point colored by species (setosa, versicolor, virginica) using a custom `marker` function. The visualization uses D3 v6’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` from the `d3` namespace to construct the plot. Data is loaded via `d3.csv` from a remote GitHub URL, with SVG circles rendered through the `join` API. The code also includes an attempt to set `rx` and `ry` attributes based on sepal dimensions, though the circles remain fixed at radius 5.

Oct 31, 2025
Loading thumbnail…

Fork of Activity 7 Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length and width while encoding sepal dimensions through elliptical marker shapes and species via color (skyblue, lightgreen, orange). The D3.js v6 code loads CSV data, uses `scaleLinear` with `extent` for axes, and renders SVG circles with `rx`/`ry` attributes to reflect sepal measurements. Axis labels are added via SVG text elements, and the visualization fills the browser window using `window.innerWidth` and `window.innerHeight`.

Oct 31, 2025
Loading thumbnail…

Question 2

This example presents a 100% stacked bar chart illustrating salary distribution across six departments. Each horizontal bar is segmented by five salary brackets, from “below 50k” to “above 85k,” with segment lengths proportional to the percentage of employees in that bracket. The visualization uses D3.js (v7) with an SVG rendering. It leverages the `d3.stack` API to compute stacked segments, `d3.scaleBand` for the y-axis (departments), and `d3.scaleLinear` for the x-axis (percentages). The code displays interactive tooltips on hover, showing the exact salary bracket and its percentage value, and includes a legend listing salary brackets.

Oct 30, 2025
Loading thumbnail…

Question 1.2

This chart shows the populations of 20 countries in 2010 as horizontal bars. React and D3 v5 are used to render an SVG visualization, with a band scale mapping countries to the y-axis and a linear scale for population values. Data is loaded from a remote CSV using `d3.csv`, and D3’s `scaleBand` and `scaleLinear` drive the layout, while `d3.format` with the `.2s` specifier formats tick labels and tooltips. Axes and marks are defined as React components, with custom tick styling for lines and text.

Oct 30, 2025
Loading thumbnail…

Question 1.1

A horizontal bar chart displays the population of ten countries in the year 2000, using green bars sorted alphabetically by country name. The visualization is built with React and D3 v5, employing `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. Data is loaded from a remote CSV file via `d3.csv`, with population values multiplied by 1000. SVG rendering includes custom `AxisBottom` and `AxisLeft` components, while tooltips show formatted values using D3's `format` function.

Oct 30, 2025
Loading thumbnail…

Fork of 5 Buddhas

Five identical Buddha outlines are layered atop one another, each translated and scaled to create a dense, overlapping mandala-like composition from a single SVG path. The design renders on a black background with a floral image, using React and ReactDOM to mount the SVG elements. The path data is defined once and reused across multiple `<g>` transforms, with the final shape outlined in white and filled with violet.

Sep 27, 2025