Ope Kareem

@talentlessDeveloper·5 public vizzes

Fork of Religions of Largest 20 Countries

This stacked bar chart visualizes the estimated 2010 religious breakdown of the world’s 20 most populous countries, using data from the Pew Research Center’s Global Religious Landscape. Hovering over a bar displays a tooltip with the precise population count for that religion and country, while hovering over the color legend highlights the corresponding bars for a specific religion. The visualization is built with D3.js, employing d3.layout.stack for the stacked layout, d3.svg.axis for axes, d3.legend.color for the interactive legend, and d3-tip for tooltips.

Jan 13, 2023

Loading thumbnail…

Colors from MDN

This visualization displays all 148 named CSS colors from the MDN dataset as a circular pie chart, with each slice filled by its corresponding hex value. Built with React and D3 v5, the code uses the `pie` and `arc` functions from the d3 library to calculate slice angles and render SVG paths, automatically assigning equal angles to each color. The `csv` function fetches the color data from a GitHub Gist, and React's `useState` and `useEffect` hooks manage the asynchronous loading.

Nov 25, 2022

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization presents a bar chart of global religious populations, sorted by country size and colored by religion, with interactive tooltips showing population values. Built using the Vega-Lite API with d3.csv for data loading, the visualization reads from the Auto MPG Data Set via a Gist, though the chart itself displays religion-by-country data. The code configures the chart through vl.markBar(), vl.x(), vl.y(), and vl.color() encodings, while Vega-Lite's renderer generates SVG output within a full-window, dark-themed layout using custom axis and label styling.

Nov 25, 2022

Loading thumbnail…

React Emoji

This example renders a yellow, smiley-face emoji as a static SVG graphic using React and D3. The face is composed of circles for the head and eyes, and a D3 arc path for the mouth, all positioned within a 960 by 480 viewBox. The code initializes a D3 arc generator with specified radii and angles, then uses React to produce SVG elements with computed coordinates from JavaScript constants. The rendering is achieved through ReactDOM, which mounts the SVG directly into the HTML document.

Nov 23, 2022

Loading thumbnail…

Emoji

This example shows a simple smiling face made entirely of SVG shapes, with a yellow circular head and two black eyes rendered on a plain white background. The code uses vanilla JavaScript and CSS within an HTML page to generate the illustration. It relies on basic SVG elements like `circle` and `svg` viewBox, with inline styling for dimensions and stroke properties. The data source is static, consisting of hardcoded coordinates and radii for each circle, and the rendering approach is direct SVG markup without any external libraries or frameworks.

Nov 22, 2022