-
Notifications
You must be signed in to change notification settings - Fork 8
/
Copy pathdemo.html
59 lines (55 loc) · 1.84 KB
/
demo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Language" content="en" />
<meta
name="viewport"
content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width"
/>
<title>Geologic Time</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
a:hover {
color: steelblue;
}
</style>
</head>
<body>
<h1>
@macrostrat/d3-timescale
<a
href="https://github.com/UW-Macrostrat/geo-timescale/"
title="Visit GitHub repository"
rel="noopener"
>
<svg
xmlns="http://www.w3.org/2000/svg"
aria-label="GitHub"
role="img"
width="25"
viewBox="0 0 512 512"
>
<rect width="512" height="512" rx="15%" fill="currentColor" />
<path
fill="#fff"
d="M335 499c14 0 12 17 12 17H165s-2-17 12-17c13 0 16-6 16-12l-1-50c-71 16-86-28-86-28-12-30-28-37-28-37-24-16 1-16 1-16 26 2 40 26 40 26 22 39 59 28 74 22 2-17 9-28 16-35-57-6-116-28-116-126 0-28 10-51 26-69-3-6-11-32 3-67 0 0 21-7 70 26 42-12 86-12 128 0 49-33 70-26 70-26 14 35 6 61 3 67 16 18 26 41 26 69 0 98-60 120-117 126 10 8 18 24 18 48l-1 70c0 6 3 12 16 12z"
/>
</svg>
</a>
</h1>
<h2>Full width</h2>
<div id="geoTimeFullWidth"></div>
<h2>Custom width & height (500px by 250px)</h2>
<div id="geoTimeSmall" style="width: 500px"></div>
<script type="module" src="dist/index.module.js"></script>
<script type="module">
import { geoTimescale } from "./dist/index.module.js";
geoTimescale("#geoTimeFullWidth");
geoTimescale("#geoTimeSmall", { width: 500, height: 250 });
</script>
<!-- <script src="dist/index.umd.js"></script> -->
</body>
</html>