CHENNI-Nidhaleddine

@CHENNI-Nidhaleddine·3 public vizzes

Fork of 3D Bar Plot AISHWARYA-M

This example presents an interactive 3D bar plot rendered as cubes in SVG, with each cube’s height representing a numeric value. The visualization uses the d3-3d plugin to project 3D coordinates onto a 2D plane, supporting mouse-drag rotation around both axes via d3.drag. Cubes are generated from random uniform height values and colored with d3.scaleOrdinal using a category color scheme. The code also includes a fork with a separate React-based 2D bar chart that loads UN population data from a CSV using d3.csv, applying scaleBand and scaleLinear for axes and animated transitions.

Jan 11, 2023

Loading thumbnail…

Untitled

This interactive zoomable circle packing visualization displays the hierarchical structure of the flare.json dataset, with nested circles representing parent and child nodes sized by their numeric values. Users click circles to zoom into deeper levels, with smooth animated transitions between views. The visualization uses D3.js v4’s `d3.pack` layout, `d3.hierarchy`, and `d3.interpolateZoom` to animate the zooming effect, rendered as SVG elements with a linear color scale distinguishing depth levels. Text labels appear and fade based on the current zoom focus.

Dec 7, 2022

Loading thumbnail…

Fork of Fork of ICE8 - Social Network Graph

This example visualizes a small social network graph with eight nodes and eleven directed links, showing friendship relationships between individuals. The graph uses a force-directed layout, with nodes rendered as blue circles and labeled with their IDs, while links appear as lines with arrow markers indicating direction. Hovering highlights a node with a green border. The visualization is built with d3.forceSimulation, d3.forceLink, d3.forceManyBody, d3.forceCollide, and d3.forceCenter, with data loaded from a JSON file and rendered as SVG elements.

Dec 7, 2022