Ali Ahmed

Color Legends

A color legend maps ordinal categories to hues, displaying two large circular swatches for "apple" and "lemon" against a white background. The `d3.scaleOrdinal` assigns red and yellow, while a custom `colorLegend` function binds the scale's domain to SVG groups. Circles and text labels are appended and updated via enter/merge/exit selections, with transform positions calculated from array index and a fixed height. The example demonstrates reusable D3 v5 code for building legends with dynamic scaling.

Dec 5, 2018

Nested Elements with transition

A sequence of fruit data animates a brown SVG bowl containing apples and lemons. The visualization uses d3 selections and merge operations to transition nested elements: circles and text labels appear, reposition, or disappear as the data array changes over time. The code applies d3.scaleOrdinal for color and radius mappings, and d3.select for SVG element manipulation, with explicit exit and enter selections driving the animated state changes.

Dec 5, 2018

Blank Canvas

This example creates a full-screen blank canvas as a rounded rectangle, filling the browser viewport with a clean, empty SVG scene. The visualization demonstrates how to set up a basic D3.js v5 environment, using the imported `select` and `arc` APIs from the D3 library. The code dynamically sizes the SVG to match the document body’s width and height, then appends a single styled rectangle to form the canvas backdrop. The page is fixed and overflow-hidden via CSS, ensuring the empty frame occupies the entire screen without scrollbars.

Dec 4, 2018

Bowl of Fruit, Highlight on Hover

Five pieces of fruit sit in a row, rendered as scaled SVG circles. Hovering over an apple or lemon highlights it with a black outline, while a click sets a selection that persists. The bowl updates dynamically: apples are removed, and one apple’s type changes to a lemon, with a 1000-millisecond transition animating the radius change. Built with d3 v5’s `select`, `scaleOrdinal`, and `transition`, it uses `mouseover` and `mouseout` events to trigger a state change and re-render.

Bowl of Fruit, Interaction click

Five apples appear in a row, and clicking one outlines it in black. As time passes, apples are removed and one changes into a lemon, with new and exiting circles animating their radius. The example demonstrates the D3 general update pattern using `selection.data`, `enter`, `merge`, and `exit` transitions. Fruit types map to colors and sizes via `scaleOrdinal`, and click events trigger a re-render with a selected fruit ID. SVG circles animate over one second using `transition().duration(1000)`.

Bowl of Fruit, Interaction on Click

A bowl of five apples animates as the dataset changes over time: one apple is eaten, another transforms into a lemon, and a third disappears. The visualization demonstrates a data-join update pattern using D3 v5 within a React-style component. The `fruitBowl` function handles enter, update, and exit selections, transitioning circles' radii and fill colors via SVG attributes. Interactions are triggered by `setTimeout` calls, and the rendering uses `d3.selection` and `scaleOrdinal` for color and radius mappings.

Nested Elements

This example demonstrates a dynamic fruit bowl visualization where apples and lemons appear, disappear, and change type over time. Using D3 v5’s `select`, `range`, `scaleOrdinal`, and custom component-style functions like `fruitBowl`, the SVG renders circles and text labels, with color and radius scales mapping fruit types to visual properties. The React-inspired component pattern merges enter, update, and exit selections to handle data changes smoothly, while timed `setTimeout` calls trigger data mutations that update the scene.

Scatter Plot

This scatter plot visualizes the relationship between vehicle horsepower and weight, using a red, semi-transparent circle for each car. The data comes from a CSV file about vehicle specifications. The visualization is built with D3 version 5, using `scaleLinear` for axes, `axisBottom` and `axisLeft` for tick marks, and SVG circles for data points. Axis labels and a title are added as text elements, with grid lines drawn via tick sizing, all rendered in an SVG canvas with custom CSS styling.

Scatter Plot

A scatter plot visualizes the relationship between horsepower and weight for individual vehicles, with each red circle marking one data point. The chart uses D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` to map the CSV data loaded via `csv` from a GitHub gist, rendering SVG circles with `selectAll` and `append`. Axis ticks extend across the plot via `tickSize`, and labels and a title are added as SVG text elements, with styling from CSS.

Top 10 most populous contries

A horizontal bar chart displays the ten most populous countries, with population values loaded from a CSV file and scaled linearly. The chart uses D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`, rendering SVG rectangles. Grid lines extend from the x-axis ticks, and tick labels format numbers using `format(".3s")` to abbreviate billions. The y-axis removes domain lines and ticks, while the chart includes a title and labeled population axis.

Let's make a Bar Chart with D3.js!

This horizontal bar chart ranks the populations of ten countries, from China down to Mexico, using a logarithmic-free linear scale where bar length corresponds to population in thousands. Built with D3.js v5, the visualization uses `d3.csv` to load data from `data.csv`, `d3.scaleBand` and `d3.scaleLinear` for axes, and `d3.axisLeft` and `d3.axisBottom` for labels. The SVG rendering applies a steelblue fill to all bars via CSS, with the chart area set to 960 by 500 pixels.