The D3js Label Trilogy

Most of my use of D3 has been in scientific visualization, and scientists do love their labels. Since that’s become a particular specialty of mine, that’s what I wrote about when Safari Books Online invited me to be guest blogger. Here are links to my three posts on labels:

Creating a Right-Click Contextual Popup with D3

I’m not a big fan of taking things over from the browser, but just in case you have to, here’s how to override the standard context-menu behavior to provide more data about your visualization. Included: how to make sure the browser’s context menu still shows everyplace else.

Solving D3 Label Placement with Constraint Relaxing

When data points get close together, labels start to collide. Here we discuss using basic mathematical collision detection to adjust the placement of labels predictably and efficiently. Well, more efficiently than trying to introduce a physics simulation.

How to Create HTML Labels in SVG Using D3

Sometimes your labels need to be dressed up a bit. Text in SVG can do it, but SVG relies on you doing most of the placement. Instead, leverage the power of your browser’s layout engine in your labels by inserting HTML into your SVG. (Sadly, this technique does not work in IE yet.)

So there you are. Get labeling!

Image Credits: Flickr / adad

Leave a Reply