Visualization and interactive comparison of TECFA Community Portal activity user scores
Conceptual goals
Using statistical data for the top 20 user scores of the Tecfa Community portal. I extracted data from an XML document containing statistics of user activity and using PHP and DOM I generated an SVG graph that shows all scores for all users and upon selection of a particular user will highlight this user's scores.
Although PHP was used to generate the final SVG output and the PHP file displays the graph in Firefox 1.5 with native SVG, the interactivity only works when viewing the SVG file with a browser that uses the Adobe SVG plugin.
Technical goals
- provide a visualization of user scores in a scatter graph using SVG and data from an XML document
- use SVG/SMIL events for some simple interactivity
- become more familiar with DOM elements used with javascript (ECMAScript)
Process
Design:
A scatter graph shows points for the scores of each user according to a portal activity.The graph is rough and it is difficult to get precise scores from it, but these can be seen in detail on the portal. The aim was to give a different perspective to the information given on the portal by putting it in a graphic visualization.
All the scores remain visible at all times. By moving the mouse over a user name's bounding box, arrows appear on the graph, next to that user's scores. This allows a quick overview of the most common types of activities on the portal as well a detailed view of which user takes part in which type of activity.
Technical:
For source data I copied the user scores from the TECFA Community portal into an excel file that I then imported into OxygenXML and edited to replace the tag names produced by the import function to more semantically relevant tag names.
Since one of the goals of the exercise was to use javascript and DOM, I began with the intention to to launch a function through an onclick event that used javascript and DOM methods to get the name of the user selected and then reset the radius and colour values of the respective points on the graph. The fact that the SVG graphical points generated by a PHP foreach () loop all had the same id attribute value meant that I could not target the desired set of points. A workaround could have been to use a variable for the id within the group (<g>) containing the graphic points, that would be incremented with the position of the user. Then each user's points would have a unique id. This too became problematic, because XML demands a unique id for each element, meaning that the function was only applied to the first element encountered with the id shared by all the user's points.
I had to finally either opt for a non-javascript solution or redesign the goal of my project. I chose to use a simple SVG animation activated by a mouseover event for the buttons containing the names of the users.
To generate the points of the graph I used a foreach loop that targeted the childnodes of each <user> element. I discovered that with DOM the text content of a node is also treated as a node (#textnode) and as such was represented graphically on the graph. To get around this I used a variable ($actCheck) to get the nodeName of each childnode and a long if condition to display only the desired nodenames.
The y coordinate ($ypos) of each point was taken from the value (score) of each node and subracted from the height of the graph to invert the default top-to-bottom display of coordinates. The x coordinate for each node was passed by a variable that multiplied by a factor of 20, the variable $pos that was incremented for each <user> element's childnode.
I repeated the foreach loop that generated all the points on the scatter graph and included an SVG animation that displays the points whose id is has the value of $currName. The animation is activated by a mouseover event on the buttons containing the user names, and highlights the selected user's scores. The buttons' (<rect>) id is set through the $currName variable that retrieves the value of the first childnode (item(0)) of the <user> element for each user. I then use the $currName variable to give the <animate> SVG elements generated the begin attribute value that corresponds to the id of each button. By changing style of the group containing the element and animation from none to block, the animation displays an arrow next to the points representing the scores of the user selected by moving the mouse over a button.
Documents
welcome, stats_svg.php (source)- used to generate the SVG, stats_svg.svg (source)-file to view, userstats.xml
References
- php Manual
- DKS's online presentation documents: Introduction à XML avec PHP, Interactivité avec SVG
- DOM elements interface
- SVG examples at TECFA