-
Notifications
You must be signed in to change notification settings - Fork 1
/
plotTutorial.html
182 lines (136 loc) · 7.44 KB
/
plotTutorial.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
182
<html> <head>
<script src="Histo.js"></script>
<script src="Func.js"></script>
<script src="Vector.js"></script>
<script src="Matrix.js"></script>
<script src="distributions.js"></script>
<script src="Plot.js"></script>
</head> <body>
<script type="text/JavaScript">
//-----The PlotStyle() object-----------------------------
/*
PlotStyle() -no arguments
Clairvoyant streamlines the plot styling process by wrapping all
style parameters in a PlotStyle() object. PlotStyle() does nothing
on its own, but an instance can be created and filled with plot
styling options, and then passed as an optional argument to the
draw() functions of most of Clairvoyant's other libraries. In this way,
the user may create a set of PlotStyle() templates in a project and
re-use them to quickly and easily re-create the desired visual character
in many figures without having to re-define the relevant parameters
for each one.
PlotStyle() currently provides control for the following
style elements (many more to come!):
-----Background-----
background background fill color for plot (default 'white')
-----Margins-----
marginScaleY left margin = marginSize * marginScaleY (to accommodate axis labels better, default 1.5)
marginSize size in pixels of the top, bottom and right margins (default 70)
-----Tick Marks-----
bigTick length in pixels of large axis tickmarks (default 10)
smallTick length in pixels of small axis tickmarks (default 5)
majorX number of large axis tickmarks to place on the x-axis (default 3)
minorX number of small axis tickmarks to place between each large axis tickmark on the x-axis (default 9)
majorY number of large axis tickmarks to place on the y-axis (default 3)
minorY number of small axis tickmarks to place between each large axis tickmark on the y-axis (default 9)
xDecimal number of decimal places to keep for x-axis labels
yDecimal number of decimal places to keep for y-axis labels
-----colors-----
color line color (default black)
fill fill color; accepts functions of bin number for highlighting (default white)
NOTE Clairvoyant defines its own fill patterns as well as colors;
currently only left and right crosshatching and dots are implemented, see the
example in histogramTutorial.html.
opacity controls the opacity of the fill, 1 = solid, 0 = invisible. Accepts functions
of bin number (default 1).
-----lines-----
lineWidth line width in pixels, exactly as the HTML5 canvas property lineWidth (default 2)
axisLineWidth as lineWidth, but for the axes and tickmarks.
-----markers-----
marker Shape of the marker used when drawing Graph() points. Currently supports 'circle',
'square' and 'triangle', default 'circle'.
-----fonts-----
---> note fonts include size and modifiers like italic, bold etc. Pass
---> a string conforming to the syntax for context.font objects, such as
---> '24px sans-serif' or 'italic 12px times new roman'
titleFont font of title and axis labels
scaleFont font of scale gradations
textColor color for axis labels, titles and plot title (default 'black')
-----misc-----
suppress 1 implies suppress drawing axes and labels (used for drawing multiple things on same canvas, default 0).
gridLines if > 0, underlays gridlines every <gridLines> pixels, for ease of styling development (default 0).
*/
//-----Plot() objects----------------------------------------------
/*
Plot(<canvas>, <xmin>, <xmax>, <ymin>, <ymax>, <title>, <xtitle>, <ytitle>, <plotstyle>)
<canvas> the HTML5 canvas to draw this Func in
<xmin> minimum x value to draw from
<xmax> maximum x value to draw to
<ymin> minimum y value to draw from
<ymax> maximum y value to draw to
<title> plot title
<xtitle> x axis label
<ytitle> y axis label
<plotstyle> (optional) PlotStyle() object to style this plot with
Clairvoyant creates a Plot() object every time one of the draw()
methods in its other libraries is called. The Plot() object is
responsible for drawing this axes, tickmarks and labels of a plot,
but not the actual content in the plotting window. It will typically
not be called by the user, but we illustrate it here nonetheless:
*/
/*
//-----.plot() method-----------------------------------------------------
plot(<plotstyle>)
<plotstyle> (optional) a PlotStyle() object to style this plot with. If
none provided, uses the PlotStyle() object passed to the constructor
upon declaration; if none passed there either, all defaults are used.
The plot() method draws the grid lines, labels and titles for this plot, using the PlotStyle()
object passed to it, or to the constructor, or uses default parameter values if not PlotStyle()
available, in that order of precidence.
*/
document.write('///////////////////.plot() examples///////////////////////</br></br>');
document.write('An empty plot:</br>');
</script>
<canvas id="canvas1" width="600" height="450"></canvas>
<script type="text/JavaScript">
var emptyPlot = new Plot('canvas1', 0, 100, 0, 10, 'Martian Owl Population', 'years since 2012', 'owls (millions)');
emptyPlot.draw();
document.write('</br>We can underlay gridlines while styling this plot to make it easy to tweak:</br></br>');
</script>
<canvas id="canvas2" width="600" height="450"></canvas>
<script type="text/JavaScript">
var style = new PlotStyle();
style.gridLines = 10; //this will put grid lines every 10 px
emptyPlot.canvas = document.getElementById('canvas2'); //do this to change the canvas to 'canvas2'...
emptyPlot.context = emptyPlot.canvas.getContext("2d"); //...and this to point the context there as well!
emptyPlot.draw(style);
document.write('</br></br>That y-axis label is kind of far away. We can use the Nudge options to fine tune things:</br></br>');
//nudge the y axis label 20 pixels forward in x:
style.yLabelNudgeX = 20;
//make a new canvas so we can compare before and after:
</script>
<canvas id="canvas3" width="600" height="450"></canvas>
<script type="text/JavaScript">
//point at the new canvas like the last example:
emptyPlot.canvas = document.getElementById('canvas3'); //do this to change the canvas to 'canvas3'...
emptyPlot.context = emptyPlot.canvas.getContext("2d"); //...and this to point the context there as well!
emptyPlot.draw(style);
/*
-----LegendStyle() objects------------------------------------
Legends can be styled in Clairvoyant by a LegendStyle() object, much like
plots and their PlotStyle() object. See the histograms tutorial for an
example of Legend() and LegendStyle() in action. The currently implemented
options for LegendStyle() are:
-----fonts-----
font font for legend text. default = '12px sans-serif'
-----colors-----
textColor font color, syntx as per an HTML5 canvas context. default = 'black'
opacity globalAlpha in HTML5 (0 = invisible, 1 = solid). default 1.
-----borders-----
border legend border width in pixels. default 5.
-----thumbnails-----
thumbWidth width in pixels of thumbnail showing element fill / color / border. default 20
thumbHeight height " " default 20
*/
</script>
</body> </html>