I

Ikram Mohammed

@Ikram712·18 public vizzes

Loading thumbnail…

A t_Line

This area chart visualizes the relationship between actual price and rating for Amazon products, using a smooth monotone curve to connect data points. The chart encodes price on the x-axis and rating on the y-axis, with a steelblue filled area beneath the line. Built with D3 v6, the visualization uses `d3.csv` to load data from a GitHub gist, `d3.area` with `curveMonotoneX` for the path, and `d3.axisBottom` and `d3.axisLeft` for the scales. The SVG rendering fills the viewport with responsive dimensions.

Loading thumbnail…

Act7_Pie

This example displays a pie chart of the top 10 countries by 2022 population, with all remaining countries aggregated into an “Others” slice. Using d3.pie and d3.arc, it generates the chart from CSV data fetched via d3.csv, processes and sorts the dataset, and renders SVG paths with colors from d3.scaleOrdinal and schemeCategory10. A legend is drawn beside the chart using d3.selectAll and attribute transforms.

Loading thumbnail…

Act7

This animated scatter plot visualizes the Iris dataset, cycling through four feature pairs (petal width, sepal width, petal length, and sepal length) on the x-axis every few seconds. It colors each species—setosa, versicolor, and virginica—with distinct markers and includes axis labels, a legend, and a title. The visualization uses D3.js (v6) with the `csv` parser, `scaleLinear`, `axisLeft`, and `axisBottom` APIs, rendering as an SVG with a repeating `setInterval` that updates the plot’s x-scale and data mapping.

Loading thumbnail…

Task 4 Quest

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for various car makes. Each circle’s position encodes horsepower and torque on the x- and y-axes, while its radius represents highway MPG and its color denotes the car manufacturer. The visualization uses D3.js v7’s `scaleLinear`, `scaleOrdinal`, and `d3.interpolateTurbo` for color mapping, alongside custom tooltip handlers for interaction. Data is loaded from a CSV file, and the chart also includes size and categorical legends to aid interpretation.

Loading thumbnail…

Task 4 Quest

This bubble chart shows the correlation between average horsepower, torque, and highway MPG across 31 car makes, using D3.js v7 with SVG and animation. Each circle’s horizontal position maps to horsepower, vertical position to torque, and radius to highway MPG, while color encodes the vehicle make via an ordinal scale with interpolated Turbo colors. The chart includes an interactive tooltip that displays the make on hover, and a legend explains the bubble-size scale. Data is loaded from a CSV file, with axes, labels, and styling built using D3’s scaleLinear, axisBottom, and axisLeft methods.

Loading thumbnail…

Task 4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes. Each circle’s x-position maps to horsepower, y-position to torque, and its radius encodes highway MPG, while color distinguishes the manufacturer. Rendered as SVG with D3 v7, the visualization uses `d3.scaleLinear` for axes and bubble size, `d3.scaleOrdinal` with an interpolated turbo color palette for categories, and a custom tooltip on mouseover. Animated hover effects and a dual legend for MPG values and color categories are included. The data comes from a CSV file.

Loading thumbnail…

Task3Ques

This scatter plot visualizes the relationship between model year and price for a cars dataset loaded from a GitHub-hosted CSV file. Each car is represented as a blue circle positioned along the x-axis for model year and y-axis for price. The visualization uses d3.csv for data loading, d3.scaleLinear for both axes, and d3.axisLeft plus d3.axisBottom to render the scales. The SVG canvas fills the browser window, with circles drawn using D3’s data join pattern and attributes set for radius and fill.

Loading thumbnail…

Task3Ques

This scatter plot visualizes the Iris dataset, mapping sepal length on the x-axis and petal length on the y-axis, with each species represented by a distinct symbol shape. A legend on the right identifies the three species categories. The visualization is built with D3 v7, using d3.scaleLinear for positioning, d3.scaleOrdinal with d3.symbolsFill for shape encoding, and d3.axisLeft and d3.axisBottom for the axes. Data is loaded from a remote CSV file and parsed with d3.csvParse.

Loading thumbnail…

Task3.2

This scatter plot visualizes the Iris dataset, showing sepal length against petal length. Points are colored and shaped by species, with a legend mapping shapes to the three iris species. The visualization is built using D3 v7, employing force-directed layout principles through `d3.scaleLinear` and `d3.scaleOrdinal` for scales. The chart fetches data from a remote CSV, parses it with `d3.csvParse`, and renders marks via `d3.symbol` with axes generated by `d3.axisLeft` and `d3.axisBottom`.

Loading thumbnail…

Task 3

This scatter plot visualizes the Iris dataset, mapping petal length and petal width for individual flowers while using color to distinguish the three species. Built with D3 v6, it renders circular SVG marks positioned by linear scales. The code loads CSV data from a GitHub repository, parses numeric fields, and draws axes using `axisLeft` and `axisBottom`. The visualization encodes sepal dimensions as attributes on each circle, though these are not visually mapped to size or shape.

Loading thumbnail…

Task2Ques1

This stacked bar chart shows annual price trends for five car models from 2020 to 2024, using color-coded segments to compare values across years and models. It loads CSV data via d3.csv, builds the chart with d3.stack, scales with d3.scaleBand and d3.scaleLinear, and assigns colors using d3.scaleOrdinal with d3.schemeCategory10. The SVG renders axes via d3.axisBottom and d3.axisLeft, and includes a legend generated from the data columns.

Loading thumbnail…

Task 2

This stacked bar chart shows the percentage distribution of IMDb ratings across six movie genres, where each bar segment represents a rating level from "below 5.0" to "above 8.5." The visualization uses d3.stack to compute cumulative values and d3.scaleOrdinal for color mapping. Hovering over a bar segment displays a tooltip with the precise percentage. The SVG is rendered with d3.v7, using d3.axisBottom and d3.axisLeft for axes, and the data is loaded from a CSV file.

Loading thumbnail…

Task1Ques2

This bar chart displays the population of 20 countries in 2010, sorted along the y-axis with horizontal bars extending to represent population values. It uses React with D3 v5 to load CSV data via `d3.csv`, and renders SVG marks through the `AxisBottom`, `AxisLeft`, and `Marks` components. The `scaleBand` and `scaleLinear` define the axes, while `format('.2s')` converts tick labels to billions, and tooltips appear as native SVG `<title>` elements.

Loading thumbnail…

task1

This bar chart shows the population of 30 countries in 2020. Built with React and D3 v5, it uses `d3.scaleBand` and `d3.scaleLinear` to map country names and populations to SVG rectangles. Data is loaded from a CSV file via `d3.csv` and formatted using `d3.format`. Axes are custom-rendered, with hover tooltips displaying the formatted population values.

Loading thumbnail…

Task1Ques1

This visualization displays the population of ten countries in the year 2000 using a horizontal bar chart. The chart uses React with D3.js for data processing and scales, rendering SVG elements through the reusable AxisBottom, AxisLeft, and Marks components. Population values are parsed from a CSV file using D3’s `csv` function, formatted using `d3.format`, and displayed as green bars with tooltips, while the y-axis lists country names and the x-axis uses a custom tick format.

Loading thumbnail…

Buddha

The visualization depicts an ornate, layered portrait of the Buddha constructed from hundreds of overlapping, semi-transparent circles. Each circle’s position, size, and color are generated through repeated nested loops and randomized mathematical functions (e.g., `Math.random`), producing a dense, colorful mandala-like effect. The React application renders these shapes as SVG elements, while a separate, detailed path outlines the Buddha’s form. The code also sets a black page background with a floral image and applies a 45-degree rotation transform to each circle, creating a dynamic, textured composition.

Loading thumbnail…

MMD

A monochrome Buddhist statue is rendered in SVG alongside a dense scatter of small, randomly rotated diamond polygons that are generated in triply nested loops using `Math.random()`. The polygons are colored with bright RGB values and overlaid with high opacity, creating a colorful, layered aura around the central figure. The visualization uses React for component structure and renders both the intricate path data and the generative shapes into a black-background SVG canvas.

Loading thumbnail…

MMD

A dense scatter of small, colored circles overlaps a detailed Buddha silhouette path rendered in SVG. The circles are positioned using nested array mappings and Math.random, creating a chaotic, colorful field with high opacity. The Buddha path is drawn with a stroke, illustrating a contrast between random data points and structured line art. The visualization uses React to render SVG elements within a black-background HTML page.