This repository has been archived by the owner on Dec 29, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 95
/
demo.html
83 lines (82 loc) · 2.4 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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE html>
<meta charset=utf-8>
<title>Palette generator demo</title>
<style>
span, b {
display: inline-block;
height: 1.5em;
vertical-align: middle;
}
b {
padding-left: 0.5em;
}
form {
position: fixed;
top: 0;
left: 0;
}
#palettes, fieldset, #legend {
padding: 1em;
margin: 1em;
border: 1px solid #666;
background: #FFF;
}
#palettes {
margin-top: 10em;
}
table, tbody, tr, td, th {
border: 0 none #FFF;
}
fieldset th {
text-align: right;
vertical-align: top;
padding-right: 0.5em;
}
#tooltip {
position: fixed;
bottom: 1em;
left: 1em;
padding: 1em;
border: 1px solid #666;
height: 1em;
width: 20em;
text-align: center;
background: #FFF;
}
</style>
<body>
<form>
<fieldset>
<legend>Settings</legend>
<table>
<tr>
<th><label for=blindness>Colour blindness simulation</label>
<td><select id=blindness><option value="">None</select>
<tr>
<th><label for=number>Number of colours</label><br>
<td><input type=number min=1 max=100 value=8 id=number><br>
</table>
</fieldset>
</form>
<div id=palettes title="Hover over colour to see its value, click to keep selection."></div>
<div id=tooltip></div>
<div id=legend>
<p>“cbf” after the palette’s name indicates given palette is “colourblind
friendly”, i.e. colours are distinguishable even by a colour-blind person.
All single hue palettes are colourblind friendly.
<p>Paul Tol’s palettes have been designed to be colourblind
friendly as well as printer friendly. More information about
them can be found at
<a href=http://www.sron.nl/~pault>www.sron.nl/~pault</a>.
<p>ColorBrewer palettes have been designed by Cynthia Brewer for
use in maps. More information about them, including interactive
demo, can be found at
<a href=http://colorbrewer2.org>colorbrewer2.org</a>.
<p>Soralized palette have been designed by Ethan Schoonover for use with
terminal and GUI applications. As such, it has not been optimised for use
in graphs or maps, but the library includes them nonetheless. More
information about Solarized can be found at
<a href=http://ethanschoonover.com/solarized>ethanschoonover.com/solarized</a>.
</div>
<script src=palette.js></script>
<script src=demo.js></script>