F

fouzanuddin

@fouzanuddin·26 public vizzes

Loading thumbnail…

Network Graph--Fouzan

A network graph displays seven people connected by weighted links, with node sizes and link thickness reflecting the weight values from a JSON file. The visualization uses D3 v4’s force-directed layout, with nodes rendered as red circles and labeled with names. Users can click and drag nodes to reposition them, while the simulation updates positions continuously. The graph employs SVG elements for links and nodes, with link stroke width scaled by the square root of each connection’s weight.

Loading thumbnail…

Fork of ICE-8 Social Network Graph

This fork of ICE-8 renders a social network as a force-directed graph in SVG. It shows ten named nodes connected by green links, with edge thickness proportional to each link's weight. The visualization uses the D3 v2 `d3.layout.force` API for simulation and dragging, and loads node and link data from an external `network.json` file. Node circles and labels are colored via CSS classes, while link positions update on each simulation tick.

Loading thumbnail…

Fork of Family Tree ICE-8

This example shows a family tree rendered as a hierarchical node-link diagram using D3.js v5 and SVG. The code uses `d3.hierarchy` and `d3.tree` to compute node positions from nested data, with `d3.select` creating SVG groups, circles, and text labels. Curved link paths are drawn with a cubic Bézier command, while each node’s circle radius encodes a numeric value, and stroke and fill colors come from the data’s `type` and `level` fields. The data is embedded directly in the script as a JavaScript object.

Loading thumbnail…

Fork of ICE8 USA Map

This fork of the ICE8 USA Map displays a choropleth of U.S. states, colored in light sea green with hover states highlighting each state in orange-red. It renders an SVG map using D3 v5, the `geoAlbersUsa` projection, and `d3.geoPath` to draw state boundaries from TopoJSON data loaded from the us-atlas repository. State name tooltips appear on hover via appended `title` elements. The code imports `select`, `json`, `geoPath`, and `geoAlbersUsa` from D3, along with `feature` from TopoJSON.

Loading thumbnail…

Fork of ICE8 - World Map

This example displays a world map rendered in an SVG using the Natural Earth projection. It loads country boundaries from a TopoJSON file via `d3.json` and converts them with `topojson.feature`. The code applies `d3.geoPath` and `d3.geoNaturalEarth1` to draw both a sphere outline and country shapes, which fill with pink and brighten to maroon on hover through CSS. The visualization demonstrates basic geographic data mapping with straightforward styling.

Loading thumbnail…

Area chart

This example shows yearly car sales as a smooth area chart, with time on the x-axis and sales volume on the y-axis, including labeled axes and a title. The chart is rendered as an SVG using D3 v5, leveraging the `area` generator with a basis curve to create the filled shape. Data is loaded from a CSV file via `csv()`, with scales (`scaleTime`, `scaleLinear`) and axes (`axisBottom`, `axisLeft`) applied to map the values and draw the grid lines and labels.

Loading thumbnail…

Area chart

This area chart visualizes the average likes for TikTok accounts from 2009 to 2019, using a smoothed curve to show trends over time. The SVG rendering uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `area`, `line`, `curveBasis`, `axisLeft`, and `axisBottom` to generate the chart. The visualization combines a red line with a light blue filled area beneath it, with labeled axes for Account and Likesavg. Data is loaded from a remote CSV file and parsed before rendering.

Loading thumbnail…

Fork of Line Chart

This fork of a line chart displays the relationship between a TikTok video's rank and its average number of comments, plotting the data as a single red line. The visualization uses D3 v5 to render an SVG graphic, with `scaleTime` and `scaleLinear` for the axes, `axisBottom` and `axisLeft` for tick marks, and a `line` generator to create the path. The chart is titled "tiktok rank to comments" and relies on data from a CSV file loaded via D3's `csv` function, with the raw data fetched from a GitHub gist.

Loading thumbnail…

Fork of Line_chart_facebook_users

This line chart visualizes the average number of likes per account across years, based on a TikTok dataset loaded from a GitHub gist. The code defines the chart margins and scales, plotting the year on the x-axis and average likes on the y-axis. It uses `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.line` to construct the visualization within an SVG. The chart is rendered with a blue polyline and styled axis labels, with the data's numeric values converted from strings for accurate plotting.

Loading thumbnail…

ICE-7 Pie Chart

This pie chart visualizes the average number of comments for TikTok users, with each slice sized by the `Commentsavg` value from a CSV file loaded via `d3.csv`. The chart uses `d3.pie` and `d3.arc` to generate SVG paths, with a custom color scale for slices. A legend, built with SVG rectangles and text, labels each account and displays its comment average formatted in thousands (e.g., “1.2K”). The code imports specific D3 v5 modules (`select`, `pie`, `arc`, `scaleOrdinal`) and renders entirely in SVG.

Loading thumbnail…

Reusable _scatter_Plot

This reusable scatter plot visualizes the Iris dataset, showing species grouped by color with animated cycling of X and Y axis attributes every two seconds. Implemented using D3 v6, the code employs `scaleLinear`, `scaleOrdinal`, `axisLeft`, `axisBottom`, and `csv` for data loading. The SVG renderer displays circles with dynamic positions, while a legend and axis labels update programmatically, demonstrating a modular `scatterPlot` function with configurable dimensions, margins, and value accessors.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This fork of a reusable D3 scatter plot visualizes the Iris Dataset, cycling through four flower measurements (petal width, sepal width, petal length, sepal length) on the x-axis every two seconds. The SVG renders animated, with circles sized at a fixed radius and axes labeled. Built with d3.scaleLinear, d3.extent, d3.axisLeft, and d3.axisBottom, the chart updates by re-calling the plot function with new data mappings.

Loading thumbnail…

Fouzan Uddin Bar Plot

This example visualizes COVID-19 death counts by country as an interactive 3D bar chart. The bars rise vertically from a flat plane, with each country’s death total mapped to bar height. The visualization uses the `d3-x3d` library to render the scene via X3DOM, while D3 v5’s `csv` loader fetches and parses the data from a GitHub gist. The `barChartMultiSeries` component from `d3-x3d` handles the 3D geometry, and the page loads required scripts for D3, X3DOM, and the chart wrapper.

Loading thumbnail…

Untitled

A 3D scatter plot of the classic Iris dataset, colored by species (setosa, versicolor, virginica) and plotted using sepal length, sepal width, and petal length. The visualization, rendered with Plotly's WebGL scatter3d type, displays each flower as a marker with a purple outline and a custom colorscale mapping species to distinct hues. Data is loaded via d3.csv, with species labels converted to numeric color indices for the marker’s color attribute. The plot emphasizes three-dimensional separation of the flower measurements, with axis titles and colored grid backgrounds provided.

Loading thumbnail…

Fork of d3-x3d : 3D Bar Chart Example

This example presents a 3D multi-series bar chart of USA vehicle sales by quarter for major automotive brands in 2021. It uses the d3-x3d library to generate WebGL-based 3D bars within an X3DOM scene, built on React and D3 v5. The code loads CSV data from a gist, parses it into per-manufacturer quarterly values, and binds it to the chart via `d3.x3d.chart.barChartMultiSeries()`. A static background image and custom title style the page.

Loading thumbnail…

Fork of Texas Corona Vaccination Report

This visualization presents a 3D multi-series bar chart of Texas COVID-19 vaccination statistics, covering metrics like people vaccinated, fully vaccinated, and total boosters, based on a dataset from February 13–19. The chart is built using the d3-x3d library, which integrates D3.js with X3DOM for WebGL-based 3D rendering, and it loads CSV data from a GitHub gist. The code uses `d3.x3d.chart.barChartMultiSeries()` to plot the data, with each row mapped to a bar series and parsed via `d3.csv`.

Loading thumbnail…

emoji-like face with mouth (D3)

This example renders a simple emoji-like face using React and D3.js. It shows a purple circle with two smaller circles for eyes and a curved path for the mouth, all positioned relative to the center of an SVG canvas. The code constructs the mouth using `d3.arc` with specified angles and radii, and draws the face elements inside an SVG `<g>` group translated to the canvas center. The SVG output is generated declaratively through React's JSX syntax.

Loading thumbnail…

ICE-6: Rendering Marks and Channels with React & D3

This visualization displays the TikTok accounts with the highest average number of likes, using horizontal bars ranked in descending order. The bar chart employs React components with D3 scales, where `scaleBand` positions the account names along the y-axis and `scaleLinear` maps like counts to bar widths. Data is loaded asynchronously from a CSV file using D3's `csv` method, and the SVG rectangles are rendered directly through React's declarative JSX syntax.

Loading thumbnail…

Iris Dataset Scatter Plot

This scatter plot visualizes the Iris Dataset, mapping petal length and width for individual flowers while encoding species through distinct green color markers. Implemented with D3 v6, it uses `d3.csv` for data loading, `d3.scaleLinear` with `d3.extent` to establish scales, and SVG circles for rendering. The chart includes labeled axes, with tick text and axis labels customized via CSS. A color-coding function assigns specific greens to setosa, versicolor, and virginica species, making species groups visually separable within the plot.

Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This visualization displays the top 20 countries by COVID-19 cases using horizontal bars, with country names on the y-axis and case counts on the x-axis. Built with React and D3 v5, it uses `d3.csv` to load data, `scaleBand` and `scaleLinear` for positioning, and renders SVG rectangles and axes through React components. The chart pulls from a GitHub-hosted CSV file and updates state asynchronously with React hooks, showing a loading message before the data appears.

Loading thumbnail…

Fouzan Uddin's TikTok Dataset

This example displays an SVG image of the TikTok logo above a text summary of a CSV dataset, loaded from a GitHub gist. It uses D3’s `csv` utility to fetch and parse the data, and React (`useState`, `useEffect`) to manage the asynchronous loading state. The message text reports the file size in kilobytes, row count, and column count, computed with `d3.csvFormat` and array properties. The visualization is minimal, focusing on the dataset’s metadata rather than charting its contents.

Loading thumbnail…

Fork of Loading Data with React & D3

This example demonstrates how to load and summarize a CSV dataset of CSS named colors using React and D3. It displays a brief text summary showing the file size in kilobytes, row count, and column count. The code uses React’s `useState` and `useEffect` hooks to manage asynchronous data loading, with `d3.csv` fetching the remote dataset. React renders the message from the `message.js` utility, which formats the summary using `d3.csvFormat` to calculate data size.

Loading thumbnail…

Fork of Fork of D3 Starter

This example demonstrates how to load and summarize a CSV dataset using D3 version 7. It fetches a TikTok dataset from a GitHub Gist via `d3.csv`, then uses `d3.csvFormat` to measure the formatted data size in kilobytes and displays that value inside an HTML `<pre>` element. The page uses Element IDs and `textContent` for DOM manipulation. A linked video provides additional guidance, while a separate `index.js` file shows a minimal `select` call from D3.

Loading thumbnail…

Fork of Fork of Fork of D3 Starter

This example demonstrates a minimal D3 version 7 starter template that loads a remote CSV file from a GitHub gist and logs its size, row count, and column count to the browser console. The page displays the text “Hello D3 version 7” in the body using the `select` API, while the CSV is fetched via `fetchText` and parsed with `d3.csvParse`. The code relies on D3 v7.0.4 loaded from unpkg and does not include any interactive or visual chart elements.

Loading thumbnail…

Fork of Fork of D3 Starter

This example displays the text “Hello D3 version 7” in the center of the page using a large font size. It demonstrates a basic D3 setup by loading the d3.v7 library from a CDN, fetching a remote CSV file, and parsing it with `d3.csvParse` to log the data size, row count, and column count to the console. The visualization’s body text is rendered using the `select` method from the D3 module, while the CSV is obtained via a `fetchText` helper. The code also embeds a YouTube tutorial video in the README.

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a minimal D3 v7 starter project that fetches a TikTok dataset from a GitHub gist and parses it with `d3.csvParse`. The visualization itself renders the text “Hello D3 version 7” in the browser body using `select().text()`, while the script logs the data’s file size, row count, and column count to the console. The code relies on the D3 v7 library loaded via a CDN and uses `fetchText` to retrieve the CSV before parsing.