Mustafa Shaheer Hamid

@msham6·5 public vizzes

Random

This visualization presents a hierarchical dataset from `flare.json`, displaying an education-related tree structure with growth stages and organizations. The SVG canvas renders the data using D3.js v6, which loads the JSON file and logs its contents to the console. The code includes a placeholder `d3.forceSimulation` reference for potential network layout, though the current implementation only demonstrates basic data loading and output. The visualization appears to be an early-stage template, with the JavaScript file containing minimal functionality beyond data inspection.

Mar 1, 2021

Loading thumbnail…

Ecosystem Map Sample

A zoomable sunburst visualization of hierarchical data from the flare.json dataset shows nested categories and their relative values. The circular layout uses d3.partition and d3.arc, with a color scale mapping top-level branches. Users can click a node to zoom into that section, animated via d3.transition and tween functions that interpolate the arcs' angles. The SVG also displays population data from data.csv alongside the main hierarchy.

Mar 1, 2021

Loading thumbnail…

Fork of Making a Bar Chart!

This bar chart displays the population of ten countries, from China to Mexico, using vertical bars rendered as SVG rectangles. The visualization loads data from a CSV file via `d3.csv`, parses the population values as numbers, and uses a simple `svg.selectAll('rect')` selection pattern to bind data. The chart relies on D3 v6, with the SVG canvas sized at 960 by 500 pixels and styled through an external stylesheet. The code is minimal, focusing on data loading and selection without defining scales or axes.

Feb 28, 2021

Loading thumbnail…

Making a Bar Chart!

An animated SVG face with black skin, red eyes, eyebrows, and a red arc mouth sits centered on a dark background. D3 v6 and the `d3.arc` shape generator draw the mouth and arched eyebrows, while chained `transition` calls move each eyebrow upward and back down over two seconds for a blinking or surprised effect. The face’s eyes are simple circles positioned with fixed spacing, and all elements are grouped inside a centrally translated `<g>` element.

Feb 28, 2021

Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js v6 to draw a cartoon face with black circular head, red eyes, eyebrows, and mouth. Built with SVG elements, the face includes animated eyebrows that shift upward and back using chained `transition().duration()` calls. The code imports `select` and `arc` from D3, using the `arc()` generator to create the brow and mouth shapes with specified inner/outer radii and angles. Static circle elements form the eyes, while grouped paths handle the animated facial features.

Feb 28, 2021