MuhammadAtifHussain

@MuhammadAtifHussain·3 public vizzes

Fork of TML Starter

This example displays a large, static message reading “Hello TML!” centered on a plain white page. The text is styled using CSS with a font size of 13em and center alignment. Built with a minimal HTML structure, it relies on no external JavaScript libraries or data sources, serving as a bare-bones starter template for experimenting with web technologies. The page demonstrates basic CSS styling and markup, though it lacks any interactive or dynamic visualization features.

Dec 4, 2021

Loading thumbnail…

Fork of Religions of Largest 20 Countries

This stacked bar chart visualizes the estimated 2010 religion breakdown for the 20 most populous countries, using data from the Pew Research Center’s Global Religious Landscape. The visualization uses D3.js with an SVG animation, employing a stacked layout to show population segments per religion for each country. Users can hover over bars for tooltips and interact with the legend to highlight specific religions, which triggers a foreground layer to emphasize selected data while fading others. The chart includes axes formatted with a custom SI tick format and leverages d3-tip for interactive tooltips.

Nov 10, 2021

Loading thumbnail…

Fork of Let's make a face with D3.js!

This example shows a smiley face built with D3.js, featuring a yellow circle head, two eyes, and an arc-based mouth. The eyebrows, rendered as rectangles, animate upward and then back down in a looping motion using chained `transition()` calls with a two-second duration each. The code leverages D3 v5’s `select`, `arc`, and `transition` APIs to manipulate SVG elements, positioning the face components relative to the center of an 960×500 SVG canvas. It demonstrates fundamental DOM manipulation and data-driven animation without external data sources.

Nov 6, 2021