iahtisham

@iahtisham·2 public vizzes

Data Visualization with D3 – Svg Fundamentals

This example demonstrates how to construct the Pakistani flag using fundamental SVG shapes and elements within an HTML document. It explicitly uses standard SVG drawing primitives—`line`, `rect`, and nested `svg` elements with custom `path` data—to represent the flag’s green field, white stripe, and crescent-and-star emblem. The visualization showcases static SVG capabilities without relying on D3.js data-binding or interactive behavior, serving as a purely markup-based illustration of geometric composition and coordinate placement within a 700-pixel-high canvas.

Jun 27, 2022

Loading thumbnail…

myForkLine

This example displays a line chart of population values across different states, with time on the x-axis and population count on the y-axis. Using D3 v5, it loads CSV data from a GitHub gist via `d3.csv`, then renders an SVG with `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` generators. The chart includes labeled axes, tick marks, and a red line path, with margins and formatting configured through D3’s selection and scale methods.

Jun 23, 2022