rahman.mehmood2002@gmail.com

@RahmanMehmood·10 public vizzes

Q2_Activity7.1

This area chart visualizes yearly global CO₂ emissions in million metric tons, sourced from a CSV file via a GitHub Gist URL. The chart uses a steelblue semi-transparent fill to depict the trend over time. Constructed with D3 v6, the code parses the data, sets up linear scales for both axes, and generates the area shape using the `d3.area` API. It renders axes with `d3.axisBottom` and `d3.axisLeft`, and applies custom labels, all within an SVG canvas.

Oct 31, 2024

Loading thumbnail…

Q1_Activity7.1

This pie chart displays world population distribution by country, loading data from a GitHub Gist CSV file and rendering it as an SVG visualization. The code uses d3.csv to fetch the dataset, d3.pie() to compute arc angles from population values, and d3.arc() to generate the path geometry for each slice. Each slice is colored using d3.scaleOrdinal with d3.schemeCategory10, with population values displayed as white labels at arc centroids. A custom legend on the right lists countries alongside colored rectangles, and the chart includes a bold title above the visualization.

Oct 31, 2024

Loading thumbnail…

Activity_7.1Tutorial

This animated scatterplot, built with D3.js, visualizes the classic Iris flower dataset, showing how different species cluster across various measurement combinations. It cycles through four different x-axis attributes—petal width, sepal width, petal length, and sepal length—while keeping sepal length on the y-axis, with colored circles distinguishing setosa, versicolor, and virginica. The visualization uses D3's `csv` loader, `scaleLinear`, and `axisBottom`/`axisLeft` utilities, with a custom reusable `scatterPlot` module. It renders as an SVG and updates its axes and labels every few seconds via `setInterval`.

Oct 30, 2024

Loading thumbnail…

Activity_7.1

This example demonstrates a minimal VizHub project that displays the text "Hello VizHub!" centered on the page. It shows how to load D3.js from a CDN and use ES6 modules for local code organization. The code imports the `select` function from D3, imports a message string from a separate `myMessage.js` module, and sets the text content of a div element. The styling is handled through an external CSS file that centers the text and sets its font size.

Oct 30, 2024

Loading thumbnail…

Activity6_Task3

This scatter plot displays the relationship between average temperature and rainfall across multiple cities, using distinct colors and symbol shapes to differentiate each city. Data is loaded from a remote CSV file and rendered as an SVG using D3 v7. The visualization employs `d3.scaleLinear` for both axes, `d3.scaleOrdinal` with `d3.schemeCategory10` for colors, and `d3.symbol` types for the data points. A legend and axis labels are included to clarify the mapping.

Oct 19, 2024

Loading thumbnail…

Activity6_Task4

A bubble chart visualizes 25 U.S. cities by plotting their population on the x-axis and area in square kilometers on the y-axis, with bubble size encoding GDP and color distinguishing each city. Hovering shows a tooltip with city details. Built with D3 v7, it uses `d3.scaleLinear` for axes and size, `d3.scaleOrdinal` with `d3.interpolateTurbo` for colors, and SVG circles with mouse event handlers. Data comes from `citydata.csv`, rendered as an animated SVG with a legend.

Oct 19, 2024

Loading thumbnail…

Activity6_Task1

This bar chart displays the population of 20 countries in 2010, sorted by country name on the vertical axis with population values extending horizontally. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis, with SVG rendering. The chart loads CSV data from a GitHub repository using D3’s `csv` function, and includes formatted tick labels that abbreviate large numbers (e.g., converting "G" to "B" for billions) along with tooltips on each bar. The code demonstrates modular components for axes and marks, with styling applied through CSS classes.

Oct 18, 2024

Loading thumbnail…

Activity6_Task2

This stacked bar chart displays the average horsepower, torque, and highway MPG for various car makes, sorted by total value. The chart uses a horizontal layout with segments colored in shades of orange to represent each specification. It is built with D3 v7 and renders as an SVG, employing `d3.stack()` for the stacked data transformation, `d3.scaleOrdinal` for color mapping, and `d3.axisBottom` and `d3.axisLeft` for axes. The data is loaded from a CSV file and processed with numeric conversion.

Oct 18, 2024

Loading thumbnail…

Question3_Buddha

A React and SVG composition overlays a green floral background with a single, semi-transparent Buddha path repeated through nested mappings. The inner `null` elements render random-colored squares at scaled positions, while a large SVG path stores the Buddha’s outline. The code uses React’s `map` functions, `Math.random()` for colors and placement, and SVG `<g>` transforms for scaling, producing layered, overlapping silhouettes.

Oct 17, 2024

Loading thumbnail…

5 Buddhas

Five overlapping Buddha silhouettes form a chain of repeated polygon shapes, each rendered with a random RGB fill and rotated via SVG transform. The visualization layers multiple nested arrays to generate a dense, colorful mandala-like composition against a black background. Built with React and ReactDOM, it uses SVG polygons and paths, with the Buddha image embedded as a path data string and randomly positioned geometric elements.

Oct 12, 2024