Looking into Asset Rebalancing , I thought a visual aide would be helpful.
First, a simple Rails partial for doing a pie chart:
total = chart.map(&:last).sum
r = 0
xml.svg :xmlns=>'http://www.w3.org/2000/svg', :viewBox=>'-100 -100 200 200' do
xml.circle :r=>96, :stroke=>"#000", :fill=>"#000"
for color, title, value in chart
p1 = [Math.sin(r)*95, -Math.cos(r)*95].map(&:round).join(',')
r += Math::PI*2 * value/total
p2 = [Math.sin(r)*95, -Math.cos(r)*95].map(&:round).join(',')
xml.path :d=>"M#{p1} A95,95 0 0 1 #{p2} L0,0 Z",
:fill=>color, :title=>title
end
end
Then a jQuery script which causes the corresponding slice to “pop out” when you hover over a row in an adjoining table.
<script>
$.each($('tr'), function() {
var label = $(this).find('td:nth-child(2)').text();
var path = $('path[title="' + label + '"]');
if (path.length == 0) return;
$(this).
mouseover(function() {
path.attr({'stroke-width': '7', 'stroke': path.attr('fill')});
path.parent().append(path);
}).
mouseout(function() {
path.removeAttr('stroke-width').removeAttr('stroke');
});
});
</script>
Do we get a demo?
Posted by Bob Aman at
14:08
Do we get a demo?
I’d like to see that demo, too. Unfortunately, my brain doesn’t yet grok SVG.
Posted by Scott Johnson at
18:58
There really isn’t much to it: demo .
Note: numbers and categories changed for obvious reasons.
Works on Gecko and Webkit based browsers. Can’t explain what Opera does with this.
Posted by Sam Ruby at
19:48
On Chrome the ‘Options’ segment (and only that segment) becomes a four-sided shape when magnified!
Posted by MW at
23:06
That can be controlled by setting stroke-miterlimit to a sufficiently high value, but better results may be obtained by setting stroke-linejoin to either bevel or round.
Posted by Sam Ruby at
00:49
The demo doesn’t do anything at all in a moderately recent Firefox, no pie chart, no error message, nothing.
<svg viewbox="-100 -100 200 200" xmlns="http://www.w3.org/2000/svg">
<circle r="96" stroke="#000" fill="#000">
<path d="M0,-95 A95,95 0 0 1 66,-68 L0,0 Z" title="Cash" fill="#0C0">
<path d="M66,-68 A95,95 0 0 1 76,57 L0,0 Z" title="Stocks" fill="#0DF">
<path d="M76,57 A95,95 0 0 1 63,71 L0,0 Z" title="Options" fill="#00F">
<path d="M63,71 A95,95 0 0 1 -2,95 L0,0 Z" title="CDs" fill="#FC0">
<path d="M-2,95 A95,95 0 0 1 -93,17 L0,0 Z" title="Property" fill="#A22">
<path d="M-93,17 A95,95 0 0 1 0,-95 L0,0 Z" title="Retirement" fill="#CB3">
</path>
</path></path></path></path></path></circle></svg>
(X11; U; Linux x86_64; de; rv:1.9.0.3) Gecko/2008092510 Ubuntu/1.0.4 (hardy) Firefox/3.0.3
Posted by Florian at
07:51
Actually, the open meta and link tags in the head are pushing FF into quirks mode. If I save the file as demo.xhtml and open it, I get a parse error.
Posted by Florian at
08:00
Works for me on Firefox 3.0.3 (as well as on Firefox 2.0.0.14).
Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.3) Gecko/2008092510 Ubuntu/8.04 (hardy) Firefox/3.0.3
$ curl -H "Accept: application/xhtml+xml" --head http://intertwingly.net/stories/2008/10/16/demo.html
HTTP/1.1 200 OK
Date: Fri, 17 Oct 2008 10:37:09 GMT
Server: Apache
Vary: Accept-Encoding,User-Agent
Last-Modified: Thu, 16 Oct 2008 19:55:31 GMT
ETag: "ab440c-c4e-3b2932c0"
Accept-Ranges: bytes
Content-Length: 3150
X-UA-Compatible: IE=7
Connection: close
Content-Type: application/xhtml+xml;charset=utf-8
The file is also well-formed:
$ python
Python 2.5.1 (r251:54863, May 18 2007, 16:56:43)
[GCC 3.4.4 (cygming special, gdc 0.12, using dmd 0.125)] on cygwin
Type "help", "copyright", "credits" or "license" for more information.
>>> from xml.dom import minidom
>>> from urllib2 import urlopen
>>> minidom.parse(urlopen('http://intertwingly.net/stories/2008/10/16/demo.html'))
<xml.dom.minidom.Document instance at 0x7feaf20c>
Posted by Sam Ruby
at
10:44
Opera 9.6.0 on OS X displays the graph and pie chart but not the rollover animation.
Posted by epc at
03:15
Well, that is what my Firefox claims to ask for:
GET /stories/2008/10/16/demo.html HTTP/1.1
Host: intertwingly.net
User-Agent: Mozilla/5.0 (X11; U; Linux x86_64; de; rv:1.9.0.3) Gecko/2008092510 Ubuntu/1.0.4 (hardy) Firefox/3.0.3
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
and this is what it claims to get back:
HTTP/1.0 200 OK
...
Content-Type: text/html; charset=utf-8
So it looks like FF believed the headers that went into the headers, not the headers that went into the body, and helpfully “fixed” the illegal backslashes when saving the file.
Posted by Florian at
09:48
Using Live HTTP Headers from Windows this time:
GET /stories/2008/10/16/demo.html HTTP/1.1
Host: intertwingly.net
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.0.3) Gecko/2008092417 Firefox/3.0.3
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 300
Connection: keep-alive
Referer: http://intertwingly.net/blog/2008/10/16/Popping-Pie-Partial
Cookie: cmt_email=rubys@intertwingly.net; cmt_name=Sam%20Ruby; cmt_url=http%3A//intertwingly.net/blog/; openid="http://intertwingly.net/blog/"; xmpp_id="http://intertwingly.net/blog/"; livePreview=true
Pragma: no-cache
Cache-Control: no-cache
Response:
HTTP/1.x 200 OK
Date: Tue, 21 Oct 2008 10:39:29 GMT
Server: Apache
Vary: Accept-Encoding,User-Agent
Last-Modified: Thu, 16 Oct 2008 19:55:31 GMT
Etag: "ab440c-c4e-3b2932c0"
Accept-Ranges: bytes
Content-Encoding: gzip
X-UA-Compatible: IE=7
Content-Length: 1097
Connection: close
Content-Type: application/xhtml+xml;charset=utf-8
What illegal backslashes?
Posted by Sam Ruby at
10:42
The backslashes closing for example the empty meta tag, which are only legal in xhtml,
GET /stories/2008/10/16/demo.html HTTP/1.1
Host: intertwingly.net
User-Agent: Mozilla/5.0 (X11; U; Linux x86_64; de; rv:1.9.0.3) Gecko/2008092510 Ubuntu/1.0.4 (hardy) Firefox/3.0.3
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: de-de,de;q=0.8,en-us;q=0.5,en;q=0.3
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 300
Proxy-Connection: keep-alive
Referer: http://www.intertwingly.net/blog/2008/10/16/Popping-Pie-Partial
Pragma: no-cache
Cache-Control: no-cache
HTTP/1.x 200 OK
Date: Tue, 21 Oct 2008 13:01:50 GMT
Server: Apache
Last-Modified: Thu, 16 Oct 2008 19:55:31 GMT
Etag: "ab440c-c4e-3b2932c0"
Accept-Ranges: bytes
Vary: Accept-Encoding,User-Agent
Content-Encoding: gzip
X-UA-Compatible: IE=7
Content-Length: 1097
Content-Type: text/html; charset=utf-8
Florian at
13:09
Those aren’t backslashes, they are forward slashes, and they aren’t illegal, at least not in HTML5.
Try this page . If it works, you have a bad cache someplace between your browser and my host.
Posted by Sam Ruby at
13:15
Doh, of course, they are forward, but view source still makes them red like errors...
I get the same thing with ?foo or ?bar or ?qux, and according to tcpdump it is not
15:32:11.355946 IP vanadium.sabren.com.http > xxxxxxxx.de.55752: P 1:1429(1428) ack 518 win 6432 <nop,nop,timestamp 378203432 2152087561>
0x0000: 4500 05c8 b843 4000 3306 2554 4313 ad54 E....C@.3.%TC..T
0x0010: d96e xxxx 0050 d9c8 e0f8 3ef8 88ac 1e0e .n...P....>.....
0x0020: 8018 1920 32cf 0000 0101 080a 168a ed28 ....2..........(
0x0030: 8046 4009 4854 5450 2f31 2e31 2032 3030 .F@.HTTP/1.1.200
0x0040: 204f 4b0d 0a44 6174 653a 2054 7565 2c20 .OK..Date:.Tue,.
0x0050: 3231 204f 6374 2032 3030 3820 3133 3a33 21.Oct.2008.13:3
0x0060: 323a 3131 2047 4d54 0d0a 5365 7276 6572 2:11.GMT..Server
0x0070: 3a20 4170 6163 6865 0d0a 4c61 7374 2d4d :.Apache..Last-M
0x0080: 6f64 6966 6965 643a 2054 6875 2c20 3136 odified:.Thu,.16
0x0090: 204f 6374 2032 3030 3820 3139 3a35 353a .Oct.2008.19:55:
0x00a0: 3331 2047 4d54 0d0a 4554 6167 3a20 2261 31.GMT..ETag:."a
0x00b0: 6234 3430 632d 6334 652d 3362 3239 3332 b440c-c4e-3b2932
0x00c0: 6330 220d 0a41 6363 6570 742d 5261 6e67 c0"..Accept-Rang
0x00d0: 6573 3a20 6279 7465 730d 0a56 6172 793a es:.bytes..Vary:
0x00e0: 2041 6363 6570 742d 456e 636f 6469 6e67 .Accept-Encoding
0x00f0: 2c55 7365 722d 4167 656e 740d 0a43 6f6e ,User-Agent..Con
0x0100: 7465 6e74 2d45 6e63 6f64 696e 673a 2067 tent-Encoding:.g
0x0110: 7a69 700d 0a58 2d55 412d 436f 6d70 6174 zip..X-UA-Compat
0x0120: 6962 6c65 3a20 4945 3d37 0d0a 436f 6e74 ible:.IE=7..Cont
0x0130: 656e 742d 4c65 6e67 7468 3a20 3130 3937 ent-Length:.1097
0x0140: 0d0a 436f 6e6e 6563 7469 6f6e 3a20 636c ..Connection:.cl
0x0150: 6f73 650d 0a43 6f6e 7465 6e74 2d54 7970 ose..Content-Typ
0x0160: 653a 2074 6578 742f 6874 6d6c 3b20 6368 e:.text/html;.ch
0x0170: 6172 7365 743d 7574 662d 380d 0a0d 0a1f arset=utf-8.....
Florian at
13:48