-
Notifications
You must be signed in to change notification settings - Fork 88
/
index.html
181 lines (165 loc) · 7.81 KB
/
index.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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
<!DOCTYPE html>
<html>
<head>
<!--[if lte IE 8]><script type="text/javascript">window.location.replace( "flash/index.php" );</script><![endif]-->
<title>ColorBrewer: Color Advice for Maps</title>
<link href='https://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="lib/spectrum.css" />
<script type="text/javascript" src="colorbrewer_schemes.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="lib/jquery.svg.min.js" type="text/javascript"></script>
<script src="lib/jquery.svgdom.min.js" type="text/javascript"></script>
<script type="text/javascript" src="lib/spectrum.min.js"></script>
<script type="text/javascript" src="cmyk.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-8516419-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<div id="wrapper">
<div id="left">
<div id="number" class="section">
<div class="learn-more" id="number-learn-more" title="Learn more"></div>
<p>Number of data classes:</p>
<select id="num-classes">
<option name="3">3</option>
<option name="4">4</option>
<option name="5">5</option>
<option name="6">6</option>
<option name="7">7</option>
<option name="8">8</option>
<option name="9">9</option>
<option name="10">10</option>
<option name="11">11</option>
<option name="12">12</option>
</select>
</div> <!--end number div-->
<div id="type" class="section">
<div class="learn-more" id="schemes-learn-more" title="Learn more"></div>
<p>Nature of your data:</p>
<input type="radio" class="scheme-type" name="scheme-type" id="sequential" checked/><label class="check-label" for="sequential">sequential</label>
<input type="radio" class="scheme-type" name="scheme-type" id="diverging"/><label class="check-label" for="diverging">diverging</label>
<input type="radio" class="scheme-type" name="scheme-type" id="qualitative"/><label class="check-label" for="qualitative">qualitative</label>
</div>
<div id="scheme" class="section">
<p>Pick a color scheme:</p>
<div id="scheme1">
<label id="multi"></label>
<div id="ramps"></div>
</div> <!--end scheme1 div-->
<div id="scheme2">
<label id="single"></label>
<div id="singlehue"></div>
</div> <!--end scheme2 div-->
</div> <!--end scheme div-->
<div id="colors">
<div id="options">
<div class="learn-more" id="filters-learn-more" title="Learn more"></div>
<p>Only show:</p>
<div id="filters">
<input type="checkbox" id="blindcheck" /><label for="blindcheck">colorblind safe</label><br/>
<input type="checkbox" id="printcheck" /><label for="printcheck">print friendly</label><br/>
<input type="checkbox" id="copycheck" /><label for="copycheck">photocopy safe</label>
</div> <!--end filters div-->
<div class="learn-more" id="context-learn-more"></div>
<p>Context:</p>
<div id="layers">
<input type="checkbox" id="roadscheck" /><label for="roadscheck">roads</label><input class="color" type="text" id="road-color"/><br/>
<input type="checkbox" id="citiescheck" /><label for="citiescheck">cities</label><input class="color" type="text" id="city-color"/><br/>
<input type="checkbox" id="borderscheck" checked /><label for="borderscheck">borders</label><input class="color" type="text" id="border-color"/><br/>
</div> <!--end layers div-->
<p>Background:</p>
<div id="background">
<input type="radio" name="background-radio" id="solid-color" checked/><label class="check-label" for="solid-color">solid color</label><input class="color" type="text" id="bg-color"/><br/>
<input type="radio" name="background-radio" id="terrain"/><label class="check-label" for="terrain">terrain</label>
<div id="transparency-container">
<div id="transparency-track"></div>
<div id="transparency-slider"></div>
<p>color transparency</p>
</div>
</div> <!--end background div-->
</div> <!--end options div-->
<div id="system">
<p id="scheme-name">BuGn</p>
<div style="height:27px">
<div class="score-icon ok" id="blind-icon"></div>
<div class="score-icon ok" id="copy-icon"></div>
<div class="score-icon ok" id="screen-icon"></div>
<div class="score-icon ok" id="print-icon"></div>
</div>
<select id="color-system">
<option>HEX</option>
<option>RGB</option>
<option>CMYK</option>
</select>
<div id="color-chips"></div>
<div id="color-values"></div>
</div> <!--end system div-->
</div> <!--end colors div-->
</div> <!--end left div-->
<div id="header">
<p id="nav"><a id="how" href="#">how to use</a> | <a href="http://www.personal.psu.edu/cab38/ColorBrewer/ColorBrewer_updates.html" target="blank">updates</a> | <a id="downloads" href="#">downloads</a> | <a id="credits" href="#">credits</a></p>
<h1>COLOR<span>BREWER</span> 2.0</h1>
<h3>color advice for cartography</h3>
</div> <!--end header-->
<div id="map-container">
<div id="counties" class="svg-container"></div>
<div id="overlays" class="svg-container"></div>
</div> <!--end map-container-->
<div id="export">
<div id="tab">
<div>EXPORT</div>
</div> <!--end tab div-->
<div id="selected-data">
<h2>Export your selected color scheme:</h2>
<div id="perma">
<h3>Permalink</h3>
<p>Share a direct link to this color scheme.</p>
<input type="text" id="permalink" value="https://colorbrewer2.org/js/blahblah/" />
</div> <!--end perma div-->
<div id="adobe">
<h3>Adobe</h3>
<p>Download an <a id="ase" href="#" target="_blank">Adobe Swatch Exchange (ASE) file</a> of this scheme.</p>
</div> <!--end adobe div-->
<div id="gimp">
<h3>GIMP and Inkscape</h3>
<p><a id="gpl" href="#" target="_blank">GIMP color palette</a> for this scheme.</p>
</div> <!--end adobe div-->
<div class="copy" id="copy-json">
<h3>JavaScript</h3>
<p>Colors for this scheme as a JS array</p>
<input type="text" id="permalink" value="JSON!" />
</div>
<div class="copy" id="copy-css">
<h3>CSS</h3>
<p>CSS classes for this scheme</p>
<input type="text" id="permalink" value="CSS!" />
</div>
</div> <!--end selected-data div-->
</div> <!--end export div-->
<div id="probe"></div>
</div> <!--end wrapper div-->
<div id="footer">
<a href="http://axismaps.com" target="_blank"><img src="images/axismaps.png" class="logo" alt="Axis Maps" title="Axis Maps"/></a>
<p>© Cynthia Brewer, Mark Harrower and The Pennsylvania State University</p>
<p><a href="https://github.com/axismaps/colorbrewer/" target="_blank"><img src='images/GitHub-Mark-32px.png' class='gh'/>Source code and feedback</a></p>
<p><a href="http://colorbrewer.org/flash">Back to Flash version</a><br/>
<a href="http://www.personal.psu.edu/cab38/ColorBrewer/ColorBrewer.html">Back to ColorBrewer 1.0</a></p>
</div> <!--end footer-->
<div id="mask"></div>
<div id="learnmore" style="display:none">
<p id="close">X</p>
<p id="learnmore-title">MUGGIN'</p>
<div id="content"></div>
</div>
<script src="colorbrewer.js"></script>
</body>
</html>