This example doesn't work because of Blogger limitations. However if you run the example you will be able to select graphs in the generated HTML page.
Problem Statement
You have a program which generates lots of similar plots that end users would like to compare and explore. The end users may not be able to install any code. You can't setup a web server to nagivate the data set. You can not install any new programs on their window's desktop. How to you provide a solution?Discussion
You can assume that any modern computer at least has a copy of Firefox, Safari, or Explorer. Since there browers support javascript (except in the worst case security settings), you can build a very lightweight data viewer using a few simple methods. The most important design decisions when generating the plots is to name the plots so they are easy to recreate from selections an end user might make.Example
The following snippet of Python code generates 9 graphs that have random numbers plotted on two axes using different colors and markers. There are three choices of colors and three choices of markers. After generating the plots and saving them, the script creates an HTML file which simplies the navigation of the images. A user can open the HTML page and select the graph by changing the form selections at the top of the page.There are a couple of key concepts that help make this work:
- The plot names can be created from selections using javascript. For example, in this example there are three colors and three different markers. All of the plot file names are formed by concatenating the color and marker description to form a plot name.
- When a user changes their choice of color or marker a javascript function rebuilds the plot file name and causes the browser to reload the image by change the img source.
- The python script uses templates to set up the bulk of the HTML page, then substitutes in specific options for the user after the plots have been generated.
import pylab as plt
from random import random
from string import Template
colors = {'Red_Plot':'r',
'Blue_Plot':'b',
'Green_Plot':'g',
}
markers = {'Circle_Plot':'o',
'Square_Plot':'s',
'Diamond_Plot':'d',
}
plt.figure()
for c_key in colors.keys():
for m_key in markers.keys():
plt.clf()
plot_name = c_key + ',' + m_key + '.png'
x = [random() for i in range(0,100)]
y = [random() for i in range(0,100)]
color = colors[c_key]
marker = markers[m_key]
plt.plot(x,y,color+marker,markersize=15)
plt.savefig(plot_name)
HTML_template = Template('''<head>
<script language="JavaScript"><!--
function sel_plot() {
// only do this if the brower supports images
if(document.images) {
// get plot color name
var e=document.getElementById("color_name");
var c_name = e.options[e.selectedIndex].text;
// get plot marker name
var e=document.getElementById("marker_name");
var m_name = e.options[e.selectedIndex].text; // create the filename
// build the filename from these selections
var plot_filename = c_name + "," + m_name + ".png";
// cause the correct plot to be loaded
document["plot"].src = plot_filename;
}
}
// select the plot to display initially after loading document
window.onload = function() { sel_plot() };
// silence errors
window.onerr = null;
</script>
</head>
<body>
<center>
<form name="Plot Select Form" id="plot_select_form">
<select id="color_name" size="3"
onchange="sel_plot()">
$color_options
</select>
<select id="marker_name" size="3"
onchange="sel_plot()">
$marker_options
</select>
</form>
<img name="plot" src="dummy.png" height="200"
width="500">
</center>
</body>
''')
# build the option strings
def build_options(opt_dict):
s = ''
for i,key in enumerate(opt_dict.keys()):
if i==1:
s += '<option selected>'
else:
s += '<option>'
s += key
s += '</option>\n'
return s
color_options = build_options(colors)
marker_options = build_options(markers)
# build the HTML page
HTML = HTML_template.substitute(color_options=color_options,
marker_options=marker_options)
# write the HTML page
f = open('example.html','wb')
f.write(HTML)
f.close()
Test Configuration
- PythonXY 2.7.2.1
- IE 9
Posts
