Learning D3.js Mapping

A few years ago I was lucky enough to co-write my book Learning d3.js Mapping alongside one of my favorite colleagues Thomas Newton. It was an incredible experience filled with many hours of digging deep into a library, finding the best way to articulate a concept, trying to keep readers entertained while at the same time explaining d3.js as best as we could. At the end of it, we had a product that we’re very proud of and that has served thousands of d3.js enthusiasts around the world learn this beautiful library and build some stunning visualizations. I swore I would never do it again though, it was simply too much work and time that was very hard to for me to afford (since writing isn’t my profession and my normal life involves traveling 4 days a week). Yet here I am once again, this time collaborating with Lars Vespol and Thomas Newton for our second edition of Learning d3.js 4 Mapping, with the new d3.v4 version.

We couldn’t have found a better co-author than Lars. He brought in a new approach on d3 via Canvas which is seldom spoken of and the energy we were so desperately looking to obtain. These new topics give our readers the ability to improve the performance of their visualizations by leveraging hardware accelerated graphics via canvas and minimizing DOM impact.

The end result is a very complete learning progression of d3 that we all truly hope you’ll enjoy.

On a theory of consciousness

Found this old draft that I never posted and given my current readings on The Self Illusion it felt like a great time to actually post this and do some more digging on Panpsychism.

This is the second time this week that I’ve stumbled upon the word Panpsychism. If you don’t know the meaning of this word it is basically the idea that consciousness lies within everything. Not just humans, but plants, objects, atoms, quarks etc.
It all depends on information and on that information is organized. The more complicated an information structure (say for instance all the info in a human) the more conscious that thing ends up being.

This amongst many others is a question that Philosophy has been trying to nail down for a long long time. A good video on the subject is here

Out of this video what made me start thinking was the idea of shared consciousness. Are we, you the reader and I the blogger right now, sharing a little bit of the same consciousness just by reading this blog.

In my mind that makes absolute sense. Consciousness can recreate scenarios, surroundings, and context of a given action one has undertaken or will undertake. That context permeates the conscious ether, filling it with life and structure and shapes.
Because your consciousness is right now in the context of my blog, it only makes sense that we up to a point are sharing the same consciousness.

If consciousness is a fundamental law, permeation of it is up to discussion. In my view just like gravity and time are fundamental laws, that doesn’t mean they produce or act in exactly the same way. Time slows down at higher gravitational pull. Gravity is dependant on mass. So can consciousness be dependant on its creator, in this case all beings, whether innate or not. To this idea the concept of consciousness as a product of information structures fits quite well (all this described as a theory in video).

Will it ever be possible to have the subjective be described by the objective ?

The next Angular

I hear this question so much these days. What is the next Angular ?
Or what JS framework would you recommend we use?
Tho which I always answer, there is no silver bullet, there never has been.

Screen Shot 2015-01-29 at 11.33.08 AM

Its all about the context in which the application is going to be developed. What good is it to build something in Angular with Node, or Ember with  Rails or Backbone with Python,  or what ever other stack if the people who are going to implement the code aren’t going to follow standards or simply, don’t know how to tie all the pieces together.

Some things permeate languages and libraries and that is what always should be sought after. A house is judged not by the hammer that built it, but by its architecture and livability.
Small methods, tested code, documentation, good use of memory etc. All these are examples of architecture and style not of tools.

The question we should be asking ourselves is how do we develop this application so we can pluck out pieces of it and put in newer/better pieces without having it fall apart.
It needs a solid base that is loosely coupled and well structured. Clear interfaces and code flow. Single priority methods, good analysis of cyclomatic complexity, multiple device testing automation etc.

In reality you can have your app be small pieces of a lot of things, so long as you can assert it does what its supposed to do and so long as they are all used for the right thing. Focus on having good people that know what they are doing instead of finding silver bullets. Focus on having good test coverage so that when you do pull the pieces out, you know exactly what is broken or what to fix.

In the world of corporate applications, tech is rarely the problem, normally its people and how they are managed or how competent they are at their job.



The beloved spinner

So many times we confront this issue.

In the world of AJAX where requests take time, we’ve come to develop a handful of incredible solutions such as promises and deferred responses in order to continue to execute JavaScript with out blocking the thread. This is an incredible achievement for true async comes to existence

But what about the user? The user doesn’t give a damn about your miraculous promises. The user wants the page to do as he/she says.. NOW!

A few months ago a colleague of mine was chasing a pretty interesting bug. We were trying to figure out why some database items were getting duplicated or erased every time a user would submit a form. It made no sense for we had a bunch of form submissions that were pristine, yet some were simply corrupted.

We debugged through the AngularJS code and it was pretty straightforward. The form was getting sent to a service and that service, responded with a 200 if it was saved o,r with the corresponding error code if it was not. So what the hell was going on?

Double click was the cause of the problem. Our users were a bit older around the ages of 50-60 and they are used to double clicking everything. Hence when they submitted the form they actually submitted it twice and this cause all kinds of unhandled issues in the back end. Yes in theory there should have been a check to make sure that user has or has not submitted a form and then updated accordingly but, the UI could have been a little bit more understanding of the crowd and helped out more in handling the situation.

image spinner
Sample spinner

A simple swap from button to spinner disables the user from being able to submit twice and informs the user that the system has noted his/her request and is working on it.

Some times its trickier. For instance when we have multiple events that can take place on the same page. In this particular case, a global method that detects whether a spinner is present in the DOM or not and if so alerts the user to hold on does the trick quite effectively and elegantly.

An example of a good interaction is Ladda. Here, as the event happens, the button gets injected a spinner right there.

Another cool spinner solution for all device, resolutions and browser versions is spin.js. You should definitely give it a spin (get it?).

Some word of advice, always think about spinners early in the development cycle, and include them in every action that can potentially have latency. Your users will thank you, and you’ll avoid having to debug very weird issues.

Happy hacking!


D3 Waterfall chart

When it comes to waterfall charts and d3 you have very few options.
1) Your are on your own, which means you are free to draw it how ever you want (which is pretty much the coolness of d3)
2) You use this repo https://github.com/sattybhens/waterfall which will give you a horizontal chart. Has a mix of ruby and coffescript
3) You use this plugin that resembles to what most jQuery users or Highcharts users are used to which is a config object that generates a chart. https://github.com/climboid/d3Waterfall
Currently it only supports vertical waterfall charts. Feel free to use and contribute.