thanks to this site for the images! feel free to suggest other good elements from there.

for use on the results of this atomic spectra database:

CSS:

.ac {
    background-color: red;
    display: inline-block;
    width: 1px;
    height: 200px;
}

javurscript:

var jq = document.createElement('script');
jq.src = "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(jq);

wait a moment and more javascript:

jQuery.noConflict();
$ = jQuery;

var the_table = $($('table')[4]);

function do_stuff(start, end, intensity_cutoff) {
var wavelengths = [];

$(the_table.find('tbody')[1]).find('tr').each(function() { 
if ($(this).hasClass('evn') || $(this).hasClass('odd')) { $(this).show(); }
else { $(this).hide(); return true; }

var wavelength_cell = $($(this).find('td')[0]); 
var wavelength = parseFloat(wavelength_cell.text());
if (wavelength >= start && wavelength <= end) { $(this).show(); }
else { $(this).hide(); return true;}

var intensity_cell = $($(this).find('td')[2]); 
var intensity = parseInt(intensity_cell.text(), 10);
if (intensity >= intensity_cutoff) { $(this).show(); }
else { $(this).hide(); return true;}

wavelengths.push((wavelength - start)/(end - start));
});
return wavelengths;
}


the_table.after($('<div id="shoof-thing"></div>').attr('height', '100px').attr('width', '100%'));
var c = $('#shoof-thing')


function new_thing(x) { return $('<div></div>').addClass('ac').css('margin-left', x); }


var w = do_stuff(380, 760, 9);
var l = w.length;
var o = [];
$.each(w, function(i, v) {
if (i == 0) { o.push("" + (v*95) + "%"); }
else { o.push("" + ((v-w[i-1])*95) + "%"); }
});
c.children().remove();
$.each(o, function(i, v) { c.append(new_thing(v)); });