-
Notifications
You must be signed in to change notification settings - Fork 0
Main
A tutorial of making a d3 column graph from scratch: Tutorial - Making a bar chart
SVG paths and text on paths
Where to start from with tooltips applied to SVG elements?
SOLUTION #1: Custom.tooltip.js URL: http://bl.ocks.org/2941416 Author: Zack Maril Zack twicked the popover function from twitter bootstrap (“popover.js”) to make it working with SVG elements. The derived function is called “tooltip.custom.js”. I don't understand the details of Zack's implementation but I hope the guys from twitter bootstrap will look at it !
SOLUTION #2: Tooltip.js in nvd3 URL: https://github.com/novus/nvd3 Author: Bob Monteverde Bob starts his tooltip.js code by writing “A no frills tooltip implementation”. Well, it makes me smile, to say the least ! Would be curious to know how this tooltip.js could be used outside the nvd3 library (recognizing that this is not its primary usage though).
SOLUTION #3: Tipsy.js fork for SVG by Justin Donaldson Example URL: http://bl.ocks.org/1191530, http://bl.ocks.org/1373263 Author: Marimon, Ilyabo It uses the jQuery tipsy.js program and is the most convenient way, for beginners, to implement simple tooltips. At least, this one I understand !
SOLUTION #4: Home-made tooltip in coffee script Example URL: http://jrmoran.com/usenergy Author: JR Moran Very elegant code available at http://jrmoran.com/usenergy/docs/app.html, in particular for those who are familiar with coffee.script :) (yeah, one more thing I have to learn)
SOLUTION #5: Home-made tooltip in javascript Example URL: http://bl.ocks.org/1016860 Author: Christophe Viau Very simple and useful example ! Convenient when there is not too much text/info to display as tooltip.