Tell us what works and what could be better. We read every submission.
@angelferroey·3 public vizzes
This visualization uses a circle packing layout to display the hierarchical structure of the Flare dataset. The SVG-based graphic encodes data hierarchy and relative sizes through nested circles, where each circle's area corresponds to the `size` value of its corresponding node. Inner circles (leaves) are rendered in solid orange, while parent circles use semi-transparent blue fills with visible strokes to delineate group boundaries. Text labels are positioned at the center of each circle to identify categories. The visualization is implemented with D3 v4, using the circle packing layout to compute the nested circle positions and radii.
A clustered force-directed layout shows 200 colored circles grouped into 10 distinct clusters, with circle size varying randomly. The visualization uses d3.v4’s `d3.layout.force` for simulation and `d3.geom.quadtree` for collision detection, while custom cluster and collide functions enforce intra-cluster padding and inter-cluster separation. Rendering is SVG, with color assigned via `d3.scale.category10` and circles positioned on each tick. The data is procedurally generated in the browser using random radius and cluster assignments.
This example shows 200 colored circles grouped into 10 distinct clusters, with each circle’s size and cluster assignment generated randomly. A force-directed layout using d3.layout.force continuously adjusts circle positions, applying a custom clustering function to keep same-cluster circles near their largest member and a collision detection routine based on d3.geom.quadtree to prevent overlaps. Circles are rendered as SVG elements, with colors assigned via d3.scale.category10 and drag interaction enabled through force.drag.