How do I Draw Logarithmic Axis on Bitmap Image
<p>I am creating a spectrogram where the y axis is the frequency response of an input file.
Based on a min and max frequency (which is variable based on the fs), how would I:</p>

<ol>
<li>plot the y axis for frequency in terms of logarithmic distribution in a meaningful way as shown in the example image below. log10(f), <em>in the chart below the frequency is on the x-axis and is only used to illustrate a point</em></li>
</ol>

<p><strong>Figure 1</strong>
<a href="https://i.stack.imgur.com/9FgUG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9FgUG.png" alt="frequency response graph"></a></p>

<p><em>previous image swapped for one with a more suitable representation of a logarithmic scale</em></p>

<ol start="2">
<li><p>provide a number of annotated reference points along the y axis which directly correlate to values ie 100Hz, 1kHz, 5kHz (in 1/3 octave bands as noted <a href="http://www.engineeringtoolbox.com/octave-bands-frequency-limits-d_1602.html" rel="nofollow noreferrer">here</a>)</p></li>
<li><p>Define pixel to frequency mapping ratio methodology for plotting of frequency where there are <em>n</em> number of frequency bins along y axis</p></li>
</ol>

<p>Finally, whilst I have been able to create a basic graph using the following code, I am at a bit of a loss as to how best implement a log scale in a bitmap image:</p>

<pre><code>    Bitmap spectrogram = new Bitmap(xAxisImageSize, yAxisImageSize);
    // Mmake the Image BG Colour Black
    using (Graphics graph = Graphics.FromImage(spectrogram))
    {
        Rectangle ImageSize = new Rectangle(0, 0, xAxisImageSize, yAxisImageSize);
        graph.FillRectangle(Brushes.Black, ImageSize);
        Pen whitePen = new Pen(Color.White, 3);
        // x axis
        graph.DrawLine(whitePen, 124, 900, 634, 900);
        // x axis label
        graph.DrawString("Time", new Font("Arial", 12), Brushes.White, new PointF(600, 924));
        // y axis
        graph.DrawLine(whitePen, 124, 900, 124, 388);
        // y axis label
        graph.DrawString("f (Hz)", new Font("Arial", 12), Brushes.White, new PointF(24, 388));
        // y axis top frequency
        graph.DrawString("20k", new Font("Arial", 12), Brushes.White, new PointF(75, 388));
        // y axis top marker
        graph.DrawLine(whitePen, 110, 388, 124, 388);
        // x axis Zero Point
        graph.DrawString("0", new Font("Arial", 12), Brushes.White, new PointF(124, 924));
        // y axis Zero Point
        graph.DrawString("0", new Font("Arial", 12), Brushes.White, new PointF(75, 886));
    }
</code></pre>

<p>A scaled render of the image I have created thus far can be seen below.</p>

<p><a href="https://i.stack.imgur.com/0lPcE.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0lPcE.gif" alt="cropped and scaled spectrogram example"></a></p>

<p>Each (monochrome) point in the spectrogram will be plotted using the following snippet:</p>

<pre><code>spectrogram.SetPixel(x, y, Color.FromArgb(255, colour, colour, colour));
</code></pre>

<p>I have all the necessary data to plot on the following axis:</p>

<ol>
<li>x time (linear)</li>
<li>y frequency (logarithmic)</li>
<li>z intensity (logarithmic)</li>
</ol>

<p>An additional challenge is that the image is rendered from the top left rather than bottom right, so if you can show me a sensible way to manage this, I would be very greatful.</p>

<p>This is a c# console application using .NET 4.5.2</p>

<p><strong>UPDATE</strong></p>

<p>By means of hopefully clarifying the question, what I am looking to achieve is something like the charts logarithmic scale mode and implementing that on a bitmap graph axis rather than a chart control:</p>

<pre><code>axis.IsLogarithmic = true;
</code></pre>

<p>so taking the log10(frequency) for which there are (in my example) 256 points/frequency bins between 0 Hz and 21963 Hz then map that onto a y axis with common 1/3 octave center frequency notation on the y axis as shown below:</p>

<p><a href="https://i.stack.imgur.com/jFek9.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jFek9.jpg" alt="enter image description here"></a></p>

<p>Note that the above image was taken from <a href="https://stackoverflow.com/questions/26532175/logarithmic-vertical-and-horizontal-axes-lines-in-ms-chart-control">this post</a> where the OP is requesting similar information to me but on a chart control, the answer of which I cannot use due to not using a chart object.</p>

<p>For clarification on what I mean by 256 points/frequency bins, please see below:</p>

<pre><code>Frequency Bin 0: 0
Frequency Bin 1: 86
Frequency Bin 2: 172
Frequency Bin 3: 258
Frequency Bin 4: 344
Frequency Bin 5: 430
Frequency Bin 6: 516
Frequency Bin 7: 602
Frequency Bin 8: 689
Frequency Bin 9: 775
Frequency Bin 10: 861
Frequency Bin 11: 947
Frequency Bin 12: 1033
Frequency Bin 13: 1119
.....
Frequency Bin 242: 20844
Frequency Bin 243: 20930
Frequency Bin 244: 21016
Frequency Bin 245: 21102
Frequency Bin 246: 21188
Frequency Bin 247: 21274
Frequency Bin 248: 21360
Frequency Bin 249: 21447
Frequency Bin 250: 21533
Frequency Bin 251: 21619
Frequency Bin 252: 21705
Frequency Bin 253: 21791
Frequency Bin 254: 21877
Frequency Bin 255: 21963
</code></pre>