azeemrm630@gmail.com

activity7pie

This visualization is a pie chart showing the maximum life expectancy of different car models. The data is loaded from a GitHub-hosted CSV file using D3's `csv` function. The pie chart is rendered as SVG paths generated with `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` for color mapping, with each slice labeled with its value. A legend on the right displays the car names and their corresponding life expectancies using rectangle swatches and text. The chart uses a fixed width and height of 960 by 500 pixels, with the center positioned at (250, 250).

Nov 7, 2024

activity4_to

A bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes, with circle size encoding MPG and color distinguishing brands. The D3.js v7 code loads a CSV, applies linear scales to axes, and uses an ordinal color scale with interpolateTurbo for the legend. Interactive tooltips appear on mouseover, and hover events are managed through transition-based show, move, and hide functions under an SVG rendering.

3question_az

This scatterplot visualizes cancer diagnosis data, distinguishing benign (green) and malignant (red) tumors based on mean radius and texture. The D3 v6 example loads data from a CSV, uses `scaleLinear` and `extent` to set axes, and renders SVG circles with `axisLeft` and `axisBottom` for labels. The page employs full-window sizing and custom font styling.

activity3.1_6

This example renders a scatter plot of the Iris dataset, showing petal length against petal width, with each point colored by species (setosa, versicolor, or virginica). The data is loaded from a GitHub-hosted CSV file using D3’s `csv` function. The visualization uses `scaleLinear` and `extent` to map values to screen coordinates, and `axisLeft` and `axisBottom` to draw axes. Circles are appended and styled via D3 selections with radii fixed at five pixels, while the code also references sepal measurements as unused properties.

3_ativity_6

This bubble chart visualizes the correlation between the average price of ice cream, the number of flavor varieties, and calories for a fictional set of ice cream brands. Data is loaded from a remote CSV file, and each bubble’s position encodes price and flavor count, while its size and color represent calorie content and brand, respectively. Built with D3.js v7, the chart includes interactive tooltips on hover and a legend showing calorie-to-bubble-size mapping, with axes, labels, and a title rendered using standard D3 scales and SVG elements.

Ativity_6_task3

A stacked horizontal bar chart compares the percentage of IMDb ratings across different movie genres. Each bar is segmented by rating service, with colors distinguishing the services, and hovering over a segment reveals the exact percentage via a tooltip. Built with D3 v7, the visualization uses `d3.scaleOrdinal` for colors, `d3.scaleBand` for the categorical y-axis, `d3.stack` for the stacked data, and `d3.axisBottom` and `d3.axisLeft` for axes. Data is loaded from an external source, and the SVG rendering includes custom styling from `styles.css`.

3task_activity_6

This example displays an interactive scatter plot of the Iris dataset, mapping sepal length to the x-axis and petal length to the y-axis, with species distinguished by different point shapes. It loads data asynchronously from a CSV file hosted on GitHub, parsing it with `csvParse` and converting numeric fields. The visualization uses D3 v7 APIs including `scaleLinear`, `scaleOrdinal`, `symbolsFill`, and `axisLeft`/`axisBottom` to render scales, axes, and a custom shape legend. The code demonstrates modular ES6 imports, separating scatter plot, axis, and legend logic into distinct local modules.

Activity_6_task_3

This scatter plot visualizes the Iris dataset, mapping petal length and width for each flower specimen, with points colored by species (setosa, versicolor, or virginica). The visualization uses D3 v6 to load the CSV data, scales the coordinates, calculates the extent of the data, and renders circles in an SVG. It leverages D3's `scaleLinear`, `axisLeft`, `axisBottom`, and an interactive `join` operation to bind data to the circles, with a custom marker function assigning fill colors based on species.

Activity6_task2

This stacked bar chart visualizes the distribution of IMDb ratings across six movie genres, showing the percentage share within five rating bands from below 5.0 to above 8.5. Using D3 v7 with SVG rendering, the visualization loads data from a local CSV file and applies d3.stack() with a d3.scaleBand for genres and d3.scaleLinear for percentages. Each bar segment displays a distinct color from a custom ordinal scale, and interactive mouseover events trigger a tooltip revealing the exact percentage for each genre-rating pair.

Activity6_task1_question_2

This visualization displays the population of 20 countries in 2010 as a horizontal bar chart, sorted by country name along the y-axis with population magnitude on the x-axis. The chart uses a linear scale for population and a band scale for categorical countries. Built with React and D3 v5, it utilizes SVG rendering, with `scaleBand` for the y-axis, `scaleLinear` for the x-axis, and loads data from a CSV URL parsed via `d3.csv`. The bars are colored light green, and axis tick labels are styled with blue lines.

Activity6_task1

This chart shows the population of ten countries from the year 2000, displayed as a horizontal bar chart with a linear scale. The bars are colored light green, and hover tooltips reveal the precise population value. The visualization is built with React and D3, using `d3.scaleBand` for the categorical y-axis, `d3.scaleLinear` for the quantitative x-axis, and SVG rectangles for rendering. Data is loaded from a CSV file.

Fork of 6 buddas

A fork of the "Buddha in colors" visualization renders a series of overlapping Buddha silhouette paths, transformed with varying scales and translates to create a stacked arrangement. The artwork uses React to manage the SVG output, with each path defined by a complex inline `d` string and styled with white strokes and black fills. The code randomly positions these paths across a static SVG canvas, with the body background set to a flower image via CSS.

Oct 18, 2024