Binary Search Tree Data Example

Welcome to the Binary Search Tree data example! Here, you can explore how binary search trees work by adding numbers to a static array. Every time you add a number, the array will automatically be sorted and any duplicate entries will be removed, ensuring a clean data structure.

Ready to see the tree? Just click the Return Binary Tree button, and you'll get a dynamic D3.js visualization of your binary search tree. But that’s not all—once the tree is generated, you can search for any number in the tree and visually trace the path of execution as the algorithm works its way through the tree!

Dive in and start experimenting—add numbers, generate your tree, and watch the power of binary search in action. Perfect for those looking to understand how binary search trees operate in a dynamic, visual way!

Curren Array: [10,20,30,40,50]
Sorted Array: [10,20,30,40,50]

Tutorial: Visualizing a Binary Search Tree in Vue.js with D3.js

This tutorial will walk you through how to create an interactive Binary Search Tree (BST) visualization in Vue.js using D3.js. The project will allow users to add numbers to a BST, visualize the tree structure dynamically, and search for a specific number, with the search path highlighted visually.

1. Requirements

Basic knowledge of Vue.js and JavaScript.
Basic understanding of D3.js.
Node.js installed to run the Vue.js project.

2. Set Up Your Vue.js Project

If you don’t have a Vue.js project, create one using Vue CLI:

vue create bst-visualization

Navigate to your project directory:

cd bst-visualization

3. Install D3.js

D3.js is used for visualizing the tree structure. Install it with npm:

npm install d3

4. Create the Vue Component

In your Vue.js project, create a component called BinaryTree.vue that will handle the BST functionality and its visualization.

The Template


<template>
  <v-card>
    <v-card-title>Binary Search Tree Data Example</v-card-title>

    <v-card-text>
      <v-row>
        <v-col>
          <p>Welcome to the <strong>Binary Search Tree</strong> data example! Add numbers, and visualize the tree using D3.js. 
          You can also search for any number to see the path of execution.</p>
        </v-col>
      </v-row>

      <v-row>
        <v-col cols="12" xl="4">
          <v-text-field v-model="selectedNumber" type="number" placeholder="Add Number to Array">
            <template v-slot:append>
              <v-btn text="Add" @click="addNumberToArray"></v-btn>
              <v-btn text="Add Large Array" @click="arr = largeArray, sortedArray = largeArray"></v-btn>
            </template>
          </v-text-field>
        </v-col>
        <v-col cols="12" xl="8">
          <span>Current Array: [10,20,30,40,50]</span>
          <br />
          <span>Sorted Array: [10,20,30,40,50]</span>
        </v-col>
      </v-row>

      <v-row>
        <v-btn @click="binarySearchTree">Return Binary Tree</v-btn>
      </v-row>

      <v-row v-if="result">
        <v-col cols="12" xl="4">
          <v-text-field v-model="selectedNumberToSearch" type="number"
            :bg-color="found ? 'green' : found === false ? 'red' : 'white'" placeholder="Search in Tree">
            <template v-slot:append>
              <v-btn @click="searchBinarySearchTree(result, Number(selectedNumberToSearch))">Search</v-btn>
            </template>
          </v-text-field>
        </v-col>
        <v-col cols="12">
          <span></span>
        </v-col>
      </v-row>

      <v-row>
        <v-col id="d3Tree"></v-col>
      </v-row>
    </v-card-text>
  </v-card>
</template>

5. The Script (JavaScript logic)


export default {
  data: () => ({
    arr: [10, 20, 30, 40, 50],
    sortedArray: [10, 20, 30, 40, 50],
    result: null,
    selectedNumber: null,
    selectedNumberToSearch: null,
    found: null,
    iterations: 0,
  }),
  methods: {
    addNumberToArray() {
      if (!this.arr.includes(Number(this.selectedNumber))) {
        this.arr.push(Number(this.selectedNumber));
        this.sortedArray = [...this.arr].sort((a, b) => a - b);
        this.selectedNumber = null;
      }
    },
    binarySearchTree() {
      this.result = this.sortedArrayToBST(this.sortedArray, 0, this.sortedArray.length - 1);
      this.d3Tree();
    },
    sortedArrayToBST(arr, start, end) {
      if (start > end) return null;
      const mid = Math.floor((start + end) / 2);
      return {
        data: arr[mid],
        left: this.sortedArrayToBST(arr, start, mid - 1),
        right: this.sortedArrayToBST(arr, mid + 1, end),
      };
    },
    d3Tree() {
      // D3.js code to render the tree
    },
    searchBinarySearchTree(node, key) {
      this.iterations++;
      if (!node || node.data === key) {
        this.found = node !== null;
        return node;
      }
      if (key < node.data) return this.searchBinarySearchTree(node.left, key);
      return this.searchBinarySearchTree(node.right, key);
    },
  },
};

6. Explanation

Adding Numbers: Users can add numbers to a static array. The array is sorted, and any duplicates are removed.

Generating the Tree: When the user clicks "Return Binary Tree," the sorted array is converted into a Binary Search Tree using a recursive algorithm, and D3.js is used to visualize it.

Searching: After the tree is generated, users can search for a number. The tree is traversed, and the search path is highlighted using D3.js.

7. Conclusion

This project combines the power of Vue.js and D3.js to create an interactive Binary Search Tree visualization. It allows users to add data, generate a tree, and search through it dynamically, all while visualizing the data structure in real-time.