/ graph.html
graph.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 6 7 <title>Standalone Graph — Space.js</title> 8 9 <link rel="preconnect" href="https://fonts.gstatic.com"> 10 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Mono"> 11 <link rel="stylesheet" href="assets/css/style.css"> 12 13 <style> 14 *, :after, :before { 15 touch-action: unset; 16 } 17 18 body { 19 position: unset; 20 height: unset; 21 min-height: 100%; 22 padding: 55px 0px; 23 display: flex; 24 flex-direction: column; 25 justify-content: center; 26 align-items: center; 27 gap: 55px; 28 } 29 </style> 30 31 <script type="module"> 32 import { Graph, GraphSegments, clamp, mapLinear } from './src/index.js'; 33 34 // Graph 35 const graph = new Graph({ 36 value: Array.from({ length: 10 }, () => Math.random()), 37 width: document.documentElement.clientWidth * 0.74, 38 height: clamp(mapLinear(document.documentElement.clientHeight, 600, 1000, 40, 80), 40, 80), 39 precision: 2, 40 lookupPrecision: 200 41 }); 42 graph.animateIn(); 43 document.body.appendChild(graph.element); 44 45 // Graph with 2 segments 46 const graph2 = new GraphSegments({ 47 precision: 2, 48 lookupPrecision: 100, // per segment 49 segments: [2, 2] // length of each segment (minimum length of 2) 50 }); 51 graph2.setArray(Array.from({ length: 4 }, () => Math.random())); 52 graph2.setSize(document.documentElement.clientWidth * 0.74, clamp(mapLinear(document.documentElement.clientHeight, 600, 1000, 40, 80), 40, 80)); 53 graph2.animateIn(); 54 document.body.appendChild(graph2.element); 55 56 // Graph with 3 segments and labels 57 const graph3 = new GraphSegments({ 58 precision: 2, 59 lookupPrecision: 100, // per segment 60 segments: [5, 5, 5], // length of each segment (minimum length of 2) 61 labels: ['Segment 1', 'Segment 2', 'Segment 3'] 62 }); 63 graph3.setArray(Array.from({ length: 15 }, () => Math.random())); 64 graph3.setSize(document.documentElement.clientWidth * 0.74, clamp(mapLinear(document.documentElement.clientHeight, 600, 1000, 40, 80), 40, 80)); 65 graph3.animateIn(); 66 document.body.appendChild(graph3.element); 67 68 // Graph with ghost 69 const graph4 = new Graph({ 70 precision: 2, 71 lookupPrecision: 200 72 }); 73 graph4.setArray(Array.from({ length: 10 }, () => Math.random())); 74 graph4.setGhostArray(Array.from({ length: 10 }, () => Math.random())); 75 graph4.setSize(document.documentElement.clientWidth * 0.74, clamp(mapLinear(document.documentElement.clientHeight, 600, 1000, 40, 80), 40, 80)); 76 graph4.animateIn(); 77 document.body.appendChild(graph4.element); 78 79 // Graph with ghost value 80 const graph5 = new Graph({ 81 resolution: 311, 82 precision: 2, 83 ghost: true 84 }); 85 graph5.setSize(document.documentElement.clientWidth * 0.74, clamp(mapLinear(document.documentElement.clientHeight, 600, 1000, 40, 80), 40, 80)); 86 graph5.animateIn(); 87 document.body.appendChild(graph5.element); 88 89 // Graph with uneven segments, ghost and labels 90 const graph6 = new GraphSegments({ 91 value: Array.from({ length: 13 }, () => Math.random()), 92 ghost: Array.from({ length: 13 }, () => Math.random()), 93 precision: 2, 94 lookupPrecision: [100, 100, 50], // per segment 95 segments: [5, 5, 3], // length of each segment (minimum length of 2) 96 ratio: [0.45, 0.45, 0.1], // normalized ratio of each segment 97 labels: ['Segment 1', 'Segment 2', 'Segment 3'] 98 }); 99 graph6.setData([Array.from({ length: 10 }, (_, i) => i + 1), Array.from({ length: 10 }, (_, i) => i + 1), []]); 100 graph6.setSize(document.documentElement.clientWidth * 0.74, clamp(mapLinear(document.documentElement.clientHeight, 600, 1000, 40, 80), 40, 80)); 101 graph6.animateIn(); 102 document.body.appendChild(graph6.element); 103 104 // animation 105 106 let counter = 0; 107 108 function animate() { 109 requestAnimationFrame(animate); 110 111 graph.update(); 112 graph2.update(); 113 graph3.update(); 114 graph4.update(); 115 116 const y = 0.5 + 0.5 * Math.sin(counter++ / 9) * 0.5; 117 graph5.update(y); 118 119 graph6.update(); 120 } 121 122 requestAnimationFrame(animate); 123 124 // resize 125 126 window.addEventListener('resize', onWindowResize); 127 128 function onWindowResize() { 129 const width = document.documentElement.clientWidth * 0.74; 130 const height = clamp(mapLinear(document.documentElement.clientHeight, 600, 1000, 40, 80), 40, 80); 131 132 graph.setSize(width, height); 133 graph2.setSize(width, height); 134 graph3.setSize(width, height); 135 graph4.setSize(width, height); 136 graph5.setSize(width, height); 137 graph6.setSize(width, height); 138 } 139 </script> 140 </head> 141 <body> 142 </body> 143 </html>