Checking in…

I continue working diligently on dexjs and in turn importing it’s capabilities into Dex.  It’s probably going to be a month before the first dexjs release, and at least another month before I release Dex.

Anyway, I had alluded to additional capabilities and charts.  I will demo some works in progress here.

Henry Kim emailed me today and mentioned that he wanted something to view X/Y relationships over time and interactively.

It seemed only a slight variation to a MotionBarChart, however, it turned out to be a bit more extensive than.  Anyway, here they are:

And as usual, the static graphics link to live demos:

Motion Circle Chart

Draws circles located at x/y coordinates animated over time.

MotionCircleChart1

Motion Line Chart

I then extended the Motion Circle Chart to include an interpolated line.  This one is using a basis spline.

MotionLineChart1

This one is using a “step” interpolator.

MotionLineChart2

I’ve also been integrating google charts.

Pie Chart

Yet another pie chart implementation.  I guess you can never have too many.  This one handles large legends pretty well.

GooglePieChart1

Diff Pie Chart

Now here’s a nice one.  The DiffPieChart.  Concentric rings represent different points in time.  It kind of has me thinking about a MotionPieChart.  Somehow, I sense that Tufte is rolling his eyes in disgust.

DiffPieChart1

Timeline

The timeline is useful for comparing things over time in a static way.

Timeline1

Diff Bar Chart

Here is the DiffBarChart.  Like the DiffPieChart, it compares two sets of values within an overlaid bars.  I’m going to start using this one at work.

DiffBarChart1

Word Tree

I love the WordTree.   It’s fun to play around with famous speeches like the Gettysburg address and see how structure reveals intent, sometimes underlying intent.

This one is a bit limited, but hopefully one day I’ll talk Jason Davies into letting me use his as a basis.  If not, I’ll probably write one of my own, I like them that much.

GoogleWordTree1

That’s it for now.  Take care all.

= Pat

Posted in General | Leave a comment

Time to evolve…

It’s been 4 years since I wrote Dex and began my journey into data visualization.  It’s been gratifying and keeps me grounded in many current technologies.  As the project has evolved, so has it’s needs.  So some of the technology surrounding Dex is shifting around.  I would like to talk about a few of them here.

DokuWiki -> Jekyll

I love DokuWiki, however, I find that I need more and less than it offers.

First, I don’t want to allow online edits.  Having been hacked a few times a year back, I want to keep it simple.  No php scripts, no dynamic content other than some javascript.

Being dissatisfied with the various site-export utilities offered by DokuWiki, I bit the bullet and started migrating the web-site and the internal Dex documentation to Jekyll.

This gives me much more control over the generated site with less worries about being hacked.  There’s nothing worse than opening the main page of your open source project to discover a Viagra ad in it’s place.

Additionally, it will let me to publish the manuals online as well as within the internal Dex documentation.

DexCharts -> DexJS

I have realized that the DexCharts project was really a module within a more general purpose framework which I will publish on GitHub as DexJS.  DexJS will absorb the DexCharts project and the various DexCharts will simply be members of the dex.charts module within DexJS.

NodeJS & NPM

I am using tools supplied via npm.  This makes it easy to manage my javascript tool dependencies in one centralized repository.  Its kind of like rpm on Linux and just as convenient.

Gulp

I use gulp to generate my distribution.  Basically, it’s a task manager which provides capabilities similar to Grunt which is analgous to Ant in the Java tech-stack.  So far, I am amazed at the power of Gulp.  Gulp and all it’s sub-task are delivered to me via npm of course.

Browserify/Uglify/Sourcemap

Within my gulpfile.js, I am using task which aggregate the core dex modules into a developer and minified versions with sourcemaps.

The charts are intentionally excluded.  The various charts have additional dependencies which are not appropriate for general use.

I will likely distribute dexjs as a npm module once I fully assess the ramfications of that.

JQuery/Underscore

DexJS will require JQuery and Underscore because of the general power and capability that they provide.  Much of what I have already written could, should, and will be refactored to leverage the capabilities of these two libraries.

Dex -> Github

Over time, I am migrating Dex over to GitHub.  This could take awhile, but I’m working towards this.

Posted in General | Leave a comment

Dex & Dex Charts Progress

It’s been awhile since I checked in, so I figured it was about time.

I’ve been busy reworking Dex and it’s sister project Dex Charts.  Here are some of the previews of DexCharts once I am comfortable pushing it back to GitHub.

At a high level, I am builing resizeability into the core charts.  They should lay out nicely by default and only rarely need tweaking.  Having said that, everything should be exposed for the user to tweak.

There are also some new additions to the Dex Chart family.  Click any static content to go to live content.

 Horizon Charts

First of all, here is a rough start on horizon charts:

HorizonChart1

 Motion Charts

Motion Charts are also a first class component within Dex and Dex Charts.

MotionChart1

Motion BarCharts are also new.  Drag the mouse over the year to update the bar-chart with that year’s data.

MotionBarChart1

There’s a lot more which I will cover in subsequent posts.

Posted in General | Leave a comment

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