### Install pyvis from source

Source: https://github.com/westhealth/pyvis/blob/master/pyvis/source/install.md

Install pyvis by downloading the project archive and running setup.py.

```bash
python setup.py install
```

--------------------------------

### Install pyvis with pip

Source: https://github.com/westhealth/pyvis/blob/master/pyvis/source/install.md

Use this command to install the pyvis library using pip.

```bash
pip install pyvis
```

--------------------------------

### Setup Popup

Source: https://github.com/westhealth/pyvis/blob/master/notebooks/example.html

Initializes and sets up a popup element with specified text and associates it with a particular UI element index.

```javascript
var i=this;if(!0===this.initialized&&!0===this.allowCreation&&this.popupCounter<this.popupLimit){var n=document.createElement("div");n.id="vis-configuration-popup",n.className="vis-configuration-popup",n.innerText=t,n.onclick=function(){i._removePopup()},this.popupCounter+=1,this.popupDiv={html:n,index:e}}
```

--------------------------------

### Initialize Physics

Source: https://github.com/westhealth/pyvis/blob/master/notebooks/example2.html

Sets up the physics engine for rendering. It either stabilizes the network or starts the simulation based on configuration.

```javascript
initPhysics: function() {
      !0 === this.physicsEnabled && !0 === this.options.enabled && (!0 === this.options.stabilization.enabled ? this.stabilize() : (this.stabilized = !1, this.ready = !0, this.body.emitter.emit("fit", {}, this.layoutFailed), this.startSimulation()))
    }
```

--------------------------------

### Setup and UI Wrappers

Source: https://github.com/westhealth/pyvis/blob/master/notebooks/example3.html

Initializes the manipulation UI by creating necessary DOM elements and wrappers when the manipulation is enabled.

```javascript
\_setup:function(){!0===this.options.enabled?(this.guiEnabled=!0,this.\_createWrappers(),!1===this.editMode?this.\_createEditButton():this.showManipulatorToolbar()):(this.\_removeManipulationDOM(),this.guiEnabled=!1)}},{key:"\_createWrappers",value:function(){var t,e;(void 0===this.manipulationDiv&&(this.manipulationDiv=document.createElement("div"),this.manipulationDiv.className="vis-manipulation",!0===this.editMode?this.manipulationDiv.style.display="block":this.manipulationDiv.style.display="none",this.canvas.frame.appendChild(this.manipulationDiv)),void 0===this.editModeDiv&&(this.editModeDiv=document.createElement("div"),this.editModeDiv.className="vis-edit-mode",!0===this.editMode?this.editModeDiv.style.display="none":this.editModeDiv.style.display="block",this.canvas.frame.appendChild(this.editModeDiv)),void 0===this.closeDiv)&&(this.closeDiv=document.createElement("button"),this.closeDiv.className="vis-close",this.closeDiv.setAttribute("aria-label",null!==(t=null===(e=this.options.locales\[this.options.locale\])||void 0===e?void 0:e.close)&&void 0!==t?t:this.options.locales.en.close),this.closeDiv.style.display=this.manipulationDiv.style.display,this.canvas.frame.appendChild(this.closeDiv))}
```

--------------------------------

### Start Stabilization Process

Source: https://github.com/westhealth/pyvis/blob/master/notebooks/example.html

Initiates the stabilization process for the physics simulation. It resets simulation state, sets target iterations, and starts the iterative stabilization loop.

```javascript
stabilize: function(e = this.options.stabilization.iterations) {
    'number' != typeof e && (e = this.options.stabilization.iterations, console.error('The stabilize method needs a numeric amount of iterations. Switching to default: ', e)),
    0 !== this.physicsBody.physicsNodeIndices.length ? (this.adaptiveTimestep = this.options.adaptiveTimestep, this.body.emitter.emit('_resizeNodes'), this.stopSimulation(), this.stabilized = !1, this.body.emitter.emit('_blockRedraw'), this.targetIterations = e, !0 === this.options.stabilization.onlyDynamicEdges && this._freezeNodes(), this.stabilizationIterations = 0, Sv((function() {
      return t._stabilizationBatch()
    }), 0)) : this.ready = !0
  }
```

--------------------------------

### Handle Connection Start

Source: https://github.com/westhealth/pyvis/blob/master/notebooks/example2.html

Initiates the process of creating a new edge by creating a temporary node and edge. Prevents rapid re-triggering.

```javascript
if((new Date).valueOf()-this.touchTime>100){this.lastTouch=this.body.functions.getPointer(t.center),this.lastTouch.translation=un({},this.body.view.translation),this.interactionHandler.drag.pointer=this.lastTouch,this.interactionHandler.drag.translation=this.lastTouch.translation;var e=this.lastTouch,i=this.selectionHandler.getNodeAt(e);if(void 0!==i)if(!0===i.isCluster)alert(this.options.locales[this.options.locale].createEdgeError||this.options.locales.en.createEdgeError);else{var n=this._getNewTargetNode(i.x,i.y);this.body.nodes[n.id]=n,this.body.nodeIndices.push(n.id),var o=this.body.functions.createEdge({id:"connectionEdge"+Ax(),from:i.id,to:n.id,physics:!1,smooth:{enabled:!0,type:"continuous",roundness:.5}});this.body.edges[o.id]=o,this.body.edgeIndices.push(o.id),this.temporaryIds.nodes.push(n.id),this.temporaryIds.edges.push(o.id)}this.touchTime=(new Date).valueOf()}}
```

--------------------------------

### Start Physics Simulation

Source: https://github.com/westhealth/pyvis/blob/master/notebooks/example2.html

Begins the physics simulation loop. This is typically called after initialization or when physics is enabled.

```javascript
startSimulation: function() {
      var t;
      !0 === this.physicsEnabled && !0 === this.options.enabled && (this.stabilized = !1, this.adaptiveTimestep = !1, this.body.emitter.emit("_resizeNodes"), void 0 === this.viewFunction && (this.viewFunction = zn(t = this.simulationStep).call(t, this), this.body.emitter.on("initRedraw", this.viewFunction), this.body.emitter.emit("_startRendering")))
    }
```

--------------------------------

### Edge Event Listeners Setup

Source: https://github.com/westhealth/pyvis/blob/master/notebooks/example3.html

Sets up listeners for edge add, update, and remove events to synchronize with the data store.

```javascript
o,r=this;Yd(this,t),this.body=e,this.images=i,this.groups=n,this.body.functions.createEdge=zn(o=this.create).call(o,this),this.edgesListeners={
    add:function(t,e){r.add(e.items)},
    update:function(t,e){r.update(e.items)},
    remove:function(t,e){r.remove(e.items)}
  },this.options={},this.defaultOptions={arrows:{to:{enabled:!1,scaleFactor:1,type:"arrow"},middle:{enabled:!1,scaleFactor:1,type:"arrow"},from:{enabled:!1,scaleFactor:1,type:"arrow"}}},endPointOffset:{from:0,to:0},arrowStrikethrough:!0,color:{color:"#848484",highlight:"#848484",hover:"#848484",inherit:"from",opacity:1},dashes:!1,font:{color:"#343434",size:14,face:"arial",background:"none",strokeWidth:2,strokeColor:"#ffffff",align:"horizontal",multi:!1,vadjust:0,bold:{mod:"bold"},boldital:{mod:"bold italic"},ital:{mod:"italic"},mono:{mod:"",size:15,face:"courier new",vadjust:2}},hidden:!1,hoverWidth:1.5,label:void 0,labelHighlightBold:!0,length:void 0,physics:!0,scaling:{min:1,max:15,label:{enabled:!0,min:14,max:30,maxVisible:30,drawThreshold:5},customScalingFunction:function(t,e,i,n){if(e===t)return.5;var o=1/(e-t);return Math.max(0,(n-t)*o)}},selectionWidth:1.5,selfReference:{size:20,angle:Math.PI/4,renderBehindTheNode:!0},shadow:{enabled:!1,color:"rgba(0,0,0,0.5)",size:10,x:5,y:5},background:{enabled:!1,color:"rgba(111,111,111,1)",size:10,dashes:!1},smooth:{enabled:!0,type:"dynamic",forceDirection:"none",roundness:.5},title:void 0,width:1,value:void 0},nm(this.options,this.defaultOptions),this.bindEventListeners()}return Kd(t,[
    {key:"bindEventListeners",value:function(){var t,e,i=this;this.body.emitter.on("_forceDisableDynamicCurves",(function(t){var e=!(arguments.length>1&&void 0!==arguments[1])||arguments[1];"dynamic"===t&&(t="continuous");var n=!1;for(var o in i.body.edges)if(Object.prototype.hasOwnProperty.call(i.body.edges,o)){var r=i.body.edges[o],s=i.body.data.edges.get(o);if(null!=s){var a=s.smooth;void 0!==a&&!0===a.enabled&&"dynamic"===a.type&&(void 0===t?r.setOptions({smooth:!1}):r.setOptions({smooth:{type:t}}),n=!0)}}!0===e&&!0===n&&i.body.emitter.emit("_dataChanged")})),this.body.emitter.on("_dataUpdated",(function(){i.reconnectEdges()})),this.body.emitter.on("refreshEdges",zn(t=this.refresh).call(t,this)),this.body.emitter.on("refresh",zn(e=this.refresh).call(e,this)),this.body.emitter.on("destroy",(function(){hm(i.edgesListeners,(function(t,e){i.body.data.edges&&i.body.data.edges.off(e,t)})),delete i.body.functions.createEdge,delete i.edgesListeners.add,delete i.edgesListeners.update,delete i.edgesListeners.remove,delete i.edgesListeners}))}}
  ])}
```

--------------------------------

### Initialize Physics Simulation

Source: https://github.com/westhealth/pyvis/blob/master/notebooks/example2.html

Initializes the physics simulation based on the selected solver and options. This method is called internally during graph setup.

```javascript
init: function() {
      var t;
      "forceAtlas2Based" === this.options.solver ? (t = this.options.forceAtlas2Based, this.nodesSolver = new wC(this.body, this.physicsBody, t), this.edgesSolver = new gC(this.body, this.physicsBody, t), this.gravitySolver = new _C(this.body, this.physicsBody, t)) : "repulsion" === this.options.solver ? (t = this.options.repulsion, this.nodesSolver = new pC(this.body, this.physicsBody, t), this.edgesSolver = new gC(this.body, this.physicsBody, t), this.gravitySolver = new mC(this.body, this.physicsBody, t)) : "hierarchicalRepulsion" === this.options.solver ? (t = this.options.hierarchicalRepulsion, this.nodesSolver = new vC(this.body, this.physicsBody, t), this.edgesSolver = new yC(this.body, this.physicsBody, t), this.gravitySolver = new mC(this.body, this.physicsBody, t)) : (t = this.options.barnesHut, this.nodesSolver = new fC(this.body, this.physicsBody, t), this.edgesSolver = new gC(this.body, this.physicsBody, t), this.gravitySolver = new mC(this.body, this.physicsBody, t)),
        this.modelOptions = t
    }
```

--------------------------------

### Get Clustered Edges

Source: https://github.com/westhealth/pyvis/blob/master/notebooks/example2.html

Retrieves all edges that are part of a cluster, starting from a given edge ID. This function has a safeguard against infinite loops.

```javascript
getClusteredEdges: function(t) {
  for (var e = [], i = 0; void 0 !== t && void 0 !== this.body.edges[t] && i < 100;) {
    e.push(this.body.edges[t].id),
    t = this.body.edges[t].edgeReplacedById,
    i++
  }
  return Yu(e).call(e), e
}
```

--------------------------------

### Get Arrow Data for Visualization

Source: https://github.com/westhealth/pyvis/blob/master/notebooks/example.html

Determines the geometric data required to draw an arrow, including its starting point, angle, and length. Supports different arrow types and scales.

```javascript
function(t,e,i,n,o,r){var s,a,h,l,d,c,u,f=r.width;"from"===e?(h=this.from,l=this.to,d=r.fromArrowScale<0,c=Math.abs(r.fromArrowScale),u=r.fromArrowType):"to"===e?(h=this.to,l=this.from,d=r.toArrowScale<0,c=Math.abs(r.toArrowScale),u=r.toArrowType):(h=this.to,l=this.from,d=r.middleArrowScale<0,c=Math.abs(r.middleArrowScale),u=r.middleArrowType);var p=15*c+3*f;if(h!=l){var v=p/IO(h.x-l.x,h.y-l.y);if("middle"!==e)if(!0===this.options.smooth.enabled){var g=this._findBorderPosition(h,t,{via:i}),y=this.getPoint(g.t+v*("from"===e?1:-1),i);s=Math.atan2(g.y-y.y,g.x-y.x),a=g}else s=Math.atan2(h.y-l.y,h.x-l.x),a=this._findBorderPosition(h,t);else{var m=(d?-v:v)/2,b=this.getPoint(.5+m,i),w=this.getPoint(.5-m,i);s=Math.atan2(b.y-w.y,b.x-w.x),a=this.getPoint(.5,i)}}else{var k=Kc(this._getCircleData(t),3),_=k[0],x=k[1],E=k[2];if("from"===e){var O=this.options.selfReference.angle,C=this.options.selfReference.angle+Math.PI,S=this._findBorderPositionCircle(this.from,t,{x:_,y:x,low:O,high:C,direction:-1});s=-2*S.t*Math.PI+1.5*Math.PI+.1*Math.PI,a=S}else if("to"===e){var T=this.options.selfReference.angle,M=this.options.selfReference.angle+Math.PI,P=this._findBorderPositionCircle(this.from,t,{x:_,y:x,low:T,high:M,direction:1});s=-2*P.t*Math.PI+1.5*Math.PI-1.1*Math.PI,a=P}else{var D=this.options.selfReference.angle/(2*Math.PI);a=this._pointOnCircle(_,x,E,D),s=-2*D*Math.PI+1.5*Math.PI+.1*Math.PI}}return{point:a,core:{x:a.x-.9*p*Math.cos(s),y:a.y-.9*p*Math.sin(s)},angle:s,length:p,type:u}}
```

--------------------------------

### Get Via Node Coordinates

Source: https://github.com/westhealth/pyvis/blob/master/notebooks/example3.html

Retrieves the coordinates for the via node, used in Bezier curve calculations. Determines coordinates based on the distance between start and end points and smoothing options.

```javascript
key: "_getViaCoordinates",value: function() {
    var t, e, i, n, o = this.from.x - this.to.x,
      r = this.from.y - this.to.y,
      s = this.options.smooth.roundness;
    return (Math.abs(o) > Math.abs(r) || !0 === this.options.smooth.forceDirection || "horizontal" === this.options.smooth.forceDirection) && "vertical" !== this.options.smooth.forceDirection ? (e = this.from.y, n = this.to.y, t = this.from.x - s * o, i = this.to.x + s * o) : (e = this.from.y - s * r, n = this.to.y + s * r, t = this.from.x, i = this.to.x),
    [{x: t, y: e}, {x: i, y: n}]
  }
```

--------------------------------

### Get Point on Cubic Bezier Curve

Source: https://github.com/westhealth/pyvis/blob/master/notebooks/example3.html

Calculates a point on a cubic Bezier curve using the Bernstein polynomial form. Requires start, end, and two control points (via nodes).

```javascript
key: "getPoint",value: function(t) {
    var e = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : this._getViaCoordinates(),
      i = Kc(e, 2),
      n = i[0],
      o = i[1],
      r = t,
      s = [Math.pow(1 - r, 3), 3 * r * Math.pow(1 - r, 2), 3 * Math.pow(r, 2) * (1 - r), Math.pow(r, 3)],
      a = s[0] * this.fromPoint.x + s[1] * n.x + s[2] * o.x + s[3] * this.toPoint.x,
      h = s[0] * this.fromPoint.y + s[1] * n.y + s[2] * o.y + s[3] * this.toPoint.y;
    return {x: a, y: h}
  }
```

--------------------------------

### Network Initialization and Setup

Source: https://github.com/westhealth/pyvis/blob/master/pyvis/templates/animation_template.html

This code snippet initializes the network, captures original edge widths, and sets up the graph. It's the main execution block for the animation template.

```javascript
new_network = drawGraph(); old_edges = getEdges();
```