Skip to main content
Log in
A

Abrarb702@gmail.com

@Abrarb702·17 public vizzes

Loading thumbnail…

Area Chart

This area chart visualizes the number of US students enrolled at the University of North Texas from 2010 to 2018. The SVG rendering uses d3.scaleLinear for both axes, d3.line and d3.area with a curveBasis interpolation to smooth the trend, and d3.axisBottom and d3.axisLeft with tick marks. Data is loaded via d3.csv from a GitHub gist, with year and student counts parsed as numbers. The chart includes labeled axes and a styled area fill in seagreen.

Nov 6, 2024
Loading thumbnail…

Pie Chart

This example presents a pie chart depicting the total sales distribution across item categories, sourced from a CSV file. The visualization includes a legend, a title, and a subtitle, with each slice labeled by its category and dollar amount. Built with D3.js v6, the code uses `d3.pie()` and `d3.arc()` to generate the chart, `d3.rollups` to aggregate the data, and `d3.scaleOrdinal` with `d3.schemeCategory10` for coloring. The chart is rendered as SVG elements, with annotations and labels positioned using arc centroids.

Nov 6, 2024
Loading thumbnail…

Activity6_Q_3

This scatter plot visualizes the relationship between the percentage of ratings in the 5.0-6.5 range (x-axis) and the 6.5-7.5 range (y-axis) across different genres from a CSV dataset. Each data point is a colored circle representing a genre, with colors assigned via d3.scaleOrdinal. The code loads data using d3.csv, scales axes with d3.scaleLinear, and renders the visualization as an SVG using d3.select, d3.axisLeft, and d3.axisBottom, with axis labels styled via CSS.

Oct 25, 2024
Loading thumbnail…

Activity_6_question-1.1

This visualization displays a horizontal bar chart comparing the populations of ten countries in the year 2020, sourced from a CSV file hosted on GitHub. The example demonstrates how to integrate D3 v5 within a React component, using `scaleBand` for the categorical y-axis, `scaleLinear` for the quantitative x-axis, and `format` for axis tick labels (e.g., converting billions to "B"). SVG rectangles render the marks, with tooltips showing precise values via the native `<title>` element.

Oct 24, 2024
Loading thumbnail…

Fork of Activity_6_question-1.2

This example visualizes the 2020 populations of 20 countries as a horizontal bar chart, using SVG rectangles rendered through React components. It loads data from a GitHub-hosted CSV file via d3.csv, then maps each country’s population (converted from thousands) to bar widths using d3.scaleLinear, while d3.scaleBand positions the categorical y-axis labels. D3’s format method abbreviates large numbers, and custom AxisBottom and AxisLeft components generate styled ticks. The chart is built with React functional components and d3 v5, featuring green bars and blue tick lines.

Oct 24, 2024
Loading thumbnail…

Activity_6_Question_4

This bubble chart displays the relationship between house size, price, and rating for five sample houses. The x-axis maps square footage, the y-axis maps price in thousands, and bubble radius encodes each house’s rating. Built with D3.js v6, it uses `d3.scaleLinear` for all three dimensions and renders circles as SVG elements. Interactive tooltips appear on mouseover, showing the house’s name, size, and price. The chart loads inline data matching the provided `bubblechart.csv` structure, with axes labeled and a steelblue fill for each bubble.

Oct 22, 2024
Loading thumbnail…

Fork of Activity_6_Question_2

This stacked bar chart shows the percentage distribution of marks across five mark ranges for five students, with each bar segment representing a proportion that sums to 1. Designed with D3 v7, the visualization uses `d3.stack()` and `d3.scaleOrdinal()` for color encoding, while `d3.scaleBand()` positions students on the y-axis. Hovering over any segment triggers a tooltip displaying the exact percentage for that mark range, using the `mousemove` event and D3’s formatting helper. The SVG rendering applies custom axis labels and a manual legend, with data loaded from a CSV file.

Oct 22, 2024
Loading thumbnail…

Activity_6_Question_2

This stacked bar chart visualizes the distribution of rating categories within different subjects, showing how each subject’s marks are proportionally divided across five bins (e.g., below 35, 36-45, up to 75-100). It uses `d3.stack` to layer the rating proportions per subject on the y-axis, with a linear x-axis representing percentages. Interactive hover events display a tooltip for precise percentage values. The chart is rendered as SVG and relies on `d3.axisBottom` for the x-axis, `d3.axisLeft` for the y-axis, and a custom `d3.select`-based tooltip, with styling via CSS.

Oct 22, 2024
Loading thumbnail…

Activity_6_Task_4

This interactive bubble chart shows the correlation between average horsepower, torque, and highway MPG across 31 car makes, with bubble size encoding MPG and color distinguishing each brand. Hovering reveals a tooltip with the make name. Rendered in SVG with D3 v7, it uses `d3.scaleLinear` for axes and bubble sizing, `d3.scaleOrdinal` with `d3.interpolateTurbo` for colors, and mouse event handlers for tooltip interaction. Data comes from the included `bubblechart.csv`, with a legend for MPG values and make labels.

Oct 22, 2024
Loading thumbnail…

Activity_6_Task3.2

This interactive scatter plot shows the relationship between petal length and sepal length for three iris species, using different symbol shapes to encode species. The visualization uses D3 v7 to render the plot, with axes, labels, and a legend built through modular functions. Data is fetched from a remote CSV containing the classic iris dataset, which is parsed and loaded into the chart. The plot encodes the species dimension with a shape scale from D3's `symbolsFill` palette.

Oct 22, 2024
Loading thumbnail…

Activity_6_Task_3

This scatter plot visualizes the Iris dataset, mapping petal length and width on the x and y axes, with points colored by species (setosa, versicolor, virginica). It uses D3 v6's `scaleLinear`, `extent`, `csv`, and `axisLeft`/`axisBottom` APIs to load data from a GitHub-hosted CSV, compute scales, and render an SVG with circular markers whose fill colors are assigned via a switch statement based on the species field.

Oct 22, 2024
Loading thumbnail…

Activity_6_Task_2

This stacked bar chart visualizes the distribution of IMDb rating categories across movie genres, showing how the proportion of high versus low ratings varies by genre. Each horizontal bar represents a genre, subdivided into five rating brackets from “below 5.0” to “above 8.5,” with percentages summing to 100%. Built with d3.v7 and rendered as SVG, the chart uses `d3.stack()` to compute stacked segments and `d3.scaleOrdinal` for color encoding. A mouseover tooltip displays precise percentage values per segment, enhancing data readability. The data comes from a CSV file, with axes labeled via `d3.axisBottom` and `d3.axisLeft`.

Oct 22, 2024
Loading thumbnail…

Activity_6_Task_2

This example demonstrates a minimal D3.js integration within a VizHub project, displaying a centered “Hello VizHub!” message. It shows how to load D3 v5 via UNPKG, import the `select` function from the D3 module, and use a local ES6 module (`myMessage.js`) to supply text content. The code applies a CSS style for large, centered typography and supports regex and variable declarations. The rendering approach uses the `select('#message')` API to set the DOM element’s text directly.

Oct 22, 2024
Loading thumbnail…

Acrivity_6_Question-1

This example demonstrates basic D3.js DOM manipulation by setting the text content of a message div to “Hello VizHub!”. It imports the `select` function from D3 and a local `message` string from an ES6 module, then applies that string to the page. The code also shows local CSS styling and a regular expression literal, though neither affects the visible output. D3 is loaded from a CDN via UNPKG, and the example serves as a minimal template for combining external libraries with modular JavaScript.

Oct 22, 2024
Loading thumbnail…

Activity_6Task_1

This example shows a horizontal bar chart of the populations of 30 countries in 2020, ordered by country name along the y-axis. Each bar’s length encodes the population value, with an axis label reading “POPULATION-2020” and formatted tick values using D3’s `format` function to abbreviate billions as “B”. The visualization uses React components (AxisBottom, AxisLeft, Marks) to render SVG elements, with scales created via `d3.scaleBand` and `d3.scaleLinear`. Data is loaded asynchronously from a remote CSV file using `d3.csv` in the custom `useData` hook, and countries are sliced to the first 30 rows.

Oct 22, 2024
Loading thumbnail…

Buddha 6

The visualization displays a grid of Buddha images arranged three per row, overlaid on a floral nature background. It uses React and ReactDOM to generate an SVG canvas containing random circles and multiple Buddha silhouettes rendered as SVG path data. The images and shapes are positioned using JavaScript’s Math.random() values, with the grid defined via CSS grid properties.

Oct 19, 2024
Loading thumbnail…

Buddha 5

The visualization displays a kaleidoscopic composition of thousands of semi-transparent, randomly rotated and colored polygons, created by mapping three nested arrays over a range of integers. The overlapping shapes form a dense, fragmented pattern against a black background, with the central focus being a large, intricate SVG path depicting a Buddha silhouette. Built with React and rendered via SVG, the code uses `Math.random()` to generate the polygon positions, colors, and rotation angles, while the Buddha figure is defined by a detailed path data string.

Oct 19, 2024