shabanasyed2266@gmail.com

Tree Visualization

This example displays a hierarchical tree of programming languages and related frameworks, organized into procedural, object-oriented, and scripting branches. Using React with D3.js v7, it renders an SVG visualization where nodes are color-coded by depth level, from the red root through blue and green intermediate categories to yellow leaves. The code employs `d3.hierarchy`, `d3.tree`, and `d3.linkHorizontal` to compute and draw the left-to-right layout, with data structured as nested JavaScript objects defining the language taxonomy.

Nov 10, 2025

World Map D3

This example displays two choropleth maps: global country-level and US state-level average temperatures, colored with a sequential RdYlBu scale. It loads GeoJSON features from TopoJSON files via `topojson.feature` and maps temperature data from a CSV using `d3.rollup` to compute means per country and city. The world map uses a `d3.geoNaturalEarth1` projection, while the US map uses `d3.geoAlbersUsa`, both rendered as SVG paths via `d3.geoPath`.

Nov 10, 2025

Line Chart Global Temperature

This line chart visualizes global average temperature trends over time, plotting temperature values against yearly dates. The visualization uses D3.js v7 with an SVG rendering approach, employing `d3.scaleTime` and `d3.scaleLinear` for axes and a `d3.line` generator to create the orange trend line. Data is loaded remotely from a GitHub-hosted CSV file containing cleaned temperature records, with the code handling missing or empty data through error messages. The chart includes labeled axes, a legend, and a clean white background with subtle shadow styling.

Nov 5, 2025

Multi-Country Bubble Chart

This bubble chart displays temperature anomalies for individual countries between 1750 and 2013, with each circle’s horizontal position encoding the year, the vertical axis showing the anomaly from a computed global baseline, and the fill color representing the country. The circle radius scales with the average temperature, and hovering highlights a point. The visualization uses D3.js v7 with `d3.csv` to load data, `d3.scaleLinear` for positioning, `d3.scaleOrdinal` with the Tableau10 scheme for colors, and `d3.axisBottom` and `d3.axisLeft` for axes. The SVG is rendered directly in the browser with the data sourced from the GlobalTemperature_Cleaned_ForViz.csv file.

Nov 5, 2025

Global vs Local Temperature Multi-series line chart

This interactive visualization displays yearly average temperature trends for individual countries from 1750 to 2013, using a multi-series line chart with a dropdown menu to switch between countries. The D3.js v7 code loads CSV data, aggregates monthly records into yearly averages, and renders an SVG line chart with axes, dots, and hover tooltips. It uses d3.csv, d3.rollups, d3.scaleLinear, d3.line with curveMonotoneX, and d3.schemeTableau10 to color the selected country’s line.

Nov 5, 2025

Pie Chart

A pie chart visualizes the distribution of pet types within an adoption dataset. The chart displays proportional slices for each pet type, using color from the `d3.schemeSet2` scale, with slice labels and a legend positioned to the right. The visualization is built with D3 v7, using `d3.rollups` to count records from a CSV file loaded via `d3.csv`, and `d3.pie` to compute arc data. Slices are rendered as SVG paths with `d3.arc`, and hover interactions trigger a tooltip showing the pet type and count.

Area Chart

This area chart visualizes the relationship between pet age in months and adoption fees in dollars, using a blue-filled area with orange hover dots. The dataset is loaded from a CSV file via `d3.csv`, and both quantitative scales are linear. The chart is rendered as SVG using D3 v7, with the `d3.area()` generator defining the region between the baseline and the data points. Interactive tooltips appear on mouse movement using D3 event handlers and the `d3.select` API, while axes are appended via `d3.axisBottom` and `d3.axisLeft`.

Line Chart

This line chart visualizes the relationship between pet age in months and adoption fees, using a dataset loaded from a CSV file. A blue line connects data points sorted by age, with orange circular dots marking each observation. Built with D3 v7, the chart uses SVG rendering and d3.csv for data loading, with d3.line generating the path and d3.scaleLinear mapping both axes. Interactive tooltips appear on mouseover via event listeners, displaying the precise age and fee for each dot. Axis labels clarify the variables, and the visualization includes a light gray background grid through SVG styling.

Reusability_Scatter_Plot

This interactive scatter plot visualizes the relationship between pet age and adoption fee, with point size encoding weight. Using D3 v7 with an SVG rendering, the `scatterPlot()` function configures linear scales for both axes via `d3.scaleLinear` and a square-root scale for bubble radius. It employs `d3.scaleOrdinal` with `d3.schemeSet2` to color-code points by pet type. The chart reads a CSV from a GitHub gist, and a CSS-styled tooltip appears on mouse movement via `.on('mousemove')`, displaying pet details. Grid lines and axis labels enhance readability.

Reusability_Scatter_Plot

This example demonstrates a reusable scatter plot built with D3.js, showing how the same chart structure can be applied to different datasets through a configurable function. The visualization renders circles positioned along x and y axes based on numeric values, with gridlines and a clean white background. It uses D3’s selection and scale APIs, including `d3.scaleLinear` for mapping data to pixel coordinates and `d3.axisBottom`/`d3.axisLeft` for ticks, while CSS transitions smooth hover effects on the rectangles. The code is structured as a reusable module, making the scatter plot adaptable for various input data.

Fork of Reusable Scatter Plot

This scatter plot visualizes population against area for countries, with each point colored by continent. The reusable chart module follows Mike Bostock’s `chart()` pattern, using `d3.scaleLinear` for both axes, `d3.scaleOrdinal` with `d3.schemeCategory10` for color encoding, and `d3.axisBottom`/`d3.axisLeft` with gridlines. Data loads via `d3.tsv` from a GitHub gist, and interactive tooltips appear on `mouseover` using D3 v7 selections.

D3 Bar+Line Chart

This multi-series line chart visualizes pet adoption data, plotting age against weight, adoption fee, and shelter time to show relative trends. The code uses D3.js v7 with an SVG canvas, scaling data via `d3.scaleLinear` and rendering lines with the `d3.line` generator. Data is fetched from a GitHub raw text file, with each series color-coded and labeled through a legend. The chart includes bottom and left axes with `d3.axisBottom` and `d3.axisLeft`, scaled for comparability.

D3 of Scatter Plot

This scatter plot shows the relationship between pet age and weight, with each circle representing an individual pet. The visualization uses a D3.js v7 SVG rendering pipeline to map data points, with `d3.scaleLinear` for both axes and `d3.extent` for domain calculation. The chart includes axis labels and applies a teal fill with 0.6 opacity to the circles. Data is loaded asynchronously via `d3.csv` from a remote gist source, and the axes are generated using `d3.axisBottom` and `d3.axisLeft`.

D3 Scatter Plot

A D3 Scatter Plot displays a single "Hello D3" message centered on a blank page, serving as a minimal starter example. The visualization uses the D3 v7 selection API via `d3.select` to target the body element and sets its text content with `.text('Hello D3')`. Styled with CSS for centered alignment and a large font size, the example demonstrates the basic setup of an HTML page with an import map loading D3 as an ES module. No dataset or rendering primitives are involved; it focuses purely on initializing a D3 environment.

D3 of Bar Chart

This bar chart displays the average weight of different pet types using a simple SVG rendering. The visualization loads CSV data with `d3.csv`, groups records by pet type with `d3.rollup`, and computes means with `d3.mean`. It builds a band scale for categories and a linear scale for values, then renders steel-blue rectangles and adds rotated axis labels. The chart includes a bold title and uses D3 v7’s selection methods to append axes and interactive hover styling.

pet_adoption_data

A pet adoption dashboard displays summary statistics and a bar chart of average adoption fees by pet type. It loads CSV data from a GitHub gist via `d3.csv`, then renders the total pet count, average fee, and average age in a card layout. The bar chart uses `d3.scaleBand` and `d3.scaleLinear` to encode the average fee per pet type as SVG rectangles, with labels showing dollar values. The interface is built with plain HTML and CSS, relying on D3 v7's DOM selection and data join APIs.

Oct 6, 2025

pet_adoption_data

This example presents a force-directed network graph of pet adoption data, showing how individual animals and adoption centers cluster based on shared attributes. Built with the D3.js library, it uses `d3.forceSimulation` to calculate particle physics and `d3.geoPath` to render the connecting links between nodes. The underlying dataset, sourced from the v3 collection, is loaded as JSON and mapped to circle elements with `d3.map`, where each node’s size and color encode adoption frequency and species type. The simulation runs continuously, with the layout updating in real time as the forces settle.

Oct 6, 2025