MdAfikurRahmanKhan@my.unt.edu

@afikur-unt·12 public vizzes

Activity-6_3

This scatter plot visualizes the relationship between horsepower and fuel efficiency (MPG) for cars from the Auto MPG dataset, with each point colored by the vehicle's region of origin (USA, Europe, or Japan). Using D3 v7, the code loads CSV data via `d3.csv`, maps it with a custom parsing function, and renders points as SVG circles with `d3.scaleLinear` for both axes and `d3.scaleOrdinal` for region-based coloring. The visualization includes labeled axes, a legend, and a red title, all rendered as SVG elements.

Nov 17, 2025

Loading thumbnail…

Activity-6_3

This scatter plot visualizes the Iris dataset, mapping sepal length on the x-axis against petal length on the y-axis for three iris species (setosa, versicolor, and virginica), each distinguished by color. Built with D3.js v7, it uses `d3.scaleLinear` for both axes, `d3.scaleOrdinal` for species-based coloring, and SVG circles with fixed radius and opacity. The visualization includes axis labels and a manually positioned legend, with data loaded asynchronously via `d3.csv` from a GitHub gist.

Nov 17, 2025

Loading thumbnail…

Activity-6_2

A stacked horizontal bar chart displays the distribution of movie ratings across five genres, breaking down percentages into five categories from below 5.0 to above 8.5. Each genre row is divided into colored segments representing rating proportions. The visualization uses D3 v7 with stacked bar geometry via `d3.stack`, ordinal color scaling through `d3.scaleOrdinal`, and axes configured with `d3.axisBottom` and `d3.axisLeft`. Animated tooltips appear on hover, implemented with `transition().duration(200)` and a positioned HTML overlay.

Nov 17, 2025

Loading thumbnail…

activity-6_4

This bubble chart displays the relationship between average horsepower and average torque for various car makes, with a third dimension (highway MPG) represented by bubble size and car make encoded by color. Built with D3 v7, the visualization uses `d3.scaleLinear` for both axes, `d3.scaleSqrt` for bubble sizing, and `d3.scaleOrdinal` with the Tableau10 scheme for categorical coloring. Interactive tooltips appear on hover, showing the exact values for each car make. The chart reads from a local CSV file and renders as an SVG.

Nov 17, 2025

Loading thumbnail…

Activity-6_2

This visualization shows the distribution of movie ratings across six genres, using a stacked horizontal bar chart where each bar is divided into five rating categories from "Below 5.0" to "Above 8.5". The chart uses D3 v7 with an SVG rendering and a color legend to distinguish the rating segments. The data is hardcoded in the script, and the visualization includes an interactive tooltip that displays the percentage value of each segment when hovered over, with the segment slightly dimming on mouseover. The chart is built using `d3.stack()` for the stacked data structure, `d3.scaleBand()` for the y-axis genres, and `d3.scaleLinear()` for the x-axis percentages.

Nov 17, 2025

Loading thumbnail…

Activity-6_1.2

This bar chart displays the top 20 most populous countries in 2010, using horizontal bars to show each nation's population. The visualization is built with React and D3 v5, rendering to SVG. It loads CSV data from a GitHub gist, processes the 2010 column, and uses d3.scaleBand for the categorical y-axis and d3.scaleLinear for the numeric x-axis. Tooltips reveal exact values via SVG `<title>` elements, and the tick labels are formatted from scientific notation to billions.

Nov 16, 2025

Loading thumbnail…

Activity-6_1.1

A horizontal bar chart displays the population of the first ten countries from a CSV file for the year 2000. Built with React and D3 v5, the visualization uses `d3.scaleBand` for the categorical y-axis, `d3.scaleLinear` for the population x-axis, and renders SVG rectangles. A `d3.format` function converts large numbers to billions with an 'B' suffix, and tooltips appear on hover.

Nov 16, 2025

Loading thumbnail…

Activity 6.2

This is a horizontal bar chart displaying the populations of twenty countries in 2010, sorted by country name. The chart uses React components to render SVG elements, with D3 scales (`scaleBand`, `scaleLinear`) and formatting via `d3.format`. Data is loaded asynchronously from a CSV using `d3.csv`, and each bar includes a tooltip showing the population value. The code defines custom `AxisBottom`, `AxisLeft`, and `Marks` components to construct the visualization.

Nov 16, 2025

Loading thumbnail…

Fork of Activity 7 Q2

This example visualizes the average selling price of cars by year as a filled area chart. It loads a CSV dataset, parses price values expressed in Indian units (Lakh and Crore) into rupees, groups the data by year, and computes the mean price for each year. The visualization uses D3.js v7 with an SVG rendering approach, employing a linear x-scale for years and a linear y-scale for prices, rendered through the `d3.area()` generator. Axis labels and tick formatting clarify the currency in lakhs, making trends in average car prices readable over time.

Nov 16, 2025

Loading thumbnail…

Activity 7 Q1

This pie chart shows the distribution of cars by fuel type in a dataset loaded from a CSV file. The visualization displays three fuel categories as colored slices with labels, while a legend on the right lists each fuel type along with its corresponding car count. The chart uses D3.js v7 APIs including `d3.csv` for data loading, `d3.rollup` for aggregation, `d3.pie` for pie geometry, and `d3.arc` for arc paths. The SVG renderer draws the chart, and the code includes fake axis labels for fuel type and number of cars.

Nov 16, 2025

Loading thumbnail…

Fork of 6 Buddhas

Six overlapping Buddha silhouettes in violet with white outlines are arranged in a diagonal cascade across a black background over a photographic flower image. Each path uses identical SVG geometry with different translate and scale transforms, creating a layered, translucent composition. The visualization is built with React 16.10, rendering SVG paths directly through JSX, with the Buddha shape defined as a complex path string and the background set as an SVG image element.

Oct 13, 2025

Loading thumbnail…

Fork of 5 Buddhas

Five Buddhas rendered as dense, overlapping polygons in a black SVG canvas. The code uses React to map an array of numbers through nested iterations, generating hundreds of semi-transparent diamond shapes with randomized positions, fill colors, and rotations. A central Buddha silhouette path is drawn from hardcoded SVG coordinate data, scaled and translated into the center. No external visualization libraries are used; rendering is handled entirely through React’s JSX and SVG polygon and path elements.

Oct 2, 2025