A

AAL FORHAD

@alforhad·17 public vizzes

Loading thumbnail…

Social network graph

This example displays a small social network of six named individuals and seven weighted connections using a force-directed graph. The SVG rendering is driven by the D3 v4 `d3.layout.force` API, with nodes as blue circles and edges as blue lines whose stroke width reflects link weight. Node positions update on each tick event, and drag interaction is enabled via `force.drag`. Data is loaded from an external JSON file, and the layout uses gravity, charge, and distance parameters to position the elements.

Loading thumbnail…

Family tree (3 generations)

This interactive family tree visualization displays three generations of a family using a hierarchical node-link diagram. It loads data from a JSON file and renders the tree structure with D3.js v3, where each family member appears as a colored, labeled rectangle. The visualization supports zooming and panning through a custom zoom behavior, and it includes tooltips that appear on hover. The code uses D3's layout tree algorithm to position nodes and SVG paths to draw the connecting links, with animation to transition between states.

Loading thumbnail…

world map with the world Topojson data

This example shows a world map rendered with an equirectangular projection overlaid with graticules and colored interiors. It visualizes landmasses from the world-atlas TopoJSON dataset, filled in green, alongside a light gray sphere background and teal interior boundaries. The visualization uses d3.geoPath, d3.geoEquirectangular, and d3.geoGraticule to project and draw geographic features, with topojson’s feature and mesh functions converting the source data. The React-based code renders the map as SVG elements, with styling applied via CSS classes for each layer.

Loading thumbnail…

Bangladesh Map

This example shows a choropleth-style map of Bangladesh, displaying the country’s districts with green fills and teal borders for internal boundaries. The visualization renders as an SVG using React, with the `geoMercator` projection and `geoPath` from D3 v5. TopoJSON data is loaded from a GitHub repository and converted to GeoJSON using the `feature` and `mesh` functions. The projection is fitted to the map extent, and district paths are drawn individually, with interior mesh lines separating administrative regions.

Loading thumbnail…

Reusable D3 Scatter Plot

This example visualizes the classic Iris dataset in an animated scatter plot, encoding sepal and petal measurements across four dimensions while color-coding species. A reusable D3 module (`scatterPlot`) builds the plot using `scaleLinear`, `axisLeft`, and `axisBottom`, with circles that update every two seconds to cycle through measurement pairs. The SVG rendering includes a title, axis labels, and a color-coded legend for Iris species.

Loading thumbnail…

Reusable D3 Scatter Plot

This interactive scatter plot displays the Iris dataset, cycling through four different feature pairings on the x-axis—petal width, sepal width, petal length, and sepal length—while keeping sepal length on the y-axis. Each species (setosa, versicolor, virginica) is color-coded with red, green, or blue markers. Built with D3 v6, the visualization uses a reusable `scatterPlot` module with `scaleLinear`, `axisLeft`, and `axisBottom` to render axes, while a `setInterval` loop updates the x-value mapping every few seconds. The JSON data is loaded via `d3.csv` and drawn as SVG circles with animated transitions.

Loading thumbnail…

Average Temperature of Denton(9th to 23th March 2022)

This visualization shows the average temperature in Denton from March 9th to 23rd, 2022, using an area chart. The x-axis displays dates while the y-axis represents temperature, with a smoothed curve generated using `curveBasis`. The chart is rendered as an SVG using D3 v5 within a React framework. Data is loaded from a GitHub-hosted CSV file and parsed with `csv`, with scales created via `scaleTime` and `scaleLinear`, and axes drawn using `axisBottom` and `axisLeft`.

Loading thumbnail…

Pie Chart (with labels) with d3

This interactive pie chart visualizes the top 10 US states by GDP, with labeled slices displayed within an SVG. The chart uses d3.pie, d3.arc, and d3.scaleOrdinal to generate and color the wedges, while mouseover events trigger tooltips that display each state’s name and value. The d3.v4 library powers the hover interactions, which adjust slice opacity and show a text-based tooltip with a background rectangle. Data is loaded from an external CSV file, and the visualization is rendered within a React component.

Loading thumbnail…

Average Temperature of Denton(9th to 23th March 2022)

This visualization shows the average temperature in Denton from March 9th to 23rd, 2022, as a smooth line chart. The x-axis displays days of the week, while the y-axis shows temperature values. Built with React and d3 v5, the code uses `scaleTime` and `scaleLinear` for axes, `line()` with `curveNatural` for the path, and fetches CSV data via `d3.csv` from a GitHub gist. The SVG rendering is composed of custom React components for axes and marks, with CSS styling for ticks and labels.

Loading thumbnail…

Interactive bar chart based on categorical data

This interactive bar chart displays GDP growth rates for ten U.S. states, ordered from highest to lowest. The chart uses D3.js v5 within a React framework to render SVG bars, axes, and labels. The value on the y-axis represents GDP growth percentage, while the x-axis lists state names. The visualization includes a hover interaction: mousing over a bar highlights it and draws a horizontal dashed line at that bar's value, while showing divergence percentages between the hovered state and all others. A CSS grid and source line complete the presentation.

Loading thumbnail…

Create a 3D Bar Chart with d3

This example visualizes the top 10 US states by GDP as an interactive 3D bar chart using d3-x3d and the x3dom WebGL library. The bars, colored with a gradient, represent state GDP values from a CSV dataset. The code uses the d3.x3d.chart.barChartMultiSeries() API to render the 3D scene, while d3.csv loads the data into a React component that slices the results to the top ten states. The visualization runs in a standard HTML page alongside a React starter alternative.

Loading thumbnail…

3D scatter plot of Iris Data

This interactive 3D scatter plot visualizes the Iris dataset, displaying sepal and petal measurements as distinct sets of markers. The code loads the data from a remote CSV file using `d3.csv` and constructs two `scatter3d` traces, one for each flower part, with configurable marker size, opacity, and line styling. It relies on Plotly’s JavaScript API (`Plotly.newPlot`) to render the chart into an HTML `<div>`, with D3.js handling the data fetching and row unpacking. The layout removes all margins for a clean presentation.

Loading thumbnail…

Fork of 6 weeks Covid-19 cases of 3 Counties, Ohio

The visualization is a heatmap displaying daily COVID-19 case counts for Butler County, Ohio, over six weeks. It shows the number of cases for each day of the week (D1–D7) across the six weeks (W1–W6), with color intensity representing case volume. The graphic uses D3.js v6, specifically `d3.csv` to load the data and `d3.scaleBand` for the axes. A tooltip appears on hover, revealing the county, date, and exact case count. The color scale interpolates between cyan and blue to denote case-count ranges.

Loading thumbnail…

ICE 6 Task 2

This scatter plot visualizes the Iris dataset, mapping petal length and width on the x- and y-axes while encoding sepal dimensions through elliptical radii and species via color. The SVG rendering uses D3 v6 scales, axes, and data joins to place circles with fixed radius but variable rx and ry attributes, creating ellipses that reflect sepal measurements. Axis labels identify the variables, and the code explicitly parses numeric fields from the CSV source before applying linear scales.

Loading thumbnail…

ICE-6

This visualization presents a horizontal bar chart of the top 10 US states by GDP, with the state flag displayed beside each bar. The React component uses hooks to load CSV data via d3.csv and scales it with d3.scaleBand and d3.scaleLinear, rendering SVG elements. State flags are fetched from an external GitHub repository and inserted as SVG images, while gridlines and axis ticks are generated from xScale.ticks.

Loading thumbnail…

ICE 5

This visualization displays a collection of decorative SVG shapes, primarily stylized music notes and audio-related icons, set against a pastel gradient background. The layout includes a large central audio waveform rendered as vertical bars alongside smaller icons depicting people and musical symbols. The code uses D3.js version 7 to embed these pre-defined SVG paths, while the overall styling and positioning are handled through standard CSS and SVG attributes within a React framework.

Loading thumbnail…

Smiley Face ICE 4

A React component renders a classic smiley face as an SVG, with a yellow circle, white eyes with black pupils, and a curved mouth. The visualization uses React to manage the SVG elements and D3's `arc` function to generate the mouth path. The face is centered on a 960 by 500 canvas, with fixed positions for the eyes and mouth defined by constant values. The code demonstrates a simple integration of React and D3 v5 for static vector graphics.