Graph drawing for the web

This blog (the posts, comments, and everything else) has moved to a new home at www.troolstudio.com. I’m involved in a lot more things than just Graphsy now, so I figured it was time to put everything under the same roof. Hope you enjoy the new setup and checkout some of my other projects.

It’s been a while, but here is a new update for Graphsy. The biggest change is the new shelves system for storing and using common objects. I have also changed the default behavior to have the shelf panel visible when Graphsy loads. Every user gets two shelves by default, Basic Shapes and Basic Shapes with Anchors, but can create any number of shelves. Adding and removing objects is done by dragging them into and out of the shelf and individual shelves can be stored. Here is a brief video tutorial on how to use shelves.

In addition to shelves, several other things have also changed. First you’ll notice that the logo at the top has gotten much smaller and the drawing area has gotten much bigger. I have also taken the time to fix many bugs (most of them dealing with Internet Explorer) and improve performance accross all browsers, so hopefully you’ll find using Graphsy more pleasent.

As for the future, the next big updates will involve grouping objects together, creating tables. exporting graphs as PDFs, and sharing shelves among users. Let me know if you have any other ideas.

Haven’t posted anything lately so I wanted to catch everyone up on my progress. For the past few weeks I have been implementing a kind of shelf system to store custom shapes. That is more or less done. What’s holding up the update right now are some small bugs, UI enhancements, and performance upgrades.

One of the things I want when the shelves system is done, is to release many different object that could be used in several different chart drawing projects. However when creating them I ran into a few bugs and performance issues. These are being sorted out right now.

In addition to those, I also began to clean up the UI elements. Some of the buttons did not look correct and consistent, so I am changing those as I go. I also shrunk the Graphsy logo to give more drawing room to the user.

I’m hoping to get all of the features done in about a week, so if everything goes right you should see a new and improved Graphsy version after that.

After this upcoming release, I will spend some time updating the videos, front page, blog, and the help system of Graphsy. In the mean time feel free to request new features or report bugs.

I have been debating this with myself for quite some time now. On one hand, it seems that writing code, or at least understanding enough about code to edit it, is quickly becoming a skill most people will find helpful to have. Something like knowing how to put together IKEA furniture, not completely necessary to do, but helpful if you know how. On the other hand, however, developers are doing a good job creating tools that abstract the code via some visualization. At the end of the day, these tools still produce code, but the user never has to see it.

I’ve just added the ability to create custom shapes to Graphsy. This update ads a new button to the tool bar, right next to the object creation button. As with all of the previous drawing tools, users can choose to draw a single shape or several. Hitting the button once enters single shape mode and hitting it again will place Graphsy into infinite drawing mode, until the button is hit a third time.

When actually drawing shapes, you begin by clicking once on an empty spot, to select where the shape will start. Then click again to draw the first edge of the shape. Then, each additional click adds another edge. To finish drawing the shape, you have to click on the starting node.

The custom shapes have the same context menu as the regular shapes with one additional button. In the lower left corner of the context menu there is a button to edit the shape. By clicking on that button, or pressing ‘z’, you can edit the shape by moving, deleting, and creating new nodes. All of those are accessible from the appropriate context menu. A selected node can be moved or deleted it via its context menu. Selecting an edge enables one to split it at the point of selection, again via the context menu.

The shape objects can be used in the same way as the regular shapes. One can change their width and height, animate them, or change their color properties. Everything that can be done with regular shapes can be done with these “custom” shapes.

Next on the agenda is to create a way to group objects together and save them into libraries that could be shared with other users. I’m still trying to figure out a good name for the library, right now I’m thinking shelf, but if you have any suggestions please post them in the comments or email me. I hope you guys like the new feature, as always let me know what you think.

This has been a long time coming. I’ve just added animation capabilities to Graphsy. They are simple to start with, a Fade In, Fade Out, and Move animation. But that should be powerful enough to create something interesting. The best way to explain all of the new functionality is really just to show you. So here is a short video demoing some of the animation capabilities. As everything else, animations can also be embedded, if there are animations, animation controls will appear on an embedded item. I hope you guys try this out and let me know what you think, either here or email me at max@graphsy.com.

Here is also a simple example of an embedded Graphsy animation. Hit play, followed by next:

Just wanted to drop a line about a new features I’ve been working on. It’s not on the list of requested features, but I think it’s pretty cool none-the-less. I wanted to create controls that would allow for simple animations of graphs. Something where nodes can be rearranged to demonstrate a point.

The impetus for this feature came from wanting to write a post clustering and how it relates to software engineering. I wanted to use Graphsy for illustrations, and then thought about using animations to demonstrate clustering. Clustering and animations are a very natural fit, but Graphsy did not have that available. So I figured I would create it.

As I started implementing the features I realized that it is going to be a bit more work than I originally thought. A few things in the low levels needs to be changed to make room for it. And, as I was creating it, the interface I wanted to use for it changed as well. The feature has morphed from something really simple to something a bit more powerful, but hopefully still as simple to use. I’m about half way there right now. I’ve crossed most of the major hurdles already and can create some very basic animations. What’s left is cleaning up the UI, adding build in and build out animations, and creating a player available in the embedded version of the graphs.

I hope to finish this in the next two to three weeks. With a post about the features will also come a post about clustering to demonstrate the usefulness of Graphsy. I hope people don’t mind me going off the path, but I really want to get Graphsy to a point where I use it as my main graph creation/editing tool. It’s not there yet, hence the alpha and not beta, but hopefully it’ll get there in the next few months.

To set the ground for this post I first need to reiterate a message that has been heard frommanyothersources. Code coverage can only tell you how bad your test suite is, not how good it is. Meaning that if you have bad coverage you know something is wrong, but a high coverage number tells you virtually nothing. This message seems obvious for many developers out there, but it’s not heard by a surprisingly large section of them.

I have been a teaching assistant for several undergraduate and graduate testing classes. Every year when I grade their unit testing projects I always get several of them (about a quarter) that hand in tests with “good” coverage, but not a single assert statement to check the results of their tests. This is even after I get up in front of the class and rant about the exact problem from previous years. Needless to say those students tend to do poorly.

So, if test coverage is not a good metric, how can developers measure the quality of their test suites? I’m going to talk about one approach in this post, mutation testing.

This new update brings with it a way to store colors in palettes. The color picker has changed to include enough space for 23 colors. Once a color is selected the user has to simply drag it from the display into 1 of the 23 slots available. These color choices will stay with the user across all of the projects and will be remembered when relaunching Graphsy.

The next feature I am working on is custom shapes. I want to let users create custom shapes, combine them together into libraries, and share those libraries with others. There is lots of work that needs to go into this, but I hope to have the basic creation tools available shortly. Check out a list of features that were requested by other users, vote for your favorites, and add new ones at www.graphsy.com/request.

Since all of these updates, the tutorial videos are really getting out of date. I’m going to spend some time this week updating them. Hopefully I can get the object creation feature out in 2-3 weeks, unless work gets in the way again.

When talking about software reuse and abstractions it is tempting to bring up one of two analogies. The first treats reusable components as tools, while the second thinks of them as larger, more purposeful Lego blocks. Neither is really correct. In both cases we get an impression that reuse in unequivocally a good thing. The more components or tools we use, the better is our final product. Unfortunately that is not exactly the case. In this post I want to talk about abstractions and reuse, why we like them, and what we have to watch out for.