A

abdul.khader2899@gmail.com

@Abd2899·19 public vizzes

Loading thumbnail…

Pie chart Distribution

This example shows the shipping amounts for different cities during the Covid era. Using D3.js version 5, it loads CSV data from a GitHub repository, maps each city to its numeric amount, and renders a bar chart. The visualization uses `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the y-axis, with axes generated via `d3.axisBottom` and `d3.axisLeft`. Bars are drawn as SVG rectangles, filled with random hues via HSL color strings, and labeled with a rotated city name axis.

Loading thumbnail…

Bar chart Distribution

This D3.js v5 bar chart visualizes the distribution of shipping amounts across different cities during the Covid era. The data is loaded from a remote CSV file, and the chart maps city names to the quantitative amount using a band scale for the x-axis and a linear scale for the y-axis, with axes rendered via `d3.axisBottom` and `d3.axisLeft`. Each bar’s height corresponds to the value, and its fill color is randomly generated using HSL notation in the rendering SVG. The visualization uses margins and rotated x-axis labels for readability, with data processed from the provided City.csv source.

Loading thumbnail…

3-D chart

This 3-D chart visualizes the number of smokers among the average population affected by COVID-19 across six continents. It uses Highcharts with the Highcharts 3-D add-on to render stacked column series for female and male smokers. The chart applies 3-D perspective settings for depth, alpha, and beta angles, with categorical data on the x-axis, numeric counts on the y-axis, and a z-axis labeled "Continents." Data is embedded directly in the JavaScript code as series arrays.

Loading thumbnail…

Area graph for Female Smokers

This area graph shows the distribution of female smokers among COVID-19 patients alongside the average population density, with the x-axis representing the number of female smokers and the y-axis indicating population density. Built with D3 v5, the visualization combines a line chart and an area chart using `d3.line` and `d3.area` with basis curves to create a smooth trend. Data is loaded from a remote CSV file using `d3.csv` and rendered as SVG, with axes generated via `d3.axisBottom` and `d3.axisLeft`, and the area filled in a light blue color to highlight the trend.

Loading thumbnail…

Assignmnet 2 -Area chart

This area chart visualizes website traffic trends across five different site categories—News, Travel Blog, E-commerce, Health Portal, and Entertainment Hub—over time using a CSV dataset loaded via d3.csv. Each category is rendered as a semi-transparent filled path using d3.area with curveMonotoneX smoothing, overlaid to show comparative growth. The visualization employs d3.scaleLinear for axes, d3.axisBottom and d3.axisLeft for ticks, and includes a custom legend built with SVG rectangles and text. The code uses d3.v7 and renders entirely as SVG.

Loading thumbnail…

Assignment-2_Pie chart

This example visualizes the distribution of social media reach across various hashtags using a pie chart. Each slice represents a hashtag, with its size proportional to the number of mentions and labeled with the percentage of total reach. The D3.js code employs `d3.pie()`, `d3.arc()`, and the `d3.scaleOrdinal()` color scheme, rendering the chart as SVG. A tooltip displays detailed percentages and reach values on mouseover, while a legend lists each hashtag with its corresponding color.

Loading thumbnail…

Activity-6_Question-3

This interactive scatter plot visualizes relationships between age and salary from a gender-based occupations dataset. Points are color-coded by gender (blue for male, pink for female, orange for other), and hovering reveals tooltips with the exact age, gender, and salary values. Built with D3 v6, the visualization uses `scaleLinear` for axes, `axisBottom` and `axisLeft` for ticks, and appends circles to the SVG with `selectAll('circle').data(data).enter()`. The plot includes labeled axes for "Age" and "Salary" with green, bold formatting.

Loading thumbnail…

Activity-6_Question-2

This stacked bar chart shows the distribution of Walmart product ratings across six product categories, with each bar divided into five rating percentage segments from "below 5.0" through "above 8.5." The visualization uses d3.stack() to compute the stacked series and d3.scaleOrdinal with a five-color palette to distinguish rating bands. It renders SVG rectangles with d3.scaleLinear for the percentage x-axis and d3.scaleBand for the categorical y-axis, displaying the percentages formatted to two decimals. Interactive tooltips appear on mouseover, showing the exact rating percentage for each segment.

Loading thumbnail…

Activity-6_Task-2

This stacked bar chart visualizes the distribution of IMDb movie ratings across six genres, with each bar segment representing the proportion of films falling into one of five rating brackets (e.g., below 5.0, 5.0–6.5). The chart uses `d3.stack` to compute cumulative segment positions, with `d3.scaleBand` for the genre axis and `d3.scaleLinear` for the percentage axis. Interactive tooltips, implemented via mouseover events, display the exact percentage for each segment. SVG rendering is employed, and the data is sourced from a CSV file.

Loading thumbnail…

Activity-6_Question1.2

This horizontal bar chart visualizes the 2010 populations of the first 20 countries from a CSV file, sorted alphabetically by country name. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` for the axes and renders SVG rectangles via the `Marks` component. Each bar’s length represents population, with tooltips showing formatted values (e.g., "1.37B"). The chart includes styled tick marks and axis labels, with population data multiplied by 1000 from the source.

Loading thumbnail…

Activity-6_Question1.1

This bar chart visualizes the population of the first ten countries in the year 2000, using horizontal bars sorted by country name. The React application loads data from a CSV file and processes it with d3.csv, then scales the population values (multiplied by 1000) with d3.scaleLinear and d3.scaleBand for the categorical country axis. The SVG output is rendered through React components, with custom AxisBottom, AxisLeft, and Marks modules handling ticks and bar rectangles; the marks include tooltips formatted via d3.format to abbreviate large numbers.

Loading thumbnail…

Activity 6_Task-1_Tutorial

This bar chart visualizes the 2020 population estimates for 30 countries, sourced from a CSV file. The chart uses horizontal bars with a linear x-scale for population values and a band scale for country names. Built with D3 v5 and React, it renders as an SVG. The code defines custom axis components and uses a `Marks` component to draw rectangles. A tooltip, implemented via an SVG `<title>` element, displays the formatted population value on hover.

Loading thumbnail…

Activity_6-Question-4

This bubble chart visualizes the correlation between three metrics for various hashtags: number of mentions, engagement rate, and reach. Each circle's x-position maps to mentions, y-position to reach, and its radius encodes engagement rate, with color distinguishing the hashtag. It includes a legend for engagement rate values and a color legend for hashtags. Built with d3.v7, it uses `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.schemeCategory10` for encoding, and renders as SVG with interactive tooltips on mouseover. The data comes from the provided `bubblechart.csv` file.

Loading thumbnail…

Activity_6-Task-4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for various car makes. Each circle's position is mapped to horsepower (x-axis) and torque (y-axis), while its size represents highway MPG and its color identifies the car brand. Built with D3 v7, the SVG rendering includes interactive tooltips that display the make on mouseover. The chart uses `d3.scaleLinear` for axes and bubble size, `d3.scaleOrdinal` for color mapping, and `d3.interpolateTurbo` for the color palette, with data loaded from a CSV file.

Loading thumbnail…

Activity-6_Task-3.1

This example displays a scatter plot of the Iris dataset, mapping petal length on the x-axis and petal width on the y-axis, with points colored by species. The visualization uses D3 v6 APIs including `d3.csv`, `d3.scaleLinear`, `d3.extent`, and `d3.axisLeft`/`d3.axisBottom`. Data is loaded from a remote CSV, and each point is rendered as an SVG circle positioned through the scales, with species-specific fill colors from a switch statement. Axis labels are added via appended SVG text elements.

Loading thumbnail…

Activity_6-Task-3.2

This D3 v7 scatter plot visualizes the relationship between sepal length and petal length in the Iris dataset, using different shapes to represent the three species. The visualization employs `scaleLinear` for the x- and y-axes, `scaleOrdinal` with `symbolsFill` to map species to distinct symbols, and the `symbol` generator to draw the marks. The chart includes labeled axes and a shape legend. Data is loaded from a remote CSV file, parsed with `csvParse`, and rendered within a full-window SVG.

Loading thumbnail…

Fork_Buddha_Task_3

This visualization is an abstract artistic rendering composed of multiple overlapping, scaled instances of a single Buddha silhouette, which is represented as a complex SVG path. The code uses React to construct and layer these paths, applying distinct transform scales and translations to create a dense, intertwined composition. Each path is rendered with a black fill and white stroke, set against a background of a flower image, creating a high-contrast overlapping effect on a canvas measuring 960 by 1000 pixels. The work is a stylistic exploration of form repetition through programmatic placement.

Loading thumbnail…

Fork of Activity-6_Question1.2

This horizontal bar chart displays the population of the first 20 countries in 2010, with countries listed on the y-axis and population values on the x-axis. The visualization uses React with D3 v5 to load data from a CSV file, and renders the bars as SVG rectangles. The code uses d3.scaleBand for the y-axis, d3.scaleLinear for the x-axis, and a custom d3.format('.2s') to abbreviate population values, while tooltips show the exact formatted values.

Loading thumbnail…

5 Buddhas

A generative SVG artwork presents a black canvas filled with thousands of randomly rotated, semi-transparent diamond polygons, each colored via randomized RGB values. A large, intricate Buddha silhouette, defined by a complex SVG path, is overlaid five times in the center. The piece is built with React, rendering the overlapping figures and the procedurally generated background entirely through SVG elements.