Shepherd Interactive

One of my favorite things about working at Shepherd Interactive is that I am encouraged to research cutting-edge technologies and experiment with innovative solutions. Often this research is done for client projects, but if I have some down time, I am encouraged to work on projects that interest me. It’s similar to Google’s 20% policy. The end result is that work is more enjoyable, I gain experience with areas that I may not run into on everyday client work, the community benefits from new open source solutions, and Shepherd Interactive benefits from increased exposure.

An example of these open source projects is the SchemaGraph tool I just published on my personal site:

SchemaGraph is a MySQL database schema visualization tool inspired by Schemaball. Recently I’ve been working on a personal project that has a complex schema structure; it has many tables and dozens of foreign key constraints among them. I need a tool which displays all of the tables at once and all of the interrelationships among them so that I can keep track of what is going on. I would have used Schemaball instead of developing a new solution, but I found a couple disadvantages with Schemaball: it generates static raster images when I wanted a dynamic vector images, and its requirements include several dependencies on Perl modules which can be a hassle to install. I really liked the format that Schemaball used to visualize a database schema, but I just wanted to have a standalone script which I could place on a web server, point it at a database, and have it generate an interactive SVG image. To use with future projects at Shepherd Interactive, I wanted maximum portability and minimal configuration with immediate results.

SchemaGraph, like Schemaball, queries the MySQL information_schema database to get all of the necessary information about a database’s (InnoDB) tables to construct a graph; this graph is then output as an interactive SVG image (see example) with the following features:

• Tables in the schema are placed equidistantly around a circle.
• Clicking the image causes the graph to rotate.
• Foreign key constraints are represented by bézier curves connecting table labels.
• Hovering over a table or a constraint causes the table’s label to highlight along with all of its constraint paths (both incoming and outgoing).
• The paths representing incoming foreign key constraints are highlighted in a different color than outgoing constraints.
• Multiple constraints between the same two tables are prevented from overlapping by giving a unique curve to each of the lines.
• Hovering over a constraint produces a tooltip which shows the names of the fields that are linked by the constraint.

To use this tool, simply place schemagraph.php on a web server and provide values for the
constants needed to establish the database connection. You may also modify the constants for the circle radius, font size, and image dimensions. Since the script outputs plain SVG with inline CSS and JavaScript, you may further customize it as needed to get the desired style or behavior.

Another open source project I’ve worked on while at Shepherd Interactive is an implementation of document.write() for XHTML, which is a solution to the long-standing problem with Google AdSense which prevents it from being served on XHTML pages.

We’ve used WordPress extensively for clients over the past year and have seen the open source project mature immensely as a solid content management system. We’ve developed several open source WordPress plugins, such as User Photo, Co-Authors, and Events Category, which we’ve incorporated into several site implementations. We’re glad to be able to openly maintain the plugins as a way to give back to the WordPress community who have done so much for us.

Things happen very quickly on the Open Web, and I’m excited to blog more in the coming weeks and months about other open source projects we’ve been working on.