modydxx@gmail.com

@MohammedAk9·11 public vizzes

tree of kids

This family tree visualization displays three generations descending from a root couple, with each generation represented by a distinct shape: a golden circle for the root, green rounded rectangles for parents, and blue diamonds for descendants. The hierarchical layout uses `d3.stratify()` to structure the data and `d3.tree()` with `d3.linkHorizontal()` to position nodes and draw curved links. Node labels alternate sides based on whether they have children, and a legend clarifies the shape-to-generation mapping. The SVG rendering uses D3 v7 with a custom margin and coordinate system.

Nov 3, 2025

Loading thumbnail…

Network example

This example shows a small force-directed network of six named nodes and six links, laid out by D3’s `d3.forceSimulation` engine with `forceLink`, `forceManyBody`, and `forceCenter` forces. Nodes are drawn as SVG circles, links as lines, and labels as text; users can drag nodes to reposition them, which updates the simulation. The graph uses hard-coded Arabic Muslim names as node data and renders entirely as SVG within a single viewBox.

Nov 2, 2025

Loading thumbnail…

Map_ABUTAYYEM

This example displays a map of Palestine using a filled green geographic boundary, with three cities overlaid as orange population-scaled circles. It loads world country data as TopoJSON from the world-atlas package, filters the Palestine feature by numeric ID 275, and renders it with d3.geoMercator and d3.geoPath. Circle radii derive from population values via a square-root scale, and the D3 v7 SVG with a tooltip and legend shows interactive details.

Nov 2, 2025

Loading thumbnail…

area chart

This area chart visualizes weekly visits to Dallas-Fort Worth public libraries across 52 sequential weekly observations. The chart uses D3 v7’s `d3.area` generator with a linear scale for both axes, filling the region beneath the line with a light blue `#9ecae1` and overlaying a darker stroke. Data is loaded from a CSV via `d3.csv`, with numeric values parsed to remove commas. The y-axis includes gridlines and a “Weekly Visits” label, while the x-axis displays integer index ticks with a “Library Index” label.

Oct 27, 2025

Loading thumbnail…

linechart

This example shows a line chart tracking weekly visits across Dallas-Fort Worth public library branches, using a sequential index as the x-axis and weekly visit counts on the y-axis. The code imports a reusable `LineChart` function from `lineChart.js`, which leverages d3.v7’s `d3.line`, `d3.scaleLinear`, and `d3.axisBottom` to render the SVG path and axes. Data is loaded from a CSV URL via `d3.csv` with `d3.autoType`, and the chart is configured with custom width, height, color, and axis labels before being appended to the document body.

Oct 27, 2025

Loading thumbnail…

Reusable D3 Scatter Plot

This reusable D3 scatter plot visualizes the relationship between events per week and weekly visits for Dallas-Fort Worth public libraries, using CSV data loaded directly from a GitHub gist. The SVG visualization encodes the quantitative variables on the x- and y-axes, with data points rendered as circles sized by a fixed radius. Built with modular D3 6.7.0 functions, the plot implements a configurable `scatterPlot` generator that leverages `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs. The plot animates by cycling between the two data columns every two seconds, updating the x-axis and circle positions via a `setInterval` callback. The example demonstrates a reusable chart module with idempotent rendering, likely intended for easy parameterization across datasets.

Oct 27, 2025

Loading thumbnail…

ice 6 part 3

A dual-axis chart displays total weekly visits as blue bars and average events per week as a red line for each Dallas public library, sorted by descending visit totals. The visualization uses D3 v7 APIs including `d3.text` and `d3.csvParse` to load and parse the CSV data from a GitHub Gist, `d3.rollup` for aggregation, `d3.scaleBand` and `d3.scaleLinear` for axes, and `d3.line` for the trend line. An interactive legend and rotated axis labels aid readability.

Oct 20, 2025

Loading thumbnail…

ice6 part 2

A scatter plot displays the relationship between open hours per week and weekly visits for DFW public libraries, with each steel-blue circle representing one library. The chart, rendered as an SVG, uses D3 v7's `scaleLinear` for both axes and `d3.axisBottom` and `d3.axisLeft` for the tick marks. Data is loaded from a remote CSV using `d3.text`, then parsed and cleaned with `d3.csvParse` and `d3.autoType`, filtering for finite numeric values before plotting. The visualization reveals whether libraries with more operating hours attract higher visitor counts.

Oct 20, 2025

Loading thumbnail…

ice6_part1

A bar chart shows total weekly visits per public library from a DFW libraries dataset, with libraries sorted in descending order and bars colored red. The code uses D3 v7’s `d3.text`, `d3.csvParse`, and `d3.rollup` to load and aggregate the CSV data, then renders an SVG chart with `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`. Data is sourced from a GitHub gist containing the 2025 weekly visits CSV.

Oct 19, 2025

Loading thumbnail…

htmlq3

This dark-themed visualization displays a preview of the first five rows from a CSV file detailing weekly visits to Dallas-Fort Worth public libraries in 2025. It renders the data as an HTML table within a rounded card container, using D3.js v7 to fetch and parse the remote CSV via the `d3.csv` API. The code leverages D3's selection and join operations (`d3.select`, `.join`) to dynamically generate table headers and cells from the dataset's column names and row values, with alternating row striping for readability.

Oct 6, 2025

Loading thumbnail…

HTML Starter_mohammed

This example presents a dataset summary dashboard for DFW public library weekly visits in 2025, showing five key metrics in a dark-themed card layout. The visualization uses D3 v7 to load CSV data via `d3.csv`, calculates aggregate statistics with `d3.mean` and `d3.max`, and renders metric cards using `d3.select` with a data join. The SVG badge and styled metric cards are built with HTML and CSS, while the data-driven values update dynamically through D3's data binding.

Oct 6, 2025