son.sultan@yahoo.com

@sjiwani970·13 public vizzes

Network

This network visualization displays the adjacency relationships among contiguous US states, with each state represented as a colored node and borders as links. The layout is computed using d3.forceSimulation with forceLink and forceManyBody, while state geometries come from TopoJSON data loaded via d3.json. Node colors are assigned by approximate longitude-based regions, and state names are drawn as SVG text labels. The code uses d3.geoPath to calculate centroids for region classification, and the final SVG rendering updates positions on each simulation tick.

Nov 6, 2025

Loading thumbnail…

Tree

A D3.js (v7) SVG tree diagram displays the hierarchical structure of US regions and states, with a root node for the United States branching into color-coded Central, Western, and Southern region nodes, each containing leaf state nodes. The layout is computed using `d3.tree()` with `d3.hierarchy()`, while links are drawn as horizontal paths via `d3.linkHorizontal()`. Nodes appear as circles with region colors or white for states, and labels are placed using `text-anchor` based on branch direction. The data is static JSON embedded in the script, rendered with a light background and sans-serif typography.

Nov 6, 2025

Loading thumbnail…

State Map with Population

This choropleth map visualizes U.S. state populations, filling each state with a blue color scale from light to dark based on its population value. It uses d3.geoAlbersUsa for projection and d3.geoPath to render TopoJSON state and nation outlines from the us-atlas dataset. Population data is loaded from a separate text file and parsed into a lookup table, with tooltips appearing on hover. The visualization is built with D3 v7 and rendered as SVG.

Nov 6, 2025

Loading thumbnail…

Fork of Map

This example displays a choropleth-style map of the United States, with each state filled in a light blue shade and outlined by dark gray borders, over a pale background. Hovering over a state reveals its name via an SVG `<title>` tooltip. The visualization uses a `d3.geoAlbersUsa` projection and `d3.geoPath` to render TopoJSON data from the us-atlas package, drawing both individual state polygons and the national outline. State names are derived from the TopoJSON geometries’ `properties.name` field.

Nov 6, 2025

Loading thumbnail…

Reusable Scatter Plot

This scatter plot visualizes population estimates by state and year, using a reusable d3.scalePoint for the x-axis, d3.scaleLinear for the y-axis, and d3.scaleOrdinal with d3.schemeTableau10 for color coding by year. Symbols vary by year through d3.symbol with circle, square, triangle, diamond, and star shapes. The SVG renders axes with d3.axisBottom and d3.axisLeft, includes rotated state labels and a legend, and pulls data from a CSV of Texas population estimates.

Oct 26, 2025

Loading thumbnail…

Area Chart

This area chart displays the total estimated population of Texas from 2020 to 2024, aggregated from county-level estimates loaded via `d3.csv`. The SVG visualization uses `d3.area` and `d3.line` generators with `curveMonotoneX` smoothing to draw a lightsteelblue filled region beneath a steelblue boundary line, overlaid with orange circles marking each yearly data point. Linear scales position the years along the x-axis and population totals on the y-axis, with axes formatted via `d3.axisBottom` and `d3.axisLeft`. The data originates from a public GitHub gist containing annual population estimates.

Oct 26, 2025

Loading thumbnail…

Line Chart

This line chart visualizes the total population estimates for Texas from 2020 to 2024, aggregating county-level data from the Census Bureau. The chart draws a smooth steelblue line with orange circles marking each year’s total. Built with D3 v7, the code loads a CSV via `d3.csv`, sums population columns using `d3.sum`, and renders the SVG with `d3.line`, `d3.curveMonotoneX`, and linear scales for the axes.

Oct 26, 2025

Loading thumbnail…

Pie Chart

This pie chart displays total sales aggregated by state, sourced from a CSV file loaded via `d3.csv`. It uses `d3.rollup` and `d3.sum` to group the data, then renders slices with `d3.pie` and `d3.arc` in an SVG. Each slice is colored with `d3.scaleOrdinal` using `d3.schemeTableau10`, labeled with state names, and accompanied by a legend showing totals. The visualization is built entirely with D3 v7.

Oct 26, 2025

Loading thumbnail…

Fork of Fork of HTML Starter

This visualization displays sales figures for each state-category combination as vertical bars on an SVG chart. The code loads CSV data via d3.csv, computes scales with d3.scaleBand and d3.scaleLinear, and renders axes with d3.axisBottom and d3.axisLeft. Bars are drawn using SVG rect elements, with x-axis labels rotated for readability, and a bold "Sales" label annotates the y-axis.

Oct 26, 2025

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example presents a scatter plot of the Iris dataset, rotating through four numeric attributes as the x-axis variable on a two-second interval, with the y-axis fixed to sepal length. The plot animates smoothly by repeatedly invoking a reusable `scatterPlot` function, which uses D3’s scaleLinear, extent, axisLeft, and axisBottom to render axes and circles. Data is loaded from a GitHub Gist via `d3.csv`, with parsing of numeric columns, and the visualization is drawn as SVG with a full-window canvas, featuring a custom font and no user interaction.

Oct 26, 2025

Loading thumbnail…

Bar and Line chart

This example presents two SVG charts created with D3.js (v7). The top panel is a multi-series line chart rendering three synthetic variables (VarA, VarB, VarC) across 150 samples, with each series distinguished by color and a legend. The bottom panel combines a bar chart with a line overlay for the same random dataset, using a band scale for the x-axis and a linear scale for the y-axis. Both charts employ D3's axis, line, and scale APIs alongside standard SVG elements.

Oct 19, 2025

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the Iris flower dataset, mapping petal length on the x-axis against sepal length on the y-axis. Each circle represents a single flower sample, with axes and labeled ticks generated using d3.axisBottom and d3.axisLeft. The code loads CSV data via d3.csv, scales positions with d3.scaleLinear and d3.extent, and renders the chart as SVG elements. Axis labels are manually added as SVG text, with the visualization filling the entire browser viewport.

Oct 19, 2025

Loading thumbnail…

Iris Scatter with labels

This D3.js v6 scatter plot visualizes the Iris dataset, mapping petal length on the x-axis against sepal length on the y-axis. Each of the 150 flowers appears as a circle, with axes, tick labels, and axis titles rendered using the `scaleLinear`, `axisBottom`, and `axisLeft` APIs. The code loads data from a CSV file, parses numeric fields, and uses `select`, `append`, and `attr` methods to build the SVG output.

Oct 19, 2025