iamhassanrazaahr

@iamhassanrazaahr·3 public vizzes

Fork of ICE-6 Tutorial Bar Chart

This horizontal bar chart displays the top 10 cosmetic products by revenue, with dollar amounts scaled along the x-axis and product names on the y-axis. It uses d3.csv to load data from a GitHub gist, then renders SVG rectangles with d3.scaleLinear and d3.scaleBand. Custom axes are built with d3.axisLeft and d3.axisBottom, including tick formatting that abbreviates large numbers with d3.format. The chart demonstrates margin-based layout and axis customization within an SVG canvas.

May 15, 2022

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays a stacked bar chart of population by country, segmented by religion, with tooltips showing religious affiliation. It is built using the Vega-Lite API, registered with Vega and Vega-Lite libraries, and rendered as SVG. The code loads data from a CSV file via `d3.csv`, which contains the top five religions by country. The chart resizes to fit the window, uses custom axis and label styling for readability, and includes a Vega Tooltip handler for interactive data exploration.

May 13, 2022

Loading thumbnail…

Smily face part 1

A smiling face is drawn as a static SVG graphic, composed of a yellow circle for the head and two smaller black circles for the eyes on a 960×500 canvas. The example demonstrates basic React setup with `ReactDOM` imported in `index.js`, while `index.html` directly renders SVG elements without using React components for the visualization. The page loads React 18.1.0 and ReactDOM from unpkg CDN, plus a `bundle.js` script, with minimal CSS hiding page margins and overflow.

May 11, 2022