SVG is a relatively new and powerful open-source technology specifically designed for the creation of interactive graphics and animation for web pages.
As well as producing results that are visually very impressive, SVG has a number of advantages over previously existing technologies. Like HTML, it is a text-based language. This means that SVG content is fully searchable, and can therefore be indexed by search engines, unlike conventional graphic imagery.
SVG works well with other technologies such as JavaScript and Active Server Pages. This means that SVG images can be generated dynamically, for example by linking their contents to a database.
You are welcome to look at the source code for any of these examples, if you are interested in learning more about SVG. However if you wish to reproduce them please ask for permission first. I will probably be willing to grant it provided there is some suitable acknowledgement.
You can view the source code for any of these examples by right-clicking the mouse on the SVG image, and selecting "view source" from the pop-up menu.
This well-known fractal curve is constructed by starting with a single large triangle. Each straight edge is then divided into three, with a new triangle being added to the centre third. The process is then repeated ad infinitum
The curve is the outside edge formed by this process. It has an infinite length. It is continuous, but it is impossible to draw a tangent to any point on the curve. By using the zoom option of the SVG viewer it is possible to see intuitively why this is so: any straight edge will be broken up by an infinite series of further triangles.
The drawing is created by a fairly straightforward program, combining javascript with SVG. A javascript function to draw the series of smaller and smaller triangles is called recursively. Unfortunately, limitations on computing power mean that there has to be a limit to the number of iterations, and these are limited to 7 in order that the program will run in a reasonable length of time on a slower machine.
If you have a faster computer and would like to see more levels you can change the source code. Download the SVG code by right-clicking on the image and choosing the option "save SVG as..". Just change the line "var maxits=7;" in the SVG file (near the top) to whatever value you choose. Then open the SVG document using Internet Explorer.
Named after the Polish mathematician Vaclav Sierpinski, the Sierpinski Carpet (which is the bit left after all the red squares have been removed) has an unbounded perimeter and zero area. The Siepinski triangle also has unbounded perimeter and zero area.
Unfortunately limitations in computing power mean that the number of levels that can be drawn have to be restricted. If you think your computer can handle it though you are free to change the limit. You will need to download the HTML document and the SVG code (see procedure described above). Just change the javascript statement "var maxlevel=6;" in the HTML document "carpet.html". Then open this using Internet Explorer. Exactly the same procedure applies for the triangle.
You will need to have cookies enabled for these examples to work.
Although the chart only uses data for three local authorities, it could be extended in a straightforward manner to include data for many more local authorities, by adding to the database. The data are stored in a Microsoft Access database from which the records are read using Microsoft ASP (Active Server Pages).
The chart itself is then drawn using SVG and javascript, and javascript functions are used to create the interactive styling controls.
By default the chart displays the actual numbers in each age range. However this can be changed to a percentage of the total population of that area and gender by selecting the "% of total" on the display control panel.
The data control panel also offers further options for the display of data. In addition to allowing the user to choose the area and gender for which the data are displayed, choosing one or both of the data comparison options results in the data being displayed as a ratio of the comparison group.
For example if we select females in Wiltshire as our data group, and "ratio to males" as our comparison, the values displayed for each age group are:-
Number of Females in Wiltshire
___________________________________
Number of Males in Wiltshire
If we select "ratio to UK" as the comparison the values displayed for each age group are:-
Number of Females in Wiltshire
_____________________________________
Number of Females in UK
To make this comparison more meaningful the numbers are then adjusted by multiplying by (total females all ages in UK)/(total females all ages in Wiltshire) so that the result should be roughly centered around 1.
If we select "ratio to males" and "ratio to UK" as our comparisons, the values displayed are:-
Ratio of Females to Males in Wiltshire
____________________________________________
Ratio of Females to Males in UK
If "% of total" is selected on the display control panel all these comparison results are displayed as percentages rather than ratios.
The data are drawn from the 2001 Census, and are available at www.statistics.gov.uk. This is a great website to visit if you love statistical data - it truly is a mine of information.