Visnu Pitiyanuvath visnup

SVG foreignObject tooltips in D3

Just a little proof-of-concept here - using an SVG <foreignObject> element as a container for a tooltip that can involve handy HTML features like text-wrapping and (semi-)dynamic sizing.

Gotchas so far:

Like an <svg> element, a <foreignObject> element needs a width and a height in order to be rendered.
However, specifying width and/or height can be delayed. Here I specify a width (foWidth) of 300px, then find the height of the contained <div> using getBoundingClientRect() and use that to specify the height of the containing <foreignObject>.

Design 101 for Engineers

design (and everything) is teachable
- if you hear an engineer say, "I'm really bad at design," it's the same as hearing someone say, "I'm really bad at math"
focus on simplicity
- should make your life implementing simpler too
people's brains are bad at doing many things; don't overly burden them
eg, interface with so many calls to action that no one knows which to use

	#!/usr/bin/env node

	var http = require('http')
	, webapp = require('webapp');

	http.createServer(webapp.bind([])).listen(8000);
	// ^^^^^^^^^^^^^^^
	// \| (x)
	// ROFLSCALE DEQUE ---/

	function fish_prompt --description 'Write out the prompt'
	set git_sha (git rev-parse --short HEAD 2>/dev/null)
	set git_branch (git rev-parse --abbrev-ref HEAD 2>/dev/null)
	set git " $git_sha $git_branch "
	if [ $git = ' ' ]
	set git ''
	end

	set length (echo [ 00:00 AM -$git(prompt_pwd) ] \| wc -c \| tr -d ' ')
	set fill (printf '%*s\n' (math (tput cols)-$length) '' \| tr ' ' –)