Public
Edited
Sep 14, 2023
Insert cell
Insert cell
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Three Canvases</title>
</head>
<body>
<canvas id="tabs" width="640" height="150" style="position: absolute; top: 0px; left: 0px; border:1px solid #000000; background-color: white;"></canvas>
<script src="script.js"></script>
<canvas id="teks" width="640" height="930" style="position: absolute; top: 150px; left: 0px; border:1px solid #000000; background-color: white;"></canvas>
<script src="script.js"></script>
<canvas id="carte" width="1280" height="1080" style="position: absolute; top: 0px; left: 640px; border:1px solid #000000; background-color: white;"></canvas>
<script src="script.js"></script>
</body>
</html>
Insert cell
function resizeCanvas() {
tabs.width = window.innerWidth * 0.33333;
tabs.height = window.innerHeight * 0.13888;

teks.width = window.innerWidth * 0.33333;
teks.height = window.innerHeight * 0.13888;
}
Insert cell
Select a data source…
Type Chart, then Shift-Enter. Ctrl-space for more options.

Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more