Skip to content

Commit 9337903

Browse files
nworbdenworbde
committed
updated html doc
1 parent b6b199b commit 9337903

File tree

1 file changed

+86
-63
lines changed

1 file changed

+86
-63
lines changed

‎doc/about_grid.html

Lines changed: 86 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,60 @@
1-
<h1 id="grid-plots-with-pgplot">Grid plots with PGPLOT</h1>
2-
<h2 id="layout">Layout</h2>
3-
<p>Let's start with a simple grid. We'll make it 3 columns by 2 rows. The file width we'll set to 12 (which is about 1152 pixels on my MacBook Pro), and we'll set the aspect ratio (height/width) to 2/3, so that the cells of our grid will be square.</p>
1+
<h1 id="plotting">Plotting</h1>
2+
<h2 id="layout-of-a-single-plot">Layout of a single plot</h2>
3+
<p>We begin with a single plot. When we call <code>PGPLOT</code> we specify a device width and aspect ratio (height/width). The width roughly corresponds to a size in inches. For this example, we'll use a landscape golden rectangle aspect ratio.</p>
4+
<pre><code>win_width = 6.0
5+
win_aspect_ratio = 0.618</code></pre>
6+
<p>Next, we specify a <em>margin</em> around our plot. This is in fractional units, i.e., setting <code>plotname_left_margin = 0.05</code> means that the left margin of <code>plotname</code> is 5% of the plot area width. Our plot area in this case is the whole window, but if our plot were part of a grid layout it would be just the area assigned to it. Setting</p>
7+
<pre><code>simplt_left_margin = 0.05
8+
simplt_right_margin = 0.05
9+
simplt_top_margin = 0.05
10+
simplt_bottom_margin = 0.05</code></pre>
11+
<p>gives us the &quot;box&quot; shown below.</p>
12+
<figure>
13+
<img src="box.png" />
14+
</figure>
15+
<p>Now we need to put something in our box. Our plot will have a title and labels on the left vertical and lower horizontal axes, and we need to allow padding for this. We specify this padding in units of the character size. Let's specify a target character size of 1 em = 14 px, and make the left, top, and bottom margins 4 em = 56 px:</p>
16+
<pre><code>simplt_pad_left_in_em = 4.0
17+
simplt_pad_right_in_em = 0.0
18+
simplt_pad_top_in_em = 4.0
19+
simplt_pad_bottom_in_em = 4.0
20+
simplt_char_size_in_px = 14.0</code></pre>
21+
<p>This gives us the following plot; we've kept a box showing the margins.</p>
22+
<p>A character size of 14 px is common for web browsers. If you output to a postscript file, <code>PGPLOT</code> uses a resolution of 1000 px/inch: a 10 pt character size corresponds to 138 px.</p>
23+
<figure>
24+
<img src="box_with_simple_plot.png" />
25+
</figure>
26+
<p>To add a legend, we need to specify the left and top edge, relative to the plot frame.</p>
27+
<pre><code>lgdplt_legend_left_edge = 0.75
28+
lgdplt_legend_top_edge = 1.0</code></pre>
29+
<p>This puts the left edge of the legend a distance of 0.75 plot width from the left-hand frame, and aligns the top of the legend with the top frame of the plot. If we want the legend outside the plot frame, we need to move the right edge of the plot inward,</p>
30+
<pre><code>lgdplt_plot_right_edge = 0.75</code></pre>
31+
<p>This give the following layout, with the space for the legend marked in red.</p>
32+
<figure>
33+
<img src="long_box.png" />
34+
</figure>
35+
<p>Now we'll put in our figure. To control the look of the legend, we specify the margin between the left edge of the legend &quot;box&quot; and the lines, the margin between the top and the legend text, the space between lines, and the length of the line. All of these are in units of em.</p>
36+
<pre><code>lgdplt_legend_left_margin_in_em = 1.0
37+
lgdplt_legend_top_margin_in_em = 0.5
38+
lgdplt_legend_lineskip_in_em = 1.2
39+
lgdplt_legend_line_length_in_em = 2.0</code></pre>
40+
<p>We also make the text of the legend 70% of the size in the plot.</p>
41+
<pre><code>lgdplt_legend_txt_scale = 0.7</code></pre>
42+
<p>This give the following plot.</p>
43+
<figure>
44+
<img src="long_box_with_legend_plot.png" />
45+
</figure>
46+
<h2 id="layout-of-a-grid.">Layout of a grid.</h2>
47+
<p>Now that we have the mechanics of a single plot, we'll assemble several of them into a grid. Our trial grid is 3 columns by 2 rows. The width we'll set to 12 (which is about 1152 pixels on my MacBook Pro), and we'll set the aspect ratio (height/width) to 2/3, so that the cells of our grid will be square.</p>
448
<pre><code>file_width = 12.0
549
file_aspect_ratio = 0.6666667
650

751
grid_num_cols = 3
852
grid_num_rows = 2
953
grid_num_plots = 6</code></pre>
10-
<p>We want some padding between the rows; let's set that to 20 px.</p>
54+
<p>We can add an offset between the rows and columns; let's set that to 20 px.</p>
1155
<pre><code>grid_col_offset_in_px = 20.0
1256
grid_row_offset_in_px = 20.0</code></pre>
13-
<p>Finally, let's put a border around our grid and set it to be 0.02 of the total window extent.</p>
57+
<p>Finally, let's put a margin of 0.02 of the viewing area width and height around our grid.</p>
1458
<pre><code>grid_pad_left = 0.02
1559
grid_pad_right = 0.02
1660
grid_pad_top = 0.02
@@ -47,69 +91,48 @@ <h2 id="layout">Layout</h2>
4791
grid_plot_row(4) = 2
4892
grid_plot_colspan(4) = 1
4993
grid_plot_rowspan(4) = 1</code></pre>
50-
<p>Here are the results: <img src="grid1.png" title="with plots spanning muliple columns" /></p>
51-
<p>Of course, we need to allow space for the axes and plot titles. We specify their lengths in units of the character size. Let's specify a target character size of 1 em = 14 px, and make the left, top, and bottom margins 4 em = 56 px:</p>
52-
<pre><code>simplt_pad_left_in_em = 4.0
53-
simplt_pad_right_in_em = 0.0
54-
simplt_pad_top_in_em = 4.0
55-
simplt_pad_bottom_in_em = 4.0
56-
simplt_char_size_in_px = 14.0</code></pre>
57-
<p>(I am using the <code>simplt</code> flags for the boxes as well)</p>
58-
<figure>
59-
<img src="grid2.png" title="with 4.0 em padding on left, bottom, and top" />
60-
</figure>
61-
<p>Note that this spacing is fixed even as we reduce the plot size:</p>
62-
<pre><code>file_width = 9.0</code></pre>
63-
<figure>
64-
<img src="grid3.png" title="scaled by 0.75" />
65-
</figure>
66-
<p>Let's go back to our original size and make the upper right and lower left plots have room for a legend that takes up 0.18 of the plot width:</p>
67-
<pre><code>grid_plot_names(2) = &#39;Box_with_Legend&#39;
68-
grid_plot_names(3) = &#39;Box_with_Legend&#39;
69-
lgdplt_legend_width = 0.18
70-
lgdplt_legend_left_margin_in_em = 1.0</code></pre>
71-
<p>We also specifed a gap of 1.0 em between the right edge of the plot and the legend.</p>
72-
<figure>
73-
<img src="grid4.png" title="added legend" />
74-
</figure>
75-
<h2 id="adding-plots">Adding plots</h2>
76-
<p>Now we are ready to add real plots. We have two: 'Simple_Plot', which just draws a sine wave, and 'Legend_Plot', which draws a sine wave and a few harmonics and makes a legend.</p>
77-
<pre><code>grid_plot_names(1) = &#39;Legend_Plot&#39;
78-
grid_plot_names(2) = &#39;Simple_Plot&#39;
94+
<p>This produces the following plot. <img src="grid1.png" title="with plots spanning muliple columns" /></p>
95+
<p>Now we can add our plots. Since the plot with a legend have a larger horizontal extent, we'll put those in the boxes spanning two columns and tha smaller plots in the single column boxes.</p>
96+
<pre><code>grid_plot_names(1) = &#39;Simple_Plot&#39;
97+
grid_plot_col(1) = 1
98+
grid_plot_row(1) = 1
99+
grid_plot_colspan(1) = 1
100+
grid_plot_rowspan(1) = 1
101+
102+
grid_plot_names(2) = &#39;Legend_Plot&#39;
103+
grid_plot_col(2) = 2
104+
grid_plot_row(2) = 1
105+
grid_plot_colspan(2) = 2
106+
grid_plot_rowspan(2) = 1
107+
79108
grid_plot_names(3) = &#39;Legend_Plot&#39;
80-
grid_plot_names(4) = &#39;Simple_Plot&#39;</code></pre>
81-
<p>We put a maring of 0.5 em at the top, and set the distance between baselines in the legend to be 1.2 em; we specify the length of the lines in the legend to be 2.0em:</p>
82-
<pre><code>lgdplt_legend_top_margin_in_em = 0.5
83-
lgdplt_legend_lineskip_in_em = 1.2
84-
lgdplt_legend_line_length_in_em = 2.0 </code></pre>
85-
<p>This gives the following plot.</p>
86-
<figure>
87-
<img src="plt0.png" title="plot with legend" />
88-
</figure>
89-
<p>Notice that the text retains its size as we scale up</p>
90-
<pre><code>file_width = 15.0</code></pre>
109+
grid_plot_col(3) = 1
110+
grid_plot_row(3) = 2
111+
grid_plot_colspan(3) = 2
112+
grid_plot_rowspan(3) = 1
113+
114+
grid_plot_names(4) = &#39;Simple_Plot&#39;
115+
grid_plot_col(4) = 3
116+
grid_plot_row(4) = 2
117+
grid_plot_colspan(4) = 1
118+
grid_plot_rowspan(4) = 1</code></pre>
119+
<p>We also apply a reduction in scale to the text of each plot, and a further reduction for the legend plot:</p>
120+
<pre><code>grid_subplot_text_scale = 0.85
121+
lgdplt_legend_txt_scale = 0.85</code></pre>
122+
<p>Since the default character size of the plots are at 14 px, this means when shown on a grid the text will be at 11 px and the legends will be at 10 px.</p>
91123
<figure>
92-
<img src="plt1.png" title="scaled up" />
124+
<img src="grid2.png" />
93125
</figure>
94-
<p>and down</p>
126+
<p>Now let's reduce the size of the figure:</p>
95127
<pre><code>file_width = 9.0</code></pre>
128+
<p>We'll keep everything else the same, with one exception. We'll need to allow more space for the figure legend:</p>
129+
<pre><code>lgdplt_plot_right_edge = 0.75
130+
lgdplt_legend_left_edge = 0.75</code></pre>
131+
<p>This produces the following plot; notice that the text is at the same scale as the previous version.</p>
96132
<figure>
97-
<img src="plt2.png" title="scaled down" />
98-
</figure>
99-
<p>Of course, our legend is now too big. Let's reduce that to 70% of the current text size</p>
100-
<pre><code>lgdplt_legend_txt_scale = 0.7</code></pre>
101-
<p>This also reduces the line lengths, since they are in units of text size.</p>
102-
<figure>
103-
<img src="plt3.png" title="legend reduced by 0.7" />
104-
</figure>
105-
<p>Let's push the legend down and increase the spacing between lines</p>
106-
<pre><code>lgdplt_legend_top_margin_in_em = 2.5
107-
lgdplt_legend_lineskip_in_em = 2.0</code></pre>
108-
<figure>
109-
<img src="plt4.png" title="moved legend" />
133+
<img src="grid3.png" />
110134
</figure>
111-
<p>Finally, let's set the target character size on the simple plots (upper left and lower right) to be 10px:</p>
112-
<pre><code>simplt_char_size_in_px = 10.0</code></pre>
135+
<p>Here is the final result, with the layout boxes removed.</p>
113136
<figure>
114-
<img src="plt5.png" title="with text size change on the simple plot" />
137+
<img src="grid4.png" />
115138
</figure>

0 commit comments

Comments
 (0)