<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
		>
<channel>
	<title>Comments on: HTML, SVG or Canvas Labels?</title>
	<atom:link href="http://blog.thejit.org/2009/08/30/html-svg-or-canvas-labels/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.thejit.org/2009/08/30/html-svg-or-canvas-labels/</link>
	<description>Data Visualization, JavaScript and Computer Science related stuff</description>
	<lastBuildDate>Sat, 10 Jul 2010 06:02:06 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
		<item>
		<title>By: admin</title>
		<link>http://blog.thejit.org/2009/08/30/html-svg-or-canvas-labels/comment-page-1/#comment-445</link>
		<dc:creator>admin</dc:creator>
		<pubDate>Tue, 01 Sep 2009 18:57:41 +0000</pubDate>
		<guid isPermaLink="false">http://blog.thejit.org/?p=1077#comment-445</guid>
		<description>@Ollie: I don&#039;t have any numbers to back up this, but I&#039;ve &quot;&quot;felt&quot;&quot; that SVG perfomance was less good than html.

@Franz: Thanks for your reply, I knew that Adobe&#039;s solution was to embed flash, I just thought that Google&#039;s solution was going to translate things into VML. Somehow this might be impossible.

@Marcus: Thanks for your links, I didn&#039;t know the quad tree could be a good approach for this. I&#039;ll take a look at it :)</description>
		<content:encoded><![CDATA[<p>@Ollie: I don&#8217;t have any numbers to back up this, but I&#8217;ve &#8220;&#8221;felt&#8221;" that SVG perfomance was less good than html.</p>
<p>@Franz: Thanks for your reply, I knew that Adobe&#8217;s solution was to embed flash, I just thought that Google&#8217;s solution was going to translate things into VML. Somehow this might be impossible.</p>
<p>@Marcus: Thanks for your links, I didn&#8217;t know the quad tree could be a good approach for this. I&#8217;ll take a look at it <img src='http://blog.thejit.org/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
]]></content:encoded>
	</item>
	<item>
		<title>By: Marcus</title>
		<link>http://blog.thejit.org/2009/08/30/html-svg-or-canvas-labels/comment-page-1/#comment-443</link>
		<dc:creator>Marcus</dc:creator>
		<pubDate>Tue, 01 Sep 2009 10:05:47 +0000</pubDate>
		<guid isPermaLink="false">http://blog.thejit.org/?p=1077#comment-443</guid>
		<description>to clarify &quot;(nb: may not be a leaf quad)&quot; it meant &quot;(nb: might not be a leaf quad)&quot;</description>
		<content:encoded><![CDATA[<p>to clarify &#8220;(nb: may not be a leaf quad)&#8221; it meant &#8220;(nb: might not be a leaf quad)&#8221;</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: Marcus</title>
		<link>http://blog.thejit.org/2009/08/30/html-svg-or-canvas-labels/comment-page-1/#comment-442</link>
		<dc:creator>Marcus</dc:creator>
		<pubDate>Tue, 01 Sep 2009 10:04:23 +0000</pubDate>
		<guid isPermaLink="false">http://blog.thejit.org/?p=1077#comment-442</guid>
		<description>Re: Native labels

You can optimise the search for what is clicked by dividing the canvas space into quarters, recursively, until there is only one clickable element in each quad.

I do something like this in a toy project I was working on;
a good starting point is here:
http://github.com/mcobden/CanvasGraphLib/blob/07a3133d0105f6ca3a7ddf4e841d115a08fcdf7c/src/tree/CanvasMouseEventTree.js

Here&#039;s a some notes which might explain the odd way it appears to do thigns.
1) you need to limit the depth of recursive subdivision, to prevent nodes on the same point recusing infinitely
2) To find nodes which might have been clicked on, you traverse the quad tree till you arrive at a leaf quad, and then check the event relative to all the nodes in it.
3) nodes of non-zero size (the norm) must be treated differently; I store them in the smallest quad they fit without exceeding any of the boundaries (nb: may not be a leaf quad). On traversal to the leaf quad these nodes must also be added to the list of those to check. 
4) Rebuilding the tree after moving anything is a pain. It may or may not be a work in progress. (I might not have comitted it to github)

This paper describes how this division can be used for optimising computation of repulsive forces in force-directed graph algorithms.
http://www.springerlink.com/content/mlbkplfwx7cmk4hf/
The non-zero sized node considerations are an adaption of this.</description>
		<content:encoded><![CDATA[<p>Re: Native labels</p>
<p>You can optimise the search for what is clicked by dividing the canvas space into quarters, recursively, until there is only one clickable element in each quad.</p>
<p>I do something like this in a toy project I was working on;<br />
a good starting point is here:<br />
<a href="http://github.com/mcobden/CanvasGraphLib/blob/07a3133d0105f6ca3a7ddf4e841d115a08fcdf7c/src/tree/CanvasMouseEventTree.js" rel="nofollow">http://github.com/mcobden/CanvasGraphLib/blob/07a3133d0105f6ca3a7ddf4e841d115a08fcdf7c/src/tree/CanvasMouseEventTree.js</a></p>
<p>Here&#8217;s a some notes which might explain the odd way it appears to do thigns.<br />
1) you need to limit the depth of recursive subdivision, to prevent nodes on the same point recusing infinitely<br />
2) To find nodes which might have been clicked on, you traverse the quad tree till you arrive at a leaf quad, and then check the event relative to all the nodes in it.<br />
3) nodes of non-zero size (the norm) must be treated differently; I store them in the smallest quad they fit without exceeding any of the boundaries (nb: may not be a leaf quad). On traversal to the leaf quad these nodes must also be added to the list of those to check.<br />
4) Rebuilding the tree after moving anything is a pain. It may or may not be a work in progress. (I might not have comitted it to github)</p>
<p>This paper describes how this division can be used for optimising computation of repulsive forces in force-directed graph algorithms.<br />
<a href="http://www.springerlink.com/content/mlbkplfwx7cmk4hf/" rel="nofollow">http://www.springerlink.com/content/mlbkplfwx7cmk4hf/</a><br />
The non-zero sized node considerations are an adaption of this.</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: Franz</title>
		<link>http://blog.thejit.org/2009/08/30/html-svg-or-canvas-labels/comment-page-1/#comment-441</link>
		<dc:creator>Franz</dc:creator>
		<pubDate>Tue, 01 Sep 2009 07:25:21 +0000</pubDate>
		<guid isPermaLink="false">http://blog.thejit.org/?p=1077#comment-441</guid>
		<description>There is an important difference between excanvas and svgweb: excanvas translates canvas commands to VML (Microsoft&#039;s propriertary version of SVG) to compensate the lack of canvas in IE, whereas svgweb embeds a flash movie to display SVG in any browser.

About the event handlers: maybe there is the possibility to implement a &quot;lazy&quot; event handler, that calculates the label position only if the callback function tells him to do so.</description>
		<content:encoded><![CDATA[<p>There is an important difference between excanvas and svgweb: excanvas translates canvas commands to VML (Microsoft&#8217;s propriertary version of SVG) to compensate the lack of canvas in IE, whereas svgweb embeds a flash movie to display SVG in any browser.</p>
<p>About the event handlers: maybe there is the possibility to implement a &#8220;lazy&#8221; event handler, that calculates the label position only if the callback function tells him to do so.</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: Ollie</title>
		<link>http://blog.thejit.org/2009/08/30/html-svg-or-canvas-labels/comment-page-1/#comment-440</link>
		<dc:creator>Ollie</dc:creator>
		<pubDate>Mon, 31 Aug 2009 23:42:13 +0000</pubDate>
		<guid isPermaLink="false">http://blog.thejit.org/?p=1077#comment-440</guid>
		<description>Great stuff. Of the three methods I prefer the SVG approach, because I think label events are crucial, and because of rotation being better supported than with html elements (especially given the Google library you mentioned). Giving the option for the user to decide would be great, as I can see how going native and losing the events for better performance would be prefered in some cases.

Is the only advantage of html elements over SVG the browser support?</description>
		<content:encoded><![CDATA[<p>Great stuff. Of the three methods I prefer the SVG approach, because I think label events are crucial, and because of rotation being better supported than with html elements (especially given the Google library you mentioned). Giving the option for the user to decide would be great, as I can see how going native and losing the events for better performance would be prefered in some cases.</p>
<p>Is the only advantage of html elements over SVG the browser support?</p>
]]></content:encoded>
	</item>
	<item>
		<title>By: HTML, SVG or Canvas Labels? at noumena &#124; ScriptRemix.com Scripts</title>
		<link>http://blog.thejit.org/2009/08/30/html-svg-or-canvas-labels/comment-page-1/#comment-432</link>
		<dc:creator>HTML, SVG or Canvas Labels? at noumena &#124; ScriptRemix.com Scripts</dc:creator>
		<pubDate>Sun, 30 Aug 2009 14:16:38 +0000</pubDate>
		<guid isPermaLink="false">http://blog.thejit.org/?p=1077#comment-432</guid>
		<description>[...] Read the original here: HTML, SVG or Canvas Labels? at noumena [...]</description>
		<content:encoded><![CDATA[<p>[...] Read the original here: HTML, SVG or Canvas Labels? at noumena [...]</p>
]]></content:encoded>
	</item>
</channel>
</rss>
