Gist 79ed32828a2db39ec232

100%

Gist 79ed32828a2db39ec232

✓ Published0🌍 Public

Last edited Aug 21, 2016

Created on May 25, 2015

This example demonstrates a divide-and-conquer binary search tree constructed over a set of disjoint line segments that span a horizontal strip, with endpoints on two parallel lines. It visualizes how the segments partition the strip into regions and how a query point can be located by traversing the tree. The code uses D3.js with SVG to draw the segments, circles, and tree edges, and employs custom helper functions like `dataAppend` and `translate` from d3-jetpack. The tree is built by recursively splitting the sorted list of bottom endpoints, and the visualization highlights the connection between the geometric arrangement and the hierarchical search structure.

AI-generated description

Let S be a set of n disjoint line segments whose upper endpoints lie on the line y = 1 and whose lower endpoints lie on the line y = 0. These segments partition the horizontal strip [−∞ : ∞] × [0 : 1] into n + 1 regions. Give an O(nlogn) time algorithm to build a binary search tree on the segments in S such that the region containing a query point can be determined in O(log n) time. Also describe the query algorithm in detail.

Similar vizzes

Loading thumbnail…

Closest Line Segment

A brushless interaction demonstrates nearest-neighbor search over line segments. As the mouse moves, a red highlight identifies the closest segment to the cursor, with the active segment brought to the front. The example builds a binary tree of segment bounding boxes to accelerate the search, using a custom min-heap to prune distant branches. The segment geometry derives from a sine wave, rendered as SVG paths via `d3.geo.path`. The search logic is implemented in a standalone `tree.js` module, while `d3.mouse` handles coordinate tracking.

Mmbostock

71% match

Loading thumbnail…

Line Segment Intersection

An interactive line segment intersection test visualizes a red segment controlled by the mouse crossing a black horizontal sine wave. A spatial index tree organizes the wave's segments, and as the mouse moves, the d3.geo.path projection is used to redraw the test line, highlighting any intersecting segments in red. The example uses D3.js and a custom tree.js data structure to efficiently query for collisions based on bounding-box extents.

Mmbostock

70% match

Loading thumbnail…

Layout Test

This example demonstrates a hierarchical tree layout rendered as an SVG visualization, with data representing a page structure of components and partials. The tree uses d3.tree and d3.hierarchy to compute node positions, while d3.linkHorizontal draws curved paths between parent and child nodes. The visualization supports pan and zoom through d3.zoom, with the zoom transform applied to a group element containing the rendered tree. A data store module supplies the hierarchical data, and the code includes a typo where circles are appended using the incorrect tag name instead of “circle.”

MMatt Morris

68% match

Loading thumbnail…

Collapsible Tree Example

This example shows a collapsible tree diagram with a horizontal orientation, displaying hierarchical data with parent and child nodes connected by curved links. The tree layout is computed using `d3.layout.tree`, and links are drawn as SVG paths using `d3.svg.diagonal` with a custom projection that swaps x and y coordinates to achieve the horizontal layout. Nodes are rendered as circles with text labels, and the code uses D3 version 3.5.17, loading the library from a CDN. The data is hardcoded as a JavaScript array with nested objects representing the tree structure.

Dd3noob

67% match

Loading thumbnail…

Segmented Lines

Four time series are drawn as thick segmented lines, each segment colored green, gray, or red based on its slope via a linear color scale from 0 to π. Circles mark every data point, while the y-axis is scaled to the maximum of all series, loaded from a local JSON file. The code uses d3.svg.line with segment arrays generated by a helper function, and applies stroke styling through d3.scale.linear and Math.atan2 on segment endpoints.

Mmbostock

67% match

Loading thumbnail…

Simple horizontal tree diagram using v7

This horizontal tree diagram shows a three-level hierarchy with a root node, two second-level nodes, and two leaf nodes, rendered as white circles with steel-blue outlines connected by curved gray links. Using d3.v7’s `d3.tree` layout and `d3.hierarchy` functions, the code positions nodes along the x-axis and assigns coordinates via the `treemap` call, then draws SVG paths for the links and SVG groups for the nodes, with labels placed to the left or right of each circle depending on whether the node has children. The data is hardcoded inline as a JSON object, and the diagram is built entirely with SVG elements appended to the page body using d3.select and `.append`.

Dd3noob

67% match

Loading thumbnail…

Simple vertical tree diagram using v7

This is a simple vertical tree diagram built with d3.js v7, displaying a small hierarchical dataset with a top-level node, a branching level, and leaf nodes. It shows parent-child relationships using curved links, with internal and leaf nodes styled differently via circles and text labels. The code uses the `d3.tree()` layout and `d3.hierarchy()` to compute node positions, then renders the structure as SVG paths and groups. The data is embedded directly in the script, and the visualization is designed as a starting point for further development.

Dd3noob

67% match

Loading thumbnail…

Gist e3a7564e0daaea9e8d19

This example shows a hierarchical tree layout rendered with D3.js, using the cluster layout to display the Flare visualization toolkit’s class hierarchy. The SVG visualization is organized as an indented dendrogram, with circular nodes connected by elbow-shaped paths. Parent nodes are labeled to the left of their circles, while leaf nodes are labeled to the right. The layout encodes the data’s parent-child relationships through vertical positioning, with the tree flowing horizontally across the 960×2200 pixel canvas.

CCBasis

67% match