51 lines
1.3 KiB
HTML
51 lines
1.3 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta name="viewport" content="initial-scale=1,witdh=device-width">
|
||
|
|
|
||
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
|
||
|
|
|
||
|
|
<script src="graph.js" type="text/javascript"></script>
|
||
|
|
<script>
|
||
|
|
window.onload = (()=>{
|
||
|
|
let array = Array.from({length: 15}, () => -10 + Math.floor(Math.random() * 21));
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
graph('graph1', array)
|
||
|
|
graph('graph2', array.map(function(nombre){return nombre+3}))
|
||
|
|
graph('graph3', array.slice().sort((a,b) => (a-b)))
|
||
|
|
graph('graph4', array.filter(function(nombre){return (nombre >= 0)}))
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body class="m-6">
|
||
|
|
<main class="container">
|
||
|
|
<section class="columns is-multiline">
|
||
|
|
|
||
|
|
<div class="column is-6">
|
||
|
|
<h2 class="title is-2">Simple Array</h2>
|
||
|
|
<canvas id="graph1" width="500" height="400"></canvas>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="column is-6">
|
||
|
|
<h2 class="title is-2">Add 3 (using map)</h2>
|
||
|
|
<canvas id="graph2" width="500" height="400"></canvas>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="column is-6">
|
||
|
|
<h2 class="title is-2">Sorted</h2>
|
||
|
|
<canvas id="graph3" width="500" height="400"></canvas>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="column is-6">
|
||
|
|
<h2 class="title is-2">Filtered (positives values)</h2>
|
||
|
|
<canvas id="graph4" width="500" height="400"></canvas>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</section>
|
||
|
|
</main>
|
||
|
|
</body>
|
||
|
|
</html>
|