bisect

100%

✓ Published0🌍 Public

Last edited Jun 15, 2016

Created on Jun 15, 2016

This example demonstrates how to locate a specific date within a sorted array of objects using D3’s bisector utility. It defines a small dataset of four monthly date–value pairs, then creates a custom bisector that extracts the date property from each object. The code calls `bisector(...).right` on this data with a target date, logging the insertion index where that date would appear to maintain sorted order. The visualization itself produces no graphical output; instead, the focus is purely on the numerical result returned by D3’s bisection algorithm.

AI-generated description

Built with blockbuilder.org

Similar vizzes

Loading thumbnail…

Gist 79ed32828a2db39ec232

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.

11wheel

58% match

Loading thumbnail…

shapes d3.line

A simple SVG line chart plots six date-value pairs from a hard-coded array. The code uses the `d3.line` generator to create a path, setting the x-accessor to the `date` property and the y-accessor to the `value` property. It appends the resulting path to an empty `<svg>` element via `d3.select`. Because no scales or axes are defined, the raw date and value numbers are used directly as pixel coordinates, producing a minimal—and likely misshapen—line visualization.

DDanielAguirre

58% match

Loading thumbnail…

Mergesort III

This visualization shows each pass of the mergesort algorithm as a horizontal row of 200 vertical line segments, with each row representing the array state after one merge phase. The lines are rotated according to their values, creating a waveform-like pattern that reveals the sorting progress from top to bottom. The implementation uses D3 v3 with ordinal and linear scales to position and rotate the lines, and SVG line elements are rendered within separate SVG groups per row. The mergesort function records each intermediate array state, and the code uses `d3.shuffle` and `d3.range` to generate the initial unsorted data.

Mmbostock

57% match

Loading thumbnail…

HTML Starter

This example shows a minimal timeline of four dates using D3.js, rendered as small circles positioned along an SVG line. The visualization uses `d3.scaleTime` to map the date domain to pixel coordinates, with each circle’s center placed via the `cx` attribute and labeled with its full date string. The code imports specific D3 modules (`select`, `scaleTime`, etc.) and appends both circles and text elements to an SVG wrapper. It relies on hardcoded data (four `Date` objects) rather than an external dataset, demonstrating a bare-bones setup for time-based scatter plots.

JJeffrey Mcintyre

57% match

Loading thumbnail…

Quicksort I

A visualization of the quicksort algorithm shows each row as a snapshot of the array before a partition operation, with lines rotated to represent values. Orange lines indicate left-side elements greater than the pivot that need moving right, while green lines show right-side elements less than the pivot needing movement left. Built with D3 v3, it renders 200 shuffled numbers as SVG lines across multiple rows, each animated on mouseover to display values relative to the pivot using ordinal and linear scales, and uses the `quicksort` function to generate partition states.

Mmbostock

57% match

Loading thumbnail…

Untitled

This visualization displays a monthly grid of numeric values, with each month as a row and each date as a column. The data consists of eleven date values for twelve months, rendered as SVG text elements positioned using `d3.scalePoint` for both axes. Custom CSS classes style the month labels in green, while the code uses D3’s selection and join methods (`selectAll().join()`) to bind the plot data. The framework is React, and the chart is drawn entirely with SVG, with axis labels manually placed rather than using generated axes.

Ssubratanp

57% match

Loading thumbnail…

Fork of D3 Scale - ScaleTime

This example demonstrates how D3’s `scaleTime()` maps dates to x-coordinates along a linear time axis. It plots four circles at quarterly intervals between January 2016 and January 2017, positioning them at y=200 while labeling each with its full date string. The visualization uses an SVG canvas, with data bound via D3’s selection join (`selectAll().data().join()`). The scale’s domain spans one year, and its range runs from x=60 to x=900, making temporal spacing explicit. The code imports `scaleTime` from D3’s scales module.

SSubhendu Karmakar

56% match

Loading thumbnail…

Data manipulation workings

This example demonstrates a variety of D3 data manipulation techniques on a small dataset of transaction records. It displays computed statistics such as the minimum, maximum, extent, sum, median, mean, and quantile using d3.min, d3.max, d3.extent, d3.sum, d3.median, d3.mean, and d3.quantile, alongside sorted arrays and a bisect result. The page also experiments with generating synthetic barcode-like data using an exponential distribution and attempts to combine string arrays with timestamped objects via JavaScript’s Array methods and d3.nest, though several of these exploratory operations are commented out or incomplete.

JJimMaltby

56% match