I

iftequaruddin883@gmail.com

@Iftequ·18 public vizzes

Loading thumbnail…

Activity 7 question 1.2 iftequar

This visualization displays the distribution of anime ratings across different genres, with data sourced from a CSV file. It uses an area chart to show the value of five rating ranges, from "below 5.0" to "above 8.5", with each range represented as a differently colored, semi-transparent path. The D3.js code (v7) uses `d3.area()` and `d3.curveMonotoneX` to generate the areas, `d3.scaleBand` for the x-axis, and `d3.axisBottom` and `d3.axisLeft` for axes. The SVG rendering applies rotated x-axis labels and opacity to layer the ranges.

Loading thumbnail…

Activity7 question-1

A multi-pie chart visualization displays the distribution of movie genres across five rating categories, from below 5.0 to above 8.5. Each pie chart represents one rating bracket, with slices colored by genre and labeled with genre names. The code loads CSV data via `d3.csv` and uses `d3.pie` with `d3.arc` to generate the slices, rendering SVG graphics with `d3.v7`. Categories are processed into separate datasets before calling a `drawPieChart` function for each.

Loading thumbnail…

Activity6_task-1 question1

This example uses a horizontal bar chart to compare the year-2000 population of ten countries, with the bars ordered by country name. The chart is rendered as an SVG using React, and the code imports D3 functions like `scaleBand`, `scaleLinear`, `max`, and `format` from the `d3` package. It loads CSV data from a remote GitHub URL through a custom `useData` hook. The simple bar marks use D3's `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis, with a title tooltip generated via D3's `format` function.

Loading thumbnail…

Activity6_task4 question

This visualization displays a genre ratings bubble chart, showing the distribution of movie ratings across six genres and five rating brackets as proportionally sized red circles. The chart uses D3.js v7 to load data from a local CSV file, scales the bubble size based on proportion values using d3.scaleSqrt, and positions circles along categorical genre axes using d3.scalePoint. Interactive tooltips appear on mouseover to reveal exact values. The visualization uses an SVG-based rendering approach with d3.axisBottom for x-axis labeling and d3.axisLeft for the y-axis scale.

Loading thumbnail…

Fork of Activity6_task4 question

This example demonstrates how to import and use D3 v5 and local ES6 modules within a VizHub project. It renders the text “Hello VizHub!” into a div element using the `select` function from D3, while the message content is exported from a separate `myMessage.js` module. The page also defines a constant and a regular expression in the main script, and applies centered 12em font styling via an external CSS file. The code illustrates basic module bundling and D3 DOM manipulation.

Loading thumbnail…

Activity6_task4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes. Each bubble’s position encodes horsepower (x-axis) and torque (y-axis), while its size and color represent highway MPG and the car make, respectively. Built with D3 v7, the SVG chart includes hover tooltips, a legend for bubble size, and color-coded categories. Data is loaded from a CSV file via `d3.csv`, with linear scales for axes and bubble sizing, and an ordinal color scale using `d3.interpolateTurbo`.

Loading thumbnail…

task-3 question Activity-6

This scatter plot shows the relationship between horsepower and torque for various racing cars, with the highway fuel efficiency of each car encoded through a green color scale. The visualization loads a CSV dataset from GitHub and renders it as an SVG using D3 v6. It employs `d3.csv`, `d3.scaleLinear` for the axes, `d3.axisLeft` and `d3.axisBottom` for tick marks, and `d3.scaleSequential` with `d3.interpolateGreens` for the color mapping.

Loading thumbnail…

Activity6_task3.2

This example creates an interactive scatter plot using D3 v7 that visualizes the Iris dataset loaded from a GitHub-hosted CSV file. The chart displays sepal length on the x-axis and petal length on the y-axis, with different symbols representing each iris species. The visualization uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` with `d3.symbolsFill` for categorical shapes, and a custom legend built with `d3.symbol`. The code demonstrates modular ES6 imports, reusable chart components, and dynamic data fetching with `d3.csvParse` and `fetch`.

Loading thumbnail…

Activity6_task3.2

This example demonstrates a minimal D3.js setup within VizHub, showing how to load D3 from a CDN via UNPKG and import both D3 API functions and local ES6 modules. The code uses `select` from D3 to set the text content of a `div` element to "Hello VizHub!", with a message string exported from a separate `myMessage.js` module. Styling is applied through an external CSS file, which centers the text and sets a large font size. The example illustrates basic module import patterns and DOM manipulation with D3.

Loading thumbnail…

Activity6_Task3

This scatter plot visualizes the Iris dataset, mapping petal length and width on the x and y axes while coloring each point by species (setosa, versicolor, virginica). It uses D3 v6’s `csv`, `select`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load and render the data as SVG circles. The chart also encodes sepal dimensions into the ellipses’ `rx` and `ry` attributes, though the radius remains constant. Data is fetched from a GitHub-hosted CSV file.

Loading thumbnail…

Activity 6 iftequar-2

This stacked bar chart shows the average measurements of sepal length, width, petal length, and width for three iris species (setosa, versicolor, and virginica), with each bar segment colored by feature type. The visualization uses d3.stack to aggregate the data, d3.scaleLinear for the horizontal axis, and d3.scaleBand for the vertical species categories. Hovering over any segment reveals a tooltip with the precise mean value for that feature and species. The SVG rendering includes custom axis labels and styling from the included stylesheet.

Loading thumbnail…

Activity-6

This chart displays the populations of 20 countries in 2010 as a horizontal bar chart, ordering the bars by country name. It uses d3.scaleBand and d3.scaleLinear to position bars, with React components for axes and marks, rendering to SVG. Data is loaded via d3.csv from a GitHub raw dataset, with population values converted from a string column to numbers. The chart applies d3.format for compact tick labels, replacing 'G' with 'B' for billions.

Loading thumbnail…

Activity 6 Task-2

This visualization shows the distribution of iris flower counts across three species—setosa, versicolor, and virginica—using a simple bar chart. The code loads the Iris dataset via a remote CSV URL and uses D3 v6 APIs such as `d3.rollup`, `scaleBand`, `scaleLinear`, and axis functions to aggregate and display the data as colored rectangles in an SVG. Each bar is color-coded by species, with hover effects that increase opacity. The chart includes labeled axes for species and count, rendered within a full-window responsive layout.

Loading thumbnail…

Fork of 6 Buddhas(IFTEQUAR)

This example renders six overlapping Buddha silhouettes in violet with white outlines, scaled and offset across the viewport against a floral background image. Built with React and SVG paths, each figure uses a hardcoded `d` attribute from a shared path dataset, transformed via `translate` and `scale` operations. The code applies React’s `createElement` through JSX, with styling controlled by CSS in the HTML template, producing a layered, repeating visual composition.

Loading thumbnail…

6 Buddhas

Six Buddhas overlap in a cascading arrangement, each rendered as a violet SVG path outline with a white stroke against a floral background image. The React application defines an array to generate repeated Buddha silhouettes, applying SVG transforms with varying translation and scale values to position them. The paths are hardcoded coordinates, and the visualization uses React’s component model to render the SVG elements in the browser.

Loading thumbnail…

5 buddhas

Five buddhas is a generative SVG artwork built with React and rendered through ReactDOM. The code creates a dense, chaotic field of overlapping rotated polygons, each colored with random RGB values and positioned using a nested array map. A large, detailed Buddha path is embedded and scaled within the composition, while the background features a flower image and the page uses a custom script bundle. The visualization explores randomness and repetition against a structured religious icon.

Loading thumbnail…

5 Buddhas

A generative visualization titled "5 Buddhas" displays an abstract, geometric composition of scattered polygons and an intricate Buddha figure rendered in vibrant, saturated colors against a black background. The piece is built with React and renders to SVG, using JavaScript's `Math.random()` to generate polygon positions, fill colors, and transformations, creating an unpredictable, dynamic pattern. A detailed SVG path defines the central Buddha silhouette. The code imports React and ReactDOM, mapping nested arrays to produce a dense field of shapes.

Loading thumbnail…

6 Buddhas

Six overlapping Buddha silhouettes, rendered in black and white, emerge from densely layered circles of varying colors and sizes. The composition uses React to generate over a thousand SVG circle elements at random positions, creating a textured, pointillist backdrop. Array mappings in JavaScript drive the loop that places each circle, while the Buddha paths are drawn using SVG path data with stroke and fill properties, resulting in a visually rich, abstract interpretation of the classic figure.