HomeAlgorithms & AIWeighted Edit Distance: Cost Landscape & Alignment Path

Weighted Edit Distance: Cost Landscape & Alignment Path

Interactive 2D dynamic-programming heatmap for the weighted edit-distance problem: tune insertion, deletion and substitution costs and watch the DP table fill cell-by-cell, then trace the optimal alignment path back through it.

Algorithms & AI2DModerate60 FPS📱 Mobile-adapted⇄ 3D version
2d-dynamic-programming-edit-distance ↗ Open standalone

Every pair of strings has a dynamic-programming cost matrix hidden inside it: a grid where cell (i, j) holds the minimum cost to turn the first i characters of one string into the first j characters of the other. This simulator renders that matrix as a real 2D heatmap, animates the actual cell-by-cell fill order the recurrence requires, and then traces the real optimal alignment path — the exact sequence of insertions, deletions and substitutions — as a glowing line back through the grid. Sliders let you set independent, asymmetric costs for each operation type, and the whole heatmap, edit script and path recompute live, showing how the cheapest edit sequence bends when one kind of edit becomes more expensive than the others.

⚙ Under the hood

Explore the weighted edit-distance dynamic-programming table as a 3D cost landscape: tune independent insertion, deletion and substitution costs (plus optional Damerau transposition) and watch the optimal alignment path bend live across the surface.

dynamic programmingedit distancelevenshteinsequence alignmentalgorithmsstring matching

2D · HTML5 Canvas 2D · 60 FPS target · runs fully client-side, no install

What did you find?

Add reproduction steps (optional)