This example use HTML5 Canvas to draw a simple graph.
The Node can be dragged to new positions on the canvas.
| # Define the raw GitHub Gist URL | |
| $gistUrl = "https://gist.githubusercontent.com/kevinfjbecker/8f5c89a1a94d5e298b924c8b180e72d3/raw/fcb245c6b22b48fa8186828f434ab71137d15aac/vite.config.js" | |
| # Define the local file path where the content will be saved | |
| $outputFile = ".\vite.config.js" | |
| # Use Invoke-WebRequest to download the Gist content | |
| try { | |
| Invoke-WebRequest -Uri $gistUrl -OutFile $outputFile | |
| Write-Host "File downloaded successfully: $outputFile" |
| import restart from 'vite-plugin-restart' | |
| export default { | |
| root: 'src/', // Sources files (typically where index.html is) | |
| publicDir: '../static/', // Path from "root" to static assets (files that are served as they are) | |
| base: './', // links relative to the current directory (needed for repository GitHub Pages) | |
| server: | |
| { | |
| host: true, // Open to local network and display URL | |
| open: !('SANDBOX_URL' in process.env || 'CODESANDBOX_HOST' in process.env) // Open if it's not a CodeSandbox |
| root = document | |
| .querySelector('h3[personal_toolbar_folder="true"]') | |
| .parentElement | |
| process_dt(root) | |
| /** | |
| * Process dl: |
| /////////////////////////////////////////////////////////////////////////////// | |
| // example from https://www.dndbeyond.com/sources/xgte/character-names | |
| // let id = 'f0edbf90-4ecc-4a4e-9f3f-17f0b154e25f'; | |
| const getRandomTable = function(id) { | |
| // src: https://stackoverflow.com/questions/3895478/ | |
| const range = (size, startAt = 0) => [...Array(size).keys()].map(i => i + startAt); |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script src="https://code.jquery.com/jquery-3.1.0.js"></script> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>JS Bin</title> | |
| <style id="jsbin-css"> | |
| .button-group { | |
| font-family: Sans-Serif; |
| /////////////////////////////////////////////////////////////////////////////// | |
| // get snapshot data -- this might fail, maybe you need to inspect 1st | |
| $bar = $('#deck1').find('.bar-wrap').first(); | |
| snapshot = angular.element($bar).scope().snapshot | |
| /////////////////////////////////////////////////////////////////////////////// | |
| // inject D3 |
| var canvas; | |
| var ctx; | |
| function init() { | |
| canvas = document.getElementById("canvas"); | |
| ctx = canvas.getContext("2d"); | |
| draw(); | |
| } | |
This example use HTML5 Canvas to draw a simple graph.
The Node can be dragged to new positions on the canvas.
| var graph = { | |
| vertices: [ | |
| { // Castle Black | |
| "x": 240, | |
| "y": 90, | |
| edges: [1,3] | |
| }, | |
| { // Karhold | |
| "x": 320, | |
| "y": 140, |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset=utf-8 /> | |
| <title>Graph Layout</title> | |
| <style> | |
| article, aside, figure, footer, header, hgroup, | |
| menu, nav, section { display: block; } | |
| </style> | |
| </head> |