seancarmody

Protovis Loader is a plugin which faciliates the use of <a href="http://vis.stanford.edu/protovis/" rel="nofollow ugc">Protovis</a> scripts. Protovis is a javascript data visualisation library being developed at Stanford, which allows the creation of interactive charts on web pages.
Incorporating Javascript code into WordPress posts can be tricky as it (deliberately) sanitises text typed into posts, which interferes with Javascript. When I first began experimenting with Javascript, this cause me some difficulties, as described in this post. In the end, I decided to roll up my sleeves and write a plugin to make the whole process a lot easier. Protovis Loader was the result.
Protovis Loader makes the whole process a lot easier in two ways:
<ol>
<li>It ships with a copy of the Protovis javascript library and once the plugin is activated, links to the library will automatically be included in page headers.</li>
<li>It creates a shortcode called [pvis] which makes it very easy to include Protovis scripts in blog posts and pages.</li>
</ol>
Usage:
Simply use the [pvis] shortcode in your posts and pages where you want to include a Protovis chart. There are a number of optional parameters:
<ul>
<li>type: ‘chart’ (default) displays a chart in a box with an optional caption, ‘inline’ has no box (e.g. useful for sparklines)</li>
<li>src: path to a Protovis (javascript) code file</li>
<li>height: height of canvas box for the chart</li>
<li>width: width of canvas box for the chart</li>
<li>img: path to a fallback image to use when scripts are blocked or the browser does not support Protovis</li>
<li>alt: alt text for the fallback image</li>
<li>caption: image caption</li>
</ul>
If any content is supplied between the opening [pvis] tag and the closing [/pvis] tag, it is taken to be javascript for inclusion. It may also be interpreted as a caption, but only if a caption field is not supplied and a src field is supplied.
Here is an example of use of the tag:
[pvis src=”http://www.example.com/chart.js” img=”fails.png” height=”125px”]My Caption![/pvis]
You can see the plugin in action on <a href="http://www.stubbornmule.net/resources/protovis-loader/" rel="nofollow ugc">the Stubborn Mule</a>.
<h3>To-Do List</h3>
This list is not really prioritised yet.
<ol>
<li>Improve user-agent (browser) detection</li>
<li>Create an options page</li>
<li>Allow custom CSS files</li>
<li>Allow for alterntive specification of the protovis js library</li>
<li>Replace tags in the imported script to allow shortcode parameters to be used in the script</li>
</ol>
I’m sure there’ll be a lot more!

Protovis Loader

Creates a shortcode to faciliate the use of Protovis data visualization scripts in blog posts.

armandorivero

A WP site has posts, custom posts, users and taxonomy terms. The Connectome shows them all in a single interactive visualization as nodes and links of a graph. Also, we calculate some importance measure for these nodes and display it in the nodes sizes. The Connectome, then, should provide insight about the structure of your site and a different navigation, mostly interesting for the site admin but perhaps also, after some configurations, good to show to your visitors.
I think The Connectome could be useful to novice WP site creators because it will help you learn all the essential elements in your site and how they connect to each other.
The “importance measure” for the nodes is the <code>degree centrality</code>, that is, how many links touch the node.
This is the first release of my first plugin so I’m very exited and scared, but also quite open to suggestions, requests or criticism. I would be especially happy if more experienced developers inspected my code and gave me their opinions.
<h3>Live demo</h3>
It’s for a small site, but anyways
<a href="https://dantecubantours.com/graph/" rel="nofollow ugc">WP Connectome Demo</a>
<h3>Road map</h3>
I have a long list of improvements to include in future releases, among them:
<ul>
<li>Responsiveness and more flexible behavior for the visualization</li>
<li>Search functionality to find nodes in the graph</li>
<li>Having several graphs with different configurations to show in different parts of your site</li>
<li>Tell the admin about problematic nodes like posts without featured image or excerpt text, taxonomy terms without description, etc.</li>
<li>More interesting importance measures like the eigenvalue or the betweeness centralities, perhaps allowing the user to pick which one to use</li>
<li>Multilingual support, right now it’s only English. Besides making it translation ready, this will also imply to make the plugin compatible with multilingual plugins like Polylang or WPML</li>
</ul>
If you think one of them is more urgent thant others, you can also tell me.
<h3>Performance</h3>
The good news is that, once the graph is created, it’s stored on the DB and and used until you save the options again in the options page. However, to build the graph we first include all the elements (but those manually disabled) and then connect them to calculate the centrality and evaluate which are the most important. Only then we reduce the elements, using the centrality as the metrics. That means a very big site (with many users, posts and terms) will require a lot of resources and time to create the graph, even if it ends up having few elements. Only when the elements are manually disabled they don’t participate on the graph creation. Probably if you have a very big site you would have a server with ample resources, but if you don’t, then probably is not a good idea to use The Connectome until the implementation changes.

The Connectome

The Connectome shows all of your users, posts, custom posts and taxonomy terms in a single interactive visualization.

Protovis Loader vs The Connectome