Autocomplete with static files [2/4] - Visualization of words in a Trie

An interactive visualization of how to implement autocomplete without a backend server, using only static files. This post will help with understanding the underpinnings of autocomplete using a Trie data structure.

Tue Nov 21 2017

This post allows you to visualize how autocomplete data would be arranged within a Prefix Trie data structure. If you would like an introduction to Trie data structures before continuing, please check out Julia’s article on Medium.

Using the visualization

The words can be changed on the fly; this will adjust the Trie diagram
Sentences may be used instead of words
The letters constituting each of the words are represented in the tree as nodes
The end of each full word is marked on the node with the text “endWord”
Clicking on any of the nodes will trace down from that node. You will be shown the words and have an option to download them.
- This is the basis; we will expand on when we implement our autocomplete static file generator

Source code

I created this visualization with the React framework, to the availability of ReactD3 and ReactD3 Tree.

Edit on GitHub

Autocomplete with static files [2/4] - Visualization of words in a Trie

An interactive visualization of how to implement autocomplete without a backend server, using only static files. This post will help with understanding the underpinnings of autocomplete using a Trie data structure.

Using the visualization

Source code

Find the number of non-contiguous islands in a 2d matrix world

Using recursion and depth-first search to find all islands in a given 2d matrix world

Find the median in a data stream

Adding incoming data in a way that it's optimized to always knowing the median

First missing positive

Find the first missing positive integer in an array in O(array_length) time from LeetCode

Median of two arrays

Getting the median of two sorted arrays in O(log(small_array_length)).

Merge k sorted linked lists

Disseminating the "merge k sorted linked lists" problem from Leetcode.com.

Setup Isso comments on your website today

This guide goes through everything you need to get the open source commenting software Isso running on your website for completely free with Google Cloud.

ZigZag conversion algorithm

A dive into the ZigZag letter conversion on Leetcode.com. Letters initially are written in a zig-zag formation and must be read back from left to right.

Cherry pickup algorithm

An in-depth look at the Cherry Pickup problem on Leetcode.com.

Autocomplete with static files [4/4] - Implementing autocomplete with generated static files

At this stage, we should have already have generated our 'data source' of autocomplete JSON files. We can now finally implement a working text box with autocomplete functionality, which consumes these files.

Autocomplete with static files [3/4] - Building an autocomplete static file generator

In this post we will be implementing an autocomplete static file generator, using the principles, learned in the past two articles in this series. Also within this post is a working demo which produces static autocomplete JSON files for a CSV.

Autocomplete with static files [2/4] - Visualization of words in a Trie

An interactive visualization of how to implement autocomplete without a backend server, using only static files. This post will help with understanding the underpinnings of autocomplete using a Trie data structure.

Autocomplete with static files [1/4] - Introduction

An introduction to static files and the benefits of generating static files for your autocomplete implementation.

Representing numbers, using sticks and stones.

NHibernate QueryOver examples using the C# library

QueryOver is a powerful wrapper for the NHibernate ORM Criteria API. It is type-safe with a familiar syntax to Lambda expressions and LINQ. This post covers a nice range of real-world usage examples.

Creating an Android app, with a large offline database (over 4GB)

Today we will be covering large SQLite databases with the Android PhoneGap framework. We will be going over the challenges and opportunities of running offline Android apps with scale.

Linking in-text citations to numbered references on a page

In this post, we will be adding a usability feature by adding hover functionality to citations. When hovering over a citation, we will show the corresponding reference text. In this example, we are dealing with unstructured HTML and using a set of business rules to link the citations to references.