javascript graph

Comment

1

Tip Himanshu Jangid 1 GREPCC

class Graph {
  constructor(directed = true) {
    this.directed = directed;
    this.nodes = [];
    this.edges = new Map();
  }

  addNode(key, value = key) {
    this.nodes.push({ key, value });
  }

  addEdge(a, b, weight) {
    this.edges.set(JSON.stringify([a, b]), { a, b, weight });
    if (!this.directed)
      this.edges.set(JSON.stringify([b, a]), { a: b, b: a, weight });
  }

  removeNode(key) {
    this.nodes = this.nodes.filter(n => n.key !== key);
    [...this.edges.values()].forEach(({ a, b }) => {
      if (a === key || b === key) this.edges.delete(JSON.stringify([a, b]));
    });
  }

  removeEdge(a, b) {
    this.edges.delete(JSON.stringify([a, b]));
    if (!this.directed) this.edges.delete(JSON.stringify([b, a]));
  }

  findNode(key) {
    return this.nodes.find(x => x.key === key);
  }

  hasEdge(a, b) {
    return this.edges.has(JSON.stringify([a, b]));
  }

  setEdgeWeight(a, b, weight) {
    this.edges.set(JSON.stringify([a, b]), { a, b, weight });
    if (!this.directed)
      this.edges.set(JSON.stringify([b, a]), { a: b, b: a, weight });
  }

  getEdgeWeight(a, b) {
    return this.edges.get(JSON.stringify([a, b])).weight;
  }

  adjacent(key) {
    return [...this.edges.values()].reduce((acc, { a, b }) => {
      if (a === key) acc.push(b);
      return acc;
    }, []);
  }

  indegree(key) {
    return [...this.edges.values()].reduce((acc, { a, b }) => {
      if (b === key) acc++;
      return acc;
    }, 0);
  }

  outdegree(key) {
    return [...this.edges.values()].reduce((acc, { a, b }) => {
      if (a === key) acc++;
      return acc;
    }, 0);
  }
}

xxxxxxxxxx

class Graph {

  constructor(directed = true) {

    this.directed = directed;

    this.nodes = [];

    this.edges = new Map();

  addNode(key, value = key) {

    this.nodes.push({ key, value });

  addEdge(a, b, weight) {

    this.edges.set(JSON.stringify([a, b]), { a, b, weight });

    if (!this.directed)

      this.edges.set(JSON.stringify([b, a]), { a: b, b: a, weight });

  removeNode(key) {

    this.nodes = this.nodes.filter(n => n.key !== key);

    [...this.edges.values()].forEach(({ a, b }) => {

      if (a === key || b === key) this.edges.delete(JSON.stringify([a, b]));

});

  removeEdge(a, b) {

    this.edges.delete(JSON.stringify([a, b]));

    if (!this.directed) this.edges.delete(JSON.stringify([b, a]));

  findNode(key) {

    return this.nodes.find(x => x.key === key);

  hasEdge(a, b) {

    return this.edges.has(JSON.stringify([a, b]));

  setEdgeWeight(a, b, weight) {

    this.edges.set(JSON.stringify([a, b]), { a, b, weight });

    if (!this.directed)

      this.edges.set(JSON.stringify([b, a]), { a: b, b: a, weight });

  getEdgeWeight(a, b) {

    return this.edges.get(JSON.stringify([a, b])).weight;

  adjacent(key) {

    return [...this.edges.values()].reduce((acc, { a, b }) => {

      if (a === key) acc.push(b);

      return acc;

    }, []);

  indegree(key) {

    return [...this.edges.values()].reduce((acc, { a, b }) => {

      if (b === key) acc++;

      return acc;

    }, 0);

  outdegree(key) {

    return [...this.edges.values()].reduce((acc, { a, b }) => {

      if (a === key) acc++;

      return acc;

    }, 0);

Popularity 9/10 Helpfulness 3/10 Language javascript

Source: www.30secondsofcode.org

Tags: graph javascript

Share

Link to this answer
Share Copy Link

Contributed on Jan 09 2024

Himanshu Jangid

0 Answers Avg Quality 2/10

how to make a graph in javascript

Comment

1

Tip Mehedi Islam Ripon 1 GREPCC

To create a graph in JavaScript, you can use a library like D3.js, Chart.js, or Google 
Charts. Here's an example using Chart.js:

1. Include the Chart.js library in your HTML file:
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

2. Create a canvas element in your HTML file where the graph will be displayed:
<canvas id="myChart"></canvas>

3. In your JavaScript code, create a Chart object and configure it with your data 
and options:
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June'],
        datasets: [{
            label: 'Sales',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

This code creates a bar chart with data for sales in January through June. You can 
customize the chart type, labels, data, colors, and other options to suit your needs. 
Once you've created the Chart object, it will automatically render the graph in the
canvas element on your web page.

xxxxxxxxxx

To create a graph in JavaScript, you can use a library like D3.js, Chart.js, or Google

Charts. Here's an example using Chart.js:

1. Include the Chart.js library in your HTML file:

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

2. Create a canvas element in your HTML file where the graph will be displayed:

<canvas id="myChart"></canvas>

3. In your JavaScript code, create a Chart object and configure it with your data

and options:

var ctx = document.getElementById('myChart').getContext('2d');

var myChart = new Chart(ctx, {

    type: 'bar',

    data: {

        labels: ['January', 'February', 'March', 'April', 'May', 'June'],

        datasets: [{

            label: 'Sales',

            data: [12, 19, 3, 5, 2, 3],

            backgroundColor: [

                'rgba(255, 99, 132, 0.2)',

                'rgba(54, 162, 235, 0.2)',

                'rgba(255, 206, 86, 0.2)',

                'rgba(75, 192, 192, 0.2)',

                'rgba(153, 102, 255, 0.2)',

                'rgba(255, 159, 64, 0.2)'

],

            borderColor: [

                'rgba(255, 99, 132, 1)',

                'rgba(54, 162, 235, 1)',

                'rgba(255, 206, 86, 1)',

                'rgba(75, 192, 192, 1)',

                'rgba(153, 102, 255, 1)',

                'rgba(255, 159, 64, 1)'

],

            borderWidth: 1

}]

},

    options: {

        scales: {

            y: {

                beginAtZero: true

});

This code creates a bar chart with data for sales in January through June. You can

customize the chart type, labels, data, colors, and other options to suit your needs.

Once you've created the Chart object, it will automatically render the graph in the

canvas element on your web page.

Popularity 9/10 Helpfulness 3/10 Language javascript

Source: Grepper

Tags: graph grap

Share

Link to this answer
Share Copy Link

Contributed on Mar 14 2023

Mehedi Islam Ripon

0 Answers Avg Quality 2/10

graph js

Comment

3

Tip I don't know 1 GREPCC

// JS graph data structure

function Graph() {
  this.nodes = [];
}

function Node(val) {
  this.val = val;
  this.edges = [];
}

// Add ass many nodes as you want at once
Graph.prototype.addNodes = function (...val) {
  for (i of val) {
    this.nodes.push(new Node(i));
  }
};

// Add edges to each node
Graph.prototype.addEdges = function (val, ...edges) {
  const node = this.nodes.find((i) => i.val === val);
  for (edgeVal of edges) {
    node.edges.push(this.nodes.find((i) => i.val === edgeVal));
  }
};

// BFS algorithm
Graph.prototype.bfs = function (root) {
  const queue = [root];
  const visited = [];

  while (queue.length > 0) {
    current = queue.pop();

    if (visited.includes(current)) continue;
    visited.push(current);

    let node = this.nodes.find((i) => i.val === current);
    console.log(node.val);

    for (i of node.edges) {
      if (!visited.includes(i.val)) queue.unshift(i.val);
    }
  }
};

// DFS algorithm
Graph.prototype.dfs = function (root, visited = []) {
  if (!visited.includes(root)) {
    visited.push(root);
    console.log(root);

    const node = this.nodes.find((i) => i.val === root);
    for (i of node.edges) this.dfs(i.val, visited);
  }
};

const graph = new Graph();

graph.addNodes(0, 1, 2, 3, 4);
graph.addEdges(0, 1, 2, 3);
graph.addEdges(1, 4);
graph.addEdges(4, 3, 1);

// 0 -> 1, 2, 3
// 1 -> 4
// 4 -> 3, 1

graph.dfs(0);

// DFS: 0, 1, 4, 3, 2
// BFS: 0, 1, 2, 3, 4

xxxxxxxxxx

// JS graph data structure

function Graph() {

  this.nodes = [];

function Node(val) {

  this.val = val;

  this.edges = [];

// Add ass many nodes as you want at once

Graph.prototype.addNodes = function (...val) {

  for (i of val) {

    this.nodes.push(new Node(i));

};

// Add edges to each node

Graph.prototype.addEdges = function (val, ...edges) {

  const node = this.nodes.find((i) => i.val === val);

  for (edgeVal of edges) {

    node.edges.push(this.nodes.find((i) => i.val === edgeVal));

};

// BFS algorithm

Graph.prototype.bfs = function (root) {

  const queue = [root];

  const visited = [];

  while (queue.length > 0) {

    current = queue.pop();

    if (visited.includes(current)) continue;

    visited.push(current);

    let node = this.nodes.find((i) => i.val === current);

    console.log(node.val);

    for (i of node.edges) {

      if (!visited.includes(i.val)) queue.unshift(i.val);

};

// DFS algorithm

Graph.prototype.dfs = function (root, visited = []) {

  if (!visited.includes(root)) {

    visited.push(root);

    console.log(root);

    const node = this.nodes.find((i) => i.val === root);

    for (i of node.edges) this.dfs(i.val, visited);

};

const graph = new Graph();

graph.addNodes(0, 1, 2, 3, 4);

graph.addEdges(0, 1, 2, 3);

graph.addEdges(1, 4);

graph.addEdges(4, 3, 1);

// 0 -> 1, 2, 3

// 1 -> 4

// 4 -> 3, 1

graph.dfs(0);

// DFS: 0, 1, 4, 3, 2

// BFS: 0, 1, 2, 3, 4

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: graph grap

Share

Link to this answer
Share Copy Link

Contributed on Jul 26 2022

I don't know

0 Answers Avg Quality 2/10

javascript graph

Contents

More Related Answers