w6d3 - HTML5, ajax, APIs and jQuery, or: How I spent 3 hours drawing a triangle

Today was jQuery basics and a revisitation of the openweather.com api.  The challenge was, starting with a simple form (that we built), get a city and the number of days of forecast desired.  Request the relevant info from openweather via ajax query and parse the resulting jQuery object (as opposed to the python/json parsing from our previous encounter).  Then, display the data in table.

The extension project was to display the data in a bar graph using the HTML5 <canvas> tag.  I was able to get both working after some initial faffing about with forms and data retrieval.  The bulk of my time was spent making a) a rainbow fill for a drawing object (not that hard), b) trying to draw triangles instead of rectangles (also not too hard) and c) trying to rearrange the triangles into a stellate pentagon (i.e. a star) which is far more difficult that I could manage.  It's apparantly weird enough that not even StackOverflow has a solution.  I have an idea of how to approach it, but it involves using the matrix transformation in HTML5...and it's been 20 years since linear algebra.  I can even move the triangle using the transformation, but I don't sufficiently understand how the context and positioning work such that I can change locations systematically

Here's my rainbow triangle, anyway:

And here's the Dallas (temperature) forecast for the next 5 days:

You can try it for yourself if you scroll all the way to the bottom of the post.  WARNING: You must type the city with capital letters in the proper place: New York, Columbus, San Francisco, Berlin.

Also, you should refresh the page after each search.

Finally, it doesn't handle large negative temperatures very well.


City: