var styles = {

  board: {width: 500, height: 400},

  bubble: {id: "bubble", refX: 0, refY: 0, markerWidth: 200, markerHeight: 200, viewBox: "-4 -4 8 4"},

  bubble_ellipse: {fill: "snow", stroke: "none", cx: 0, cy: 0, rx:4, ry: 2},

  handle: {id: "handle", refX: 0, refY: 2, "markerWidth": 100, "markerHeight": 20, orient: "auto", viewBox: "0 0 4 4" },

  handle_path: {"d": "M 0,0 V 4 L10,1", fill: "snow"},

  text: {fill: "black", x: 190, y: 110},

  callout: {fill: "snow", stroke: "snow", "stroke-width": 2, "d": "M200,100L130,160", "marker-end": "url(#handle)", "marker-start": "url(#bubble)",}

};

​

var board = d3.select("body").append("svg:svg").attr(styles.board);

var defs = board.append("svg:defs");

defs.append("svg:marker").attr(styles.handle).append("svg:path").attr(styles.handle_path);

defs.append("svg:marker").attr(styles.bubble).append("svg:ellipse").attr(styles.bubble_ellipse);

​

board.append("svg:path").attr(styles.callout);

board.append("svg:text").attr(styles.text).text("HI!");

​