Dynamic Programming

100%

Dynamic Programming

✓ Published0🌍 Public

Last edited Dec 22, 2020

Created on Dec 22, 2020

This example demonstrates the classic combinatorial problem of counting all possible paths on a 2D grid from the top-left to the bottom-right corner, moving only down or right. It visually presents the number of unique routes for various grid dimensions (m × n) as computed by the `gridTraveler` function, which uses memoization to optimize repeated subproblems. The visualization renders the results as an SVG grid, with each cell likely sized and labeled to reflect its path count. The code is built with D3.js v5 and pulls data from the United Nations World Population Prospects 2019 dataset, though the grid computations are self-contained in JavaScript.

AI-generated description

Data: United Nations World Population Prospects 2019.

MIT Licensed

Similar vizzes

Loading thumbnail…

Travelling salesperson with t-SNE (in 1 dimension and on a world map)

A world map rendered with d3-geo-projection’s Bertin projection shows cities as colored circles by population and country. A t-SNE algorithm (tsne.js) runs in a Web Worker, reducing the geographic coordinates to a single dimension. The resulting order sorts cities along a line, and d3.geoPath draws links between consecutive cities in that order, revealing a rough approximation of the travelling salesperson problem. The total great-circle distance of the route is displayed and updated live as the optimization iterates.

PPhilippe Rivière

60% match

Loading thumbnail…

Dynamic Programming

The visualization displays the first 40 Fibonacci numbers as a vertical sequence of text labels, with each number rendered in an SVG text element. It compares classic recursive, memoized recursive, and iterative implementations of the Fibonacci function, logging results to the console. Using D3 v5, the code computes values via `simpleFib` and binds them to SVG text nodes with `svg.selectAll()`. The data comes from the United Nations World Population Prospects 2019, though the visualization itself focuses on algorithmic outputs rather than demographic data.

VVlad Bogo

60% match

Loading thumbnail…

Dynamic Programming

This example illustrates the dynamic programming concept of determining whether a target sum can be formed from a given array of integers, using two recursive approaches: a basic method and an improved memoized version. The visualization displays the result of checking whether 15 can be summed from [3,5,7] as true, alongside the memoization object that records computed subproblem outcomes. Rendered as static SVG text within a light gray frame using D3.js v5, the example highlights the efficiency gains of caching intermediate results.

VVlad Bogo

60% match

Loading thumbnail…

Dynamic Programming - How to get target sum

This visualization demonstrates the dynamic programming approach to solving the "howSum" problem, where the goal is to find a combination of numbers from a given array that adds up to a target sum. The code implements a tabular dynamic programming algorithm that iteratively constructs a table of possible sums, showing how each state can be reached from previous states. Using D3.js version 5, the visualization displays the algorithm's process on an SVG canvas with a light gray background. The example also includes a recursive implementation of the same problem, though the tabular approach is the primary focus, with the data derived from the algorithm's internal logic rather than an external dataset.

VVlad Bogo

58% match

Loading thumbnail…

Random Search II

A maze generated with Wilson’s algorithm is solved through random search. The gray frontier cells expand in random order, while the magenta path highlights the current best-scoring route toward the goal. The visualization uses D3 v3 and Canvas 2D drawing, with a timer running ten random frontier explorations per frame. Cell scores are computed as squared Euclidean distance to the goal, and the animation stops when the goal cell is reached.

Mmbostock

58% match

Loading thumbnail…

Travelling salesman with t-SNE (in 1 dimension and on a US map)

A one-dimensional t-SNE projection of major U.S. cities arranges them along a line, and the code then draws links between consecutive cities in that order onto a map of the United States using `d3.geoAlbersUsa` and `d3.geoPath`. This produces a rough travelling-salesman route whose total geodesic distance is displayed and updated live. The t-SNE computation runs in a Web Worker, using `d3.geoDistance` for pairwise distances, while city circles and links are rendered as SVG. City data comes from a CSV of urban agglomerations and their projected 2015 populations.

PPhilippe Rivière

58% match

Loading thumbnail…

Cross Country Trip

This layered map visualizes global population density using NASA's "Earth at Night" imagery, overlaid with world country and US state borders and Stamen Toner label tiles. The visualization supports panning and zooming, and an animation automatically moves the view westward. Implemented with D3 v4, it uses `d3.tile`, `d3.geoMercator`, `d3.geoPath`, `d3.zoom`, and `d3.timer` to manage tiled raster layers, vector paths, and continuous motion, with a click toggling the animation.

CCurran Kelleher

57% match

Loading thumbnail…

LAP-JV

This example visualizes the linear assignment problem, where colored circles are matched to a grid of cells to minimize total cost. The animation shows each circle transitioning from its random starting position to its assigned grid cell, with connecting lines drawn first, followed by the circles moving into place. The most expensive attribution is highlighted with an annotation callout, showing its cost. The code uses D3 v4 for SVG rendering and transitions, the `lap` function from Fil's port of the Jonker-Volgenant algorithm, and the `d3-annotation()` library to label the maximum-cost pairing. Random data drives the visualization, with distances computed as squared Euclidean offsets.

PPhilippe Rivière

57% match