DexCharts Update : November 22, 2013

I’ve been working hard on DexCharts.  Here are a few sneak peeks at what’s coming.

All images link to live content

Axis

It’s ironic that I had so much trouble with the bar chart visual.  My main trouble has been around how to handle axis.  I decided to make Axis a first class component so that I could decouple it from the rest of the visuals.  I also thought that there may be times when you’d want to treat an axis as a separate entity altogether.  Here’s a demo of a few types of axis.  Note that I haven’t quite fixed the log axis yet.

Here we have a horizontal linear axis with format, another one with some different styling.  Then we have a series of vertical axis: linear, sqrt, log, time and of course ordinal.

image

Virtually every aspect of the axis can be configured directly from DexCharts.

BarCharts

Barcharts are getting more usable.  I’m not quite there yet, but here is some pretty cool progress.  They are more capable now with much less code.  Why the simplest of charts has been the hardest for me…I do not know.  It’s humbling.  Anyway, here’s some of what the latest bar chart can do:

From the simple…

image

to a high resolution bar chart…

image

…to bars with gradients…

image

..to all sorts of crazy fill patterns…

image

Clustered Force

Clustered force got a makeover…

image

You can do some crazy things with it…and with all the components actually…I’m supporting svg transforms at virtually every layer.

image

More soon…

Of course, I broke a few things along the way…which is why I haven’t checked it back into github yet…

I’m also working at providing angular directives which will render DexCharts with all the goodness that angular provides (2-way bindings, etc…)

- Pat

Posted in General | 1 Comment

DexCharts Updated

There are a ton of new changes to DexCharts which are worth seeing.  Click the link to go to the github repository.  There are a bunch of active links from there.

While the Dex Editor design gels in my mind, I figured I would focus on rounding out some of the DexCharts work.

Here is a teaser:

image

Note that on mouse-over the node will:

  1. Expand the node.
  2. Change the stroke of the node.
  3. Highlight the links.

Everything is easily configurable, and best yet, its documented.  Many of the other components have also been overhauled, so download the distribution and give it a look!

Posted in General | Leave a comment

Checking In

Ok, figured I would check in.

I have had pretty good success with combining Angular, Angular-UI, Bootstrap-UI, JQuery, JQueryUI to provide a pretty solid mockup for the dynamic drawing editor demonstrated by Bret Victor back in February 2013.

I really should read more about the technologies I am using, but I can’t seem to stop myself from diving straight in.  I will course correct if I need to.  I’d rather blunder and blog.

First, let me say, AngularJS is wonderful.  My only criticism is that sometimes the error messages can be misleading.  However, coming from the Java world of stack traces stacked 50 deep, I can live with it.  The Angular framework is really a phenomenal addition to the JS world.

Back to my topic….

Anyway, here is my current mockup…

image

which shamelessly emulates Bret’s interface…

image

So far everything is panning out as I expected.  There is a lot of work ahead so don’t get too excited.  There is still a chance I’ll get penned into a problem outside of my capabilities to solve, but it won’t be for lack of trying.

Dex/Dex Charts/Dex Editor Roadmap

Don’t worry, I have not abandoned Dex nor Dex Charts.  The creation of these things is truly a joy to me.  I just can’t be in two places at once.  My vision is that this online editor I am creating, for lack of a better name, let’s call it DexEd, will allow us to create web-ready, data driven dynamic drawing templates through the direct manipulation techniques described by Bret Victor and Alan Kay.

Dex itself will provide a richer ecosystem of an ETL framework.  DexCharts will provide a series of reusable charts which also can be imported into Dex or used directly on the web.  DexEd, hopefully…someday…knock on wood…I hope will provide a flexible way to create data driven drawings which will be reusable by nature; but will not require coding.

Ultimately, my goal is to bring the capability to draw things freehand which would normally only be possible to the elite few who have mastered D3, Raphael and other visualization frameworks without the pain of coding.  Direct manipulation.

Now this part gets far-fetched, but I don’t think it is.  I see physics models also being things which could be assigned dynamically to these drawings.  Things like various forces such as gravity, repulsion and attraction.   But, first let’s crawl, then walk, then job and hopefully one day run…

Anyway, that’s it for now…

Posted in General | Leave a comment

More small steps

Since last week, I have made a bit of progress in what I hope will become a realization of the dynamic drawing editor demonstrated by Bret Victor.

I have made a small course correction in the past week.  I have swapped out Knockout for Angular because I believe I will need a more full featured MVC framework.  There were a number of highly rated books on the Angular framework, and I get the feeling that Angular has a strong community and will evolve faster than it’s competitors. Also, Angular already has support for the types of UI components I believe that I will need.

So here’s a small demonstration.   It doesn’t look like much, but here is the demonstration, but I will eventually transform it into what I want.

Once I have the basic UI controls in place, I will begin to work on the capabilities of the dynamic drawing editor itself.

That’s it for now…

Posted in General | Leave a comment

Big Dreams : Small Steps

In yesterday’s post, I was talking about Bret Victor’s amazing demonstration of Dynamic Visualizations.  Between my family obligations I managed to multitask and squirrel enough time away for a few of my technical objectives:

  1. Select a MVC framework.  For now, I’ve actually selected a MVVM framework called Knockout.  Really, I just wanted something to handle 2-way binding of variables.  I debated between Angular, Backbone and Ember.  I selected Knockout due to their ease of use and elaborate tutorial. Writing documentation isn’t fun, it isn’t easy.  When I see a project put so much effort into something so mundane, I want to support them.  If I’ve backed the wrong horse, I’ll fix it later.  “Fall forward” is my motto.
  2. Figure out how to directly manipulate SVG from this MVC framework.   Everything is easy once you figure out how to do it.  It literally took me hours to achieve this.  Here’s the demo.  It’s not awe-inspiring, however, I have overcome a few boundaries.  I am integrating Bootstrap components with knockout.  An additional Bootstrap slider component and directly manipulating an SVG without special purpose libraries.  Though I love it dearly, I am free of D3!

Here’s the demo…

Click for a live version…

image

Anyway, despite it’s primitive nature, many obstacles have been overcome.  Anyway, I have to cut this post short as I have more family obligations to attend to…

Posted in General | Leave a comment

Damn you Bret Victor!

Just kidding.  He is brilliant and I love the guy.  I love him much in the same way that Neo loved Morpheus for giving him the red pill in the popular science fiction movie “The Matrix”.

Until Bret’s talk about “Inventing on Principle”, I had never given much thought to the barriers between ideas and their fruition.  I was blind to the many hidden barriers between ideas and their realization.  I did not see the textual representation of code as a barrier.  Learning an IDE as another barrier.  Compilation, yet another.  I did not realize how disconnected my ideas were from their fruition.  How many of these ideas died due to these barriers?  A lot of them.

I know I am not alone, because many folks have been trying to realize Bret’s dream in the form of improved toolsets and increasingly interactive visualizations.

The problem is that Bret only gives you glimpses into what “can” be done.  The closest thing to a realization of what he demonstrates is Tangle, a remarkably powerful way to tie dynamic aspects of a document together.

It gets worse

Bret has produced a couple more talks.  The talk I found most disturbing was Drawing Dynamic Visualizations.  Bret demonstrates an amazing tool where he creates flexible visualizations as quickly as an artist fluent in Adobe Illustrator creates a drawing.  Art meets science, and it’s beautiful.

The problem is, I’ve been waiting for months and there is no tool.  Worse yet….I can see how such a tool could be written.  I see the parts in my head.  How the pieces interoperate.  It seems simple, elegant, powerful and worst of all, it’s causing me to lose sleep.

General Idea

Here’s what I am thinking.  The basic tools are already there within the browser.

  1. SVG – Already knows how to draw, color, animate and transform basic shapes.
  2. MVC Frameworks – such as Ember, Angular, Knockout provide a framework for Data driving an elastic view of that data.  Why not an SVG visualization?  I considered tangle, but these seem much more full-featured.

What’s missing is an editor, like what he demonstrates to put it all together.  Probably, also some sort of strategy for exposing configurable parameters and binding it to dynamically changing data.  Composition patterns also need to be accounted for as well.  Once I teach the computer how to draw a star, I should be able to reuse that composition.

There’s probably a whole lot more I am not seeing…but I think I might have to try my hand at writing this tool, if just to get some sleep…

Advice is always welcome…

- Pat

Posted in General | Leave a comment

Sankey Updates

I have a few more Sankey updates.

  1. More aspects of the Sankey are configurable (Text, Nodes, Links, etc…).
  2. Configuration options can be controlled via value or function.
  3. Paths highlight from end to end for a relation.  This makes is much easier to visualize.
  4. Full control of link appearance upon mouseover.

Here are a couple of examples:

Click the image to view a live version:

image

image

Anyway, that’s it for now…

Posted in General | Leave a comment