Skip to main content
Log in
A

Adekola Aliu

@EmeritusAli·10 public vizzes

Loading thumbnail…

Trying custom bar chart

This example displays grouped bar charts comparing two countries, Nigeria and South Africa, across two education metrics: average expected and average total years of schooling. The visualization is rendered as an SVG using the React framework and the D3.js library, leveraging scales such as `scaleBand` and `scaleLinear` for positioning. It also employs `scaleOrdinal` for color encoding and includes axes, labels, and a legend to clarify the data categories and country assignments.

Oct 20, 2024
Loading thumbnail…

Trying custom bar chart

This example shows a full-screen message reading “Hello HTML!” in large, centered text. It demonstrates a bare-bones approach to styling and rendering text using plain CSS and JavaScript, without any external libraries. The rendering is driven by an inline `<style>` block that sets the font size to 13em and centers the content with `text-align`. The code also references a separate React starter, but the visible behavior remains limited to this static HTML page, providing a minimal foundation for building more complex visualizations.

Oct 20, 2024
Loading thumbnail…

Trying custom bar chart

This example shows a full-screen message reading “Hello HTML!” in large, centered text. It demonstrates a bare-bones approach to styling and rendering text using plain CSS and JavaScript, without any external libraries. The rendering is driven by an inline `<style>` block that sets the font size to 13em and centers the content with `text-align`. The code also references a separate React starter, but the visible behavior remains limited to this static HTML page, providing a minimal foundation for building more complex visualizations.

Oct 20, 2024
Loading thumbnail…

Nigeria LGA map

A choropleth map of Nigeria displays each Local Government Area (LGA) with a color scale, likely encoding a quantitative variable. The visualization renders geographic boundaries using `d3.geoPath` and `d3.geoMercator`, with SVG paths for each LGA. It appears to load GeoJSON data and uses D3’s scales and selection methods to style regions. The map is interactive, allowing users to explore the spatial distribution across the country’s administrative units.

Sep 6, 2024
Loading thumbnail…

Radial Tree of Nigeria Local Government Areas

This radial tree visualization displays Nigeria's hierarchical structure, from geopolitical zones down to individual local government areas. Users can pan and zoom the layout, which positions leaf labels around the circle and centers deeper node labels for legibility. The implementation loads a static JSON file and uses D3 v4’s tree layout (`d3.tree`), custom projection functions, and zoom behavior (`d3.zoom`). Node depth drives font sizing via a square-root scale, while link paths and text positioning rely on the cluster layout’s angular coordinates.

Aug 29, 2024
Loading thumbnail…

Nigeria Local Government Areas hierarchy

This radial tree visualization displays the hierarchy of Nigeria’s administrative divisions, from geographic zones down to local government areas. Built with D3 v4, it uses the `d3.cluster` layout to arrange nodes in a circular pattern, with SVG paths drawn as curved links between parent and child nodes. The visualization supports panning and zooming through `d3.zoom`. Text labels scale in size based on depth, and leaf nodes are rotated outward for readability. Data is loaded from a local `data.json` file containing the nested structure of regions, states, and LGAs.

Aug 28, 2024
Loading thumbnail…

Scatter Plot with menu including species

This animated scatter plot visualizes the Iris Dataset, allowing users to dynamically switch which quantitative measurements (sepal length/width, petal length/width) appear on the x- and y-axes via drop-down menus. Using D3.js selection joins, circles animate smoothly between positions when axes change, with staggered transitions for updates and radius-growing effects on entry. The chart renders as SVG with animated axes and a categorical species option included in the menu.

Aug 24, 2024
Loading thumbnail…

Animated D3 Scatter Plot with menu

This interactive scatter plot visualizes the Iris dataset, displaying measurements such as petal width and sepal length as animated circles. Two dropdown menus let users independently select which measurement appears on the x-axis and y-axis, triggering smooth transitions of both the data points and axes. Built with D3 v6, the visualization uses the `selection.join` pattern to handle enter, update, and exit states, with circles animating their positions over a one-second duration. The axes are rendered using `axisLeft` and `axisBottom`, while the menus are constructed with a custom reusable `menu` component that dispatches change events.

Aug 24, 2024
Loading thumbnail…

Fork of Sol LeWitt Reproduction

This example reproduces a Sol LeWitt art piece using an SVG rendering approach. The visualization displays a grid of horizontal and vertical lines that are masked to create concentric circular patterns at the center of the viewport. The code dynamically generates 100 rectangular strips for each orientation, using inline SVG mask elements to clip the lines into the circular shapes. The piece runs entirely with native JavaScript DOM manipulation, creating the `svg`, `rect`, `mask`, and `circle` elements without external libraries.

Aug 21, 2024
Loading thumbnail…

Fork of Blank Slate with Hot Reloading

This example demonstrates a minimal data-visualization setup in the VizHub V3 runtime, rendering the text "Hello World!" centered in the browser. The code exports a `main` function that receives a container and sets its inner HTML with inline styling, featuring an adjustable font size of 217 pixels for interactive hot reloading. It serves as a blank-slate template, highlighting the new entry-point paradigm without an `index.html` file. The example relies on plain JavaScript DOM manipulation and CSS through the container's `innerHTML` property, with no external libraries.

Jul 8, 2024