hafiz9977

@hafiz9977·4 public vizzes

Fork of Persons of Concern StreamGraph by Origin

This fork of the Persons of Concern StreamGraph groups cumulative COVID-19 case counts by Chinese province over time. Using d3.stack with the wiggle offset and basis curve, it renders a smooth streamgraph in SVG, with each province as a colored layer. The code interpolates missing daily values between reported dates and applies a unique color to each province. Hovering a layer turns it black for emphasis, while white labels are positioned via d3-area-label. Data is loaded from a local JSON file via d3.json.

Dec 24, 2020

Loading thumbnail…

Fork of 27_Temp Chart - Melting Data for Multiple Lines

This visualization displays population trends over time for various global regions, with each region rendered as a distinct colored line using a spline curve. The chart employs D3 v5’s scaleTime, scaleLinear, and scaleOrdinal APIs to map years, population values, and categorical colors, respectively. Data is sourced from UN population estimates and projections, melted into a long format for multiple lines. An interactive color legend, built with a custom `colorLegend` function, annotates each region’s line.

Dec 24, 2020

Loading thumbnail…

Fork of Religions of Largest 20 Countries

This stacked bar chart visualizes the estimated 2010 religion breakdown of the world’s 20 most populous countries, using data from the Pew Research Center’s Global Religious Landscape. Hovering over a bar reveals a tooltip with the specific religion, country, and population count, while hovering over the color legend highlights bars for that religion and fades all others. The visualization is built with D3.js, using `d3.layout.stack` for the stacked layout, `d3.svg.axis` for scales, and the `d3.legend` and `d3-tip` libraries for the interactive legend and tooltips, rendered as SVG with animated transitions.

Dec 23, 2020

Loading thumbnail…

Fork of Responding to Resize

This example demonstrates how a D3.js visualization can automatically respond to browser window resizing. It draws two thick blue diagonal lines—an X shape—across a full-screen SVG element. The code uses CSS positioning to make the chart container fill the viewport, then extracts the container’s `clientWidth` and `clientHeight` properties within a `redraw` function. This function sets the SVG’s dimensions and updates the line coordinates accordingly. The visualization listens for window resize events and calls `redraw` each time, ensuring the X always spans the entire display area. The data for the lines is defined as an array of coordinate pairs.

Dec 23, 2020