Hept Tree

100%

✓ Published0🌍 Public

Last edited Jan 27, 2017

Created on Jan 27, 2017

This visualization demonstrates how a Gosper Map can be constructed using a hept tree, where each node has exactly 7 children, based on the base-7 representation of a random number. The tree layout maps each digit of the base-7 number to a level, with nodes colored blue (full), white (empty), or light blue (partially full) to represent the recursive subdivision of hexagonal tiles. Each level of the tree corresponds to an iteration of the Gosper Space Filling Curve, and the diagram uses D3's tree layout with SVG rendering to show how a GosperMap can be built from islands of increasing order—from single hexagons at the leaves to compositions of 7^i hexagons at higher levels. The visualization is generated with D3 v3 and CoffeeScript, displaying the random number conversion and its corresponding hept tree structure.

AI-generated description

This visualization shows a hept tree that is a particular kind of tree having nodes with exactly 7 children. The hept tree is constructed starting from a random number converted to (→) base 7.

The experiment tries to explain how it is possible to create a Gosper Map, that is a particular kind of Treemap used in our Linked Data Maps approach. Each level of the tree, corresponds to an iteration of the Gosper Space Filling Curve that generates islands. Each island corresponds to a tile: at the first iteration is an hexagon, at the second one is the composition of 7 hexagons, at the thid one the composition of 49 hexagons and so on. Hence, the number hexagons composing an island at the ith iteration is equal to 7^i.

In the diagram, each iteration is reported directly above its corresponding level in the tree. The first iteration is the rightmost corresponding to the leaves of the hept tree.

So, this diagram allows to understand how a GosperMap composed by N hexagons can be constructed in term of islands/tiles. For instance, a GosperMap:

where N = 6 (base10) → 6 (base7), will have 6 tile of order zero;
where N = 13 (base10) → 16 (base7), will have 1 tile of order one (= 7 tiles of order zero) and 6 tile of order zero;
where N = 58 (base10) → 112 (base7), will have 1 tile of order two (= 49 tiles of order zero), one tile of order 1 (= 7 tiles of order zero) and 2 tile of order zero.

Blue, white and lightblue hexagons respectevely represent a full, empty and partially full island.

forked from <a href='http://bl.ocks.org/fabiovalse/'>fabiovalse</a>'s block: <a href='http://bl.ocks.org/fabiovalse/06865431390fa7bb1fcb'>Hept Tree</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/68b9693ee4c3e9a0fd5173bfad14e21b'>Hept Tree</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/90e52d2320044c67b9b1fab4458c557e'>Hept Tree</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/044dd2d5775d12d171f1aa5cf8c84032'>Hept Tree</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Spiral Treemap

The spiral treemap visualizes a hierarchy of perfect squares, where each square’s children are the nonzero digits of its value, with color encoding the square’s order. It shows how the spiral layout preserves node order while maintaining near-golden aspect ratios. The example uses D3 v5 with `d3.treemap` and a custom `treemapSpiral` tile function, rendering SVG rectangles and text. Interactive radio buttons re-sort the tree ascending or descending, triggering animated transitions via `transition().duration(750)`, with color scaled by `d3.scaleSequential` and `d3.interpolateRdPu`.

DDinoJay

69% match

Loading thumbnail…

Hexagonal Binning (Color)

This visualization uses hexagonal binning to show the distribution of 2,000 randomly generated points with a normal distribution. The d3-hexbin plugin aggregates points into hexagons, and a sequential color scale from white to steelblue encodes the number of points within each bin, with denser areas appearing darker. The SVG rendering includes clipped hexagon shapes and axes generated with d3.axisLeft and d3.axisBottom. The code draws on d3.randomNormal for data generation and d3.scaleSequential for color mapping.

Mmbostock

68% match

Loading thumbnail…

visualization9d3

A D3.js treemap displays hierarchical data as nested rectangular nodes, sized proportionally to each value. The visualization shows five course categories with descending values, using a spectral color scale for differentiation. The code embeds a static dataset directly and builds the hierarchy using `d3.hierarchy` with a sum accessor, then applies `d3.treemap` to compute the layout. Each leaf node renders as a positioned `div` element, with dimensions derived from the treemap’s computed coordinates and colors assigned via `d3.interpolateSpectral`.

GGanesh Gundekarla

67% match

Loading thumbnail…

Hex Map

This animated visualization presents a hexagon-based map of the contiguous United States, with each state rendered as a cluster of individual hexagons. The TopoJSON data (Hex1000Topo.json) contains a grid of 1,000 hexagons, and D3.js v3 projects and renders these as SVG polygons. On load, the hexagons assemble into place with an animation, building the map from a central point outward. Each hexagon is color-coded to represent the state it belongs to, creating a mosaic-like representation of U.S. state boundaries. The hover interaction could be used to reveal additional information, though the core visualization emphasizes the hexagonal tiling of geographic regions through smooth, animated transitions.

BBrideau

67% match

Loading thumbnail…

Hexagonal Binning

This example demonstrates hexagonal binning, aggregating 10,000 randomly generated points from `d3.randomNormal` into a grid of hexagons using the `d3-hexbin` plugin for D3 4.0. Each hexagon’s fill color reflects the local point density via a sequential `d3.scaleSequential` with the `d3.interpolateMagma` color scheme. The SVG rendering includes white hexagon strokes for visual separation, plus top and left axes built with `d3.axisTop` and `d3.axisLeft` on identity scales.

Mmbostock

67% match

Loading thumbnail…

Hexagon Mesh

This interactive visualization displays a mesh of hexagons that users can paint by clicking and dragging with the mouse. A black outline dynamically traces the boundary between filled and unfilled hexagons. The grid is generated on the fly using TopoJSON's geometry data structures, transformed through a custom D3 geo projection to create regular hexagon shapes. The boundary outlines are computed using the `topojson.mesh` API with a filter that identifies edges separating filled from empty cells, rendered as SVG paths via `d3.geo.path`.

Mmbostock

66% match

Loading thumbnail…

Hexagonal Binning (Area) d3v4

A hexagonal binning visualization renders 2,000 randomly generated points from a normal distribution into hexagons of varying size. The area of each hexagon encodes the number of points falling within it, using a square-root scale to map bin counts to hexagon radii. The example uses the d3.hexbin plugin to group points, with SVG paths drawn for each hexagon and clipped to the plot area. Axes are generated using d3.axisBottom and d3.axisLeft, while the random point distribution relies on d3.randomNormal.

PPhilippe Rivière

66% match

Loading thumbnail…

TreeMapping

A static SVG treemap built with plain HTML and CSS, styled with large text and a red color palette. The visualization uses nested rectangles to represent hierarchical data, with layered `<rect>` elements manually positioned via absolute coordinates. Rendered entirely through declarative SVG markup rather than D3 data joins, it serves as a basic exercise in geometric composition and color coding. The code includes D3 v7 via CDN but does not invoke any D3 APIs.

KKamalabot

66% match