forked from anomal/RainbowVis-JS
-
Notifications
You must be signed in to change notification settings - Fork 0
/
example.html
141 lines (135 loc) · 4.42 KB
/
example.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
<!DOCTYPE html>
<html>
<head>
<title>RainbowVis-JS Examples</title>
<script src="rainbowvis.js"></script>
<style type="text/css">
table { border-collapse:collapse; }
table,th, td { border: 1px solid black; }
</style>
</head>
<body>
<script type="text/javascript">
window.onload = function(){
try {
// Mappings
// Default
var rainbow = new Rainbow(); // by default, range is 0 to 100
var s = '<h3>Default</h3>';
for (var i = 0; i <= 100; i = i + 10) {
var hex = '#' + rainbow.colourAt(i);
s += '<span style="color:' + hex + '">' + i + ' -> ' + hex + '</span><br/>';
}
// Custom
s += '<h3>Custom</h3>';
rainbow.setSpectrum('red', 'FFFFFF', '#00ff00');
rainbow.setNumberRange(-0.5, 0.5);
for (var i = -5; i <= 5 ; i++) {
var hex = '#' + rainbow.colourAt(i/10);
s += '<span style="color:' + hex + '">' + i/10 + ' -> ' + hex + '</span><br/>';
}
document.getElementById("mappings").innerHTML = s;
// Wattages
var wattages = [
["Clothes Dryer",5000],
["Air Conditioner (36,000 BTU)",4500],
["Water Heater (Quick Recovery)",4500],
["Range (Oven)",2660],
["Range (Self Cleaning Cycle)",2500],
["Power Tools (Circular Saw)",1800],
["Vacuum Cleaner",1560],
["Air Conditioner (12,000 BTU)",1500],
["Convection Oven",1500],
["Curling Iron",1500],
["Heater (Portable)",1500],
["Jacuzzi (Maintain Temperature, 2 Person)",1500],
["Microwave Oven",1500],
["Toaster",1400],
["Dishwasher (Dry Cycle)",1200],
["Fry Pan",1200],
["Waffle Iron",1200],
["Coffee Maker (Auto Drip)",1165],
["Hair Dryer (Hand Held)",1000],
["Heater (Auto Engine, Winter)",1000],
["Iron",1000],
["Motor (1 HP)",1000],
["Auto Engine Heater",600],
["Washer",512],
["Sump Pump (1/2 HP)",500],
["Water Pump (1/2 HP)",460],
["Dehumidifier (20 Pints, Summer)",450],
["Refrigerator/Freezer (Frostfree,17.5cu.ft.)",450],
["Freezer (Automatic Defrost 15 cu. ft.)",440],
["Disposal",420],
["Compactor",400],
["Fan (Attic)",400],
["Blender",385],
["Waterbed Heater (Queen Size)",375],
["Computer (With Monitor and Printer)",365],
["Satellite Dish (Includes Receiver)",360],
["Freezer (Manual Defrost, 15 cu. ft.)",350],
["Garage Door Opener",350],
["Heating System (Warm Air Fan)",312],
["CD, Tape, Radio, Receiver System",250],
["Heat Lamp",250],
["Dishwasher (Wash Cycle)",200],
["Television (Color, Solid State)",200],
["Heat Tape (30ft., Winter)",180],
["Humidifier (Winter)",177],
["Electric Blanket",175],
["Battery Charger (Car)",150],
["Lighting (Outdoor Floor)",120],
["Mixer, Hand",100],
["Fan (Ceiling)",80],
["Lighting (Incandescent)",75],
["Radio",71],
["Bug Zapper",40],
["Lighting (Fluorescent)",40],
["VCR/DVD",21],
["Lighting (Compact Fluorescent)",18],
["Clock",3]
];
var heatmap = new Rainbow();
heatmap.setSpectrum('black', 'blue', 'aqua', 'lime', 'yellow', 'red');
heatmap.setNumberRange(0, 5000);
var table = '<table><tr><th>Appliance</th><th>Typical Wattage</th></tr>';
for (var i = 0; i < wattages.length; i++) {
var appliance = wattages[i][0];
var watts = wattages[i][1];
table += '<tr><td>' + appliance + '</td>';
var hexColour = '#' + heatmap.colourAt(watts);
table += '<td style="background-color:' + hexColour + '; color: #fff">' + watts + '</td></tr>';
}
table += '</table>';
table += '<p>Source: <a href="http://www.cornhusker-power.com/householdappliances.asp">Operating Costs of Household Appliances</a></p>';
document.getElementById("wattages").innerHTML = table;
// Canvas Drawing
var RAINBOW_WIDTH = 60;
var RAINBOW_RADIUS = 130;
var rainbow2 = new Rainbow();
rainbow2.setNumberRange(1, RAINBOW_WIDTH);
rainbow2.setSpectrum('FF0000', 'FFFF00', '00FF00', '00FFFF', '0000FF', 'FF00FF');
var canvas = document.getElementById('MyRainbow');
var context = canvas.getContext('2d');
context.lineWidth = 1;
for (var i = 1; i <= RAINBOW_WIDTH; i++) {
context.beginPath();
context.arc(canvas.width / 2, canvas.width / 2, RAINBOW_RADIUS - i + 1, Math.PI, 0, false);
context.strokeStyle = '#' + rainbow2.colourAt(i);
context.stroke();
}
} catch (err) {
alert(err);
}
};
</script>
<h2>Mappings</h2>
<div id="mappings"></div>
<h2>Data Visualization</h2>
<div id="wattages"></div>
<h2>Canvas Drawing</h2>
<canvas id="MyRainbow" width="300" height="300">
<p>Rainbow arc example. Your browser doesn't support canvas.</p>
</canvas>
</body>
</html>