Learn d3 the Hard Way (3)-- Force


This is a very useful sketch for node placement. Rather than the original force only move nodes, this sketch also place label in it. Origin from Mortiz’s Force-based label placement.

The basic idea is to have labels orbit around their target node at a fixed distance, but repeal each other, so that they don’t overlap, and orient themselves to the outside of clusters. To support that, labels on the right of their target node are left-aligned, and labels on the left of their target node are right-aligned; in between, we interpolate. In this example, one force layout governs the node placement, and the second one the label placement, but of course, the node placement could be computed by any other algorithm.

Read More

Learn d3 the Hard Way (2)--yet another collision detection


Another collision detection work. Very elegant.

Here’s a little bit background about this sketch. As we can see, this sketch is composed by non-touching circles in a canvas. This algorithm generate a random sample by generating K candidates, and choose the best one and add it to the system. The definition of best is that it’s the farthest away from the previous sample. By this way, the emergance of new sample would be more natural, compared with the uniform random sampling.

Some people ask, “is this useful? I can’t see how I can use it into my work.” They are probably wrong, an English artist use exactly the same effect in his work Silent Buddha. It’s a really impressive work.

Now take a look from the inside.

Read More

Learn d3 the Hard Way (1) -- collision detection


Finally, make up my mind to learn d3 with focus. I decide to learn the example on d3’s gallery line-by-line. This should not be a hard way as the title of this post because:

  • Most example written by author.
  • the API doc is perfect. Yes, perfect.
  • You can choose the your favourite effect to dive in, never lose interest.

Javascript Basic

If you do not have any javascript experience, try to take some. As I always recommend, the javascript course in Codeschool. If you have time, take the Try jQuery course also.

Also, we might want to try write some js but I hate write in a file and refresh the browser to see whether I make it correctly. If it’s the case to you, then you can try JSFiddle. you can type js and run to see output all in browser. What’s more, JSFiddle provide most popular js library (such as D3 and Processing.js) so you don’t need to care about this when you are prototyping.

OK, we are ready to go!

Collision

Read More

Visualization Learning Resources

Many friends ask me to recommend a list for learning Visualization techniques. As I promised, it’s out now!

Best places to learn

d3.js

“D3” is short for data driven document. With d3, you can manipulate DOM with changing data and user input easily. But if you are not familiar with javascript, the learning curve would be a little steep.
d3.js

OpenProcessing And Processing.js

Processing user like to show off their work on OpenProcessing! Because it’s open, you can learn other’s algorithm and find out techniques to create nice effect but using the ordinary function.
Open Processing

Read More

Calendar HeatMap in R

昨天闲逛的时候,看到有位大哥写了个基于R的日历热图,用于展示公司的股价。再次证明了国外R风非常盛行。

Paul Bleicher: calendarHeat.R (source code for calendarHeat function)

我把几个互联网公司跑了一下。结果截图可以看到很多东西,例如08年底互联网萧条,11年新浪通过微博崛起,苹果近年的持续上升势头,Yahoo和Yahoo Japan的区别。

可从这里下载[download id=”1”]

Read More