Game of Thrones Visualized

Dex is around the corner, and I wanted to introduce a number of new visualizations which will be available.  I’m also a big fan of the the Game of Thrones series so I figured I’d combine the two into a single blog post.

First of all, a big thanks to Chris Albon for creating the war of the five kings dataset in the first place.

Dex Workflow

So first I create a Dex workflow with a bunch of visuals as seen here:


The workflow simply reads the dataset and selects the columns and the order I want to visualize things in.

Click any of the visual images to go to a live version.

Parallel Coordinates


While this visual isn’t new, it’s such an awesome way to view multi-dimensional data.

Ring Network

Here we view the data using the Ring Network from d3plus.  This visual is an awesome way to view relational complexity.


Orbital Layout

When I first encountered Elijah Meeks blocks site, I realized that I had hit the motherlode and that I’d be coding up visualizations all day.  The Orbital layout arranges hierarchies using a celestial mechanic metaphor.  Children of a parent node orbit the parent.  Grandchildren orbit the children and so forth.  This leads to some beautiful and sometimes unexpected structure.



I ported a basic Treemap into Dex.js.  This will deprecate the old Treemap.


This is a work in progress, but I am also working on porting Bill D. White’s titled Treemap into Dex as well.  If you are unfamiliar with Bill’s work, you should check out his blog.

Bill is also doing some amazing work with D3/WebGL integration.  About 1000 times more sophisticated than anything I have ever attempted.

I plan to steal it all :-)

Here is a view of the Titled Treemap work in progress.



The Sunburst is getting some love, and being ported into Dex/Dexjs.  Label fitting is still a problem.


Radial Dendrogram

I discovered a radial dendrogram from @FernOfTheAndes over here and converted it to Dex immediately.  This is a rough first look, but it’ll get better.



Sankey Particles

Last but definitely not least is the Sankey particles.  It took me about 5 minutes to pick my jaw off the floor after seeing Elijah’s demo.

After I recovered from the initial shock of seeing something so shiny, my blood started flowing and I immediately emailed Elijah for permission to incorporate his work.  Elijah, being a super-cool dude, had no problem what-so-ever.

I have a few minor bugs in my translation, but here is the current state of things:


Wrapping Up

Anyway, that’s all for now.  The next version of Dex with all this stuff should be out by next week.  I’d release it tonight but there’s a nasty cut/paste reference bug which is still eluding me.  That and it’s Thanksgiving.

Speaking of which, HAPPY THANKSGIVING!!!!!

  • Pat
Posted in General | Leave a comment

Chart Explorer

I figured I would take a break from coding to introduce a new display component within Dex called the Chart Explorer.

Below is a picture of it in action.  Click the image to go to a live version:


This component allows you to explore data interactively within the HTML page.

How to use it:

When the chart explorer comes up initially, it appears empty.


On the left is a series of controls.  The orange button selects the chart type.  The blue buttons are the columns you wish to visualize.

By dragging these columns to the green drop zone, we can visualize the data in a number of interesting ways.

Such as line charts.


And parallel coordinates, etc…


If you wish to remove a column from the visualization drop zone, simply drag and drop it over to an empty region on the selection pane.  It should disappear.

Anyway, this is a rough view of where some of the Dex visuals are going.  A new minor version of Dex ( should be out within the next few weeks with this capability.

Until next time!

  • Pat
Posted in General | Leave a comment


As promised, I am focuses on tight iterations of Dex.  The latest release of Dex can be downloaded here.

This update has been focused on:

  • Usability
    • You can now cut/paste multiple items within a workflow
    • Better icons for most tasks.
    • Task are tied to extensive online documentation via getbook.
    • Drag-And-Drop should work more reliably now.
  • Inline/Online Documentation
    • Most task are now documented.
    • More documentation being added daily.
  • Bug fixes
    • Too numerous to name.
  • Visualizations
    • NVD3 chart refresh
      • Multiple Horizontal Bar Chart
    • C3 chart refresh
      • C3 Scatterplot
    • Google
      • Diff Bar Chart
      • Diff Pie Chart
      • Timeline
    • Dex Charts
      • Radar Chart (Rough draft)


  • Pat
Posted in General | 4 Comments

Dex Update

Announcing: Dex

This is a minor update to yesterdays release.  The changes include:

Bug Fixes:

  • Fixed path issues in c3js demos
  • Changed legend location of c3js graphs to lay out on the right.
  • Included missing demo dataset “diffdata.csv”
  • Added a new demo for reading and graphing jstat data.

New Task:

Select Columns – Allows the user to quickly select and order columns.

  • Pat
Posted in General | Leave a comment

Dex 0.8 Released!!

After a very long time since the previous release, I am happy to announce that the new release of Dex is available from the Dex download site.


Getting a release out the door is like playing whack-a-mole.  I finally had to settle on good enough being good enough.  From here out, my delivery model will be changing from one of sporadic releases to one of continuous delivery at a cadence of 2 weeks to 2 months.

Here is a video showing the installation:

And here is a demo of some of the basic capabilities:

Good luck!  Please let me know if there are any issues with the installation or the product itself and I will try to assist.  In return, I always love to hear with folks are doing with the tool.

Take care!

  • Pat
Posted in General | 2 Comments

How an Engineer Buys a PC

This week, after 5 years of relentless service, my original $300.00 main home computer died.

While I am pretty sure I could fix the issue with a new power-supply, I feel it merits neither the time nor the expense.  5 years is a long time for a $300.00 computer to serve.

So I thought I would write a quick little article on how I buy PCs.  I think that I have a sensible approach which gives me maximum value for the least expense and least surprise.

First, my priorities for a new PC are as follows:

  • Price
  • Reliability
  • Speed – More is better.
  • Support – Allows me to develop code, play games, watch baseball and listen to music; sometimes all at once.
  • Low noise and heat
  • Longevity – Lasts at least 5 years.  Many times, this directly related to the noise and heat.

Your priorities may differ, but I think that the basic decision making process is essentially the same.

Determine Your Price Point

Determine your price point, and stick to it…  It’s easy to be swayed, last minute, into that  8 core i7 that will sit mostly idle as you surf the web or read email, but what’s the point?

My price point is under $1000.00, the cheaper the better.  However, if I go too cheap, the PC will not be up to the applications of tomorrow.  There is such a thing as too cheap.  Also, unlike many users, I know I will frequently run the computer at full capacity for long periods of time consuming any and all memory the machine has to offer.

I know I will want at least 16G of RAM, a decent GPU and as much CPU as I can get my hands on for the price.

Also, I want SSD for the speed, reliability, noise and heat reduction..

Here is where I am a bit different than most.  Most folks benefit more from a lower number of faster core, however, future performance depend more on parallelization across core and I am ok with a single core performance tradeoff if I get more of them.  This will incent me to write more threaded code when appropriate.

As if in reminder of this fact, as I write this, a 6 of my 8 core are performing a brute force predictive analysis on 12 cross referenced tables ranging up to 300k rows of 40 columns.  This will take a couple of hours where once it took the better part of a day.  I have a fine appreciation for multi-threaded code.

Picking My Parts

So I now surf over to, yes and pick “Build my PC”.  They have a couple of build your own options which include:

  • Case – Important if you intend to add new drives and other devices.
  • CPU – Will determine how fast your computer computes and also is a key factor in noise and heat.
  • Memory – The more the better.  At 12G of RAM, I am still running out.  I am not sure if we will ever have enough memory.
  • Video Card – Important for WebGL development and gaming.
  • SSD – Reliable, fast storage.


The main thing I look for in a case, is no gaudy lights, easy access to the internals and plenty of space for expansion.  For $10.00 extra, ended up with this:


Believe it or not, it’s less gaudy than the others, though some of them have red lights which can be less distracting, I am not sure I would like my room bathed in a red glow at night.  It seems like it could be disturbing…


Personally, I think CPU power is a bit overrated for most folks.  A good SSD drive and some extra memory are often all that is really needed.  Extra core are nice if you have aggressive anti-virus.

Here, I still want the most I can get for the money.

So I compare the walmart offerings and cross-reference CPU for the performance threshold I am willing to pay for.

After comparing each of the CPUs price and power-rating, I ended up with respectable multi-core performance which is about 8/11 the power of an i7 4790k at a fraction of the cost.    A single-threaded, single-core task would be processed at about 1/8 of this overall rating (same as the 8 core i7).  The AMD card cost me an extra $84 while the i7 4790K would set me back an extra $338.00.  Patience, I guess, is a virtue.


Video Card

After saving some money on the CPU, its time to choose the GPU.  The Walmart site offers cards from the very low end to the cutting edge $500.00.  I’m willing to spend a little bit extra here due to my fascination with WebGL and occasional gaming but I’d never spend $500.00.  I work too hard for my money.


Balancing cost/performance, I ended up with the GeForce GTX 750 Ti.  A solid performing Video card that should be more than powerful enough to support my needs without paying a premium.


I am getting a little less than 1/2 the performance for a card which costs less than 1/4 as much.  Also, since I plan to keep the PC for 5 or more years, this might be an incremental upgrade if video price/performance once again becomes compelling.

Memory and SSD

Last, but certainly not least, I choose the highest end SSD and Memory configuration I can get.   It’s a bit of a splurge which adds an extra $201.00 to the overall price, but these are key to good performance for what I will be using this system for.


Wrapping Up

The base cost of this machine is $826.00 with an extra $57.82 in taxes.  With a respectable CPU, video card, SSD, DVD-RW, plenty of expansion slots and 16 GB of DDR3 RAM, it’s a pretty good computer for May 2015.  It’s custom built for me, but fortunately, not built by me.

And this is how a price-conscious engineer selects a computer…

– Pat

Posted in General | Tagged , , | 1 Comment

P5 a Processing.js Alternative


Decent Processing integration into my application “Dex” has eluded me for awhile due to limitations within the JavaFX WebView component.  This is for a number of reasons such as lack of WebGL support.

I was able to achieve a degree of Processing integration by using the Selenium browser automation tool to automate the launching and rendering of dynamic output to a cobrowser.  It works fine for the most part, but its far from optimal.

While I plan to continue supporting Processing.js, I took the time to evaluate and decided to integrate P5.

What is P5?

p5.js is a JavaScript library that starts with the original goal of Processing—to make coding accessible for artists, designers, educators, and beginners—and reinterprets this for today’s web.  p5.js is a new interpretation, not an emulation or port, and it is in active development.

Moreover, links directly to the page, so it would seem that the Processing community has opted to embrace P5 in spite of it’s small differences.

For me, P5 is nice because it brings the capabilities of a processing-like language to the Dex and dex.js platforms.  And this allows for greater accessibility to the artists, designers, educators and beginners that Processing and P5 target.

In many cases, by changing a couple of lines, Processing scripts can be converted to P5 scripts.  P5 also supports touch devices.

Hello Line

The first example within P5 is as simple as you could hope for.  It simply draws a line on the screen with the supplied coordinates.

function setup() {
  line(15, 25, 70, 90);

Saving Sketches to Javascript Variables

Sketches can be stored as javascript variables as seen here:

var sketch = function( p ) {
  var x = 100;
  var y = 100;
  p.setup = function() {
    p.createCanvas(700, 410);

  p.draw = function() {

Then they may be rendered like this:

var myp5 = new p5(sketch);

More Examples

If you are interested in seeing what P5 can do, there are a large number of examples that can be found here.

Thats all for now, time to sleep!

Posted in General | Leave a comment