Raphaël Demo - Cross Browser Vector Graphics - Topic Connections Graph

Oct 01

Raphaël Demo - Cross Browser Vector Graphics - Topic Connections Graph

SVG, an open, standardized vector graphics markup language is now supported on 30% of all web browsers. The other 70% of browsers (specifically, Internet Explorer), support VML, a close cousin of SVG. If you write both SVG and VML, you can provide rich, interactive vector graphics > 99% of all browsers.

Raphaël JavaScript Library does all the heavy lifting for the developer. Write your circles, paths, animations, and interactions (events, mouseovers, clicks) in Raphaël, and it will write compatible SVG and VML that works almost everywhere. I have contributed to Raphaël and am currently presenting a paper and a workshop on Raphaël at SVG Open 2009 at Google HQ in Mountain View, California.

I wrote this demo for Daylife, but this demo uses a number of features in Raphaël, showcasing a number of features that can be used to make interactive graphics that are unlike anything else natively supported by almost all web browsers. This means no plug-ins or installs. No Flash. Just what is already built into every web browser.

Demo - Topic Connections Graph

Code

1) Download jquery.topicconections.js

2) This code should go into your <style>:


.SO-module .SO-name {
    display: block;
    font-size: 10px;
    line-height: 11px;
    margin: 5px 0;
    position: absolute;
    text-align: center;
    visibility: hidden;
    width: 80px;
    color: #416799;
    font-family: "Lucida Grande";
}

.SO-module a {
    text-decoration: none;
    background: none;
}

.SO-active a {
    text-decoration: underline;
}

.SO-module ol li {
    list-style: none !important;
}

.SO-module {
    margin: 20px;
    position: relative;
}

3) Include these scripts in your <head>:

4) This code goes inline:



    
        
        
            
                White House
            
            
                U.S. Republican Party
            
            
                U.S. Democratic Party
            
            
                U.S. Congress
            
            
                George W. Bush
            
            
                U.S. Senate
            
            
                Economic Recession

5) This JavaScript code also goes inline:


var images = [
    {
        'img': "/media/img/svg_demo/whitehouse.jpg",
        'text': "White House",
        'link': "http://beta.daylife.com/topic/White_House",
        's': "large"
    },
    {
        'img': "/media/img/svg_demo/repub.jpg",
        'text': "U.S. Republican Party",
        'link': "http://beta.daylife.com/topic/U.S._Republican_Party",
        's': "large"
    },
    {
        'img': "/media/img/svg_demo/demo.jpg",
        'text': "U.S. Democratic Party",
        'link': "http://beta.daylife.com/topic/U.S._Democratic_Party",
        's': "large"
    },
    {
        'img': "/media/img/svg_demo/congress.jpg",
        'text': "U.S. Congress",
        'link': "http://beta.daylife.com/topic/U.S._Congress",
        's': "medium"
    },
    {
        'img': "/media/img/svg_demo/bush.jpg",
        'text': "George W. Bush",
        'link': "http://beta.daylife.com/topic/George_W._Bush",
        's': "medium"
    },
    {
        'img': "/media/img/svg_demo/senate.jpg",
        'text': "U.S. Senate",
        'link': "http://beta.daylife.com/topic/U.S._Senate",
        's': "small"
    },
    {
        'img': "/media/img/svg_demo/econ.jpg",
        'text': "Economic Recession",
        'link': "http://beta.daylife.com/topic/Economic_Recession",
        's': "small"
    }
];

var topic_image = {
    'img': "/media/img/svg_demo/obama.jpg",
    's': 'xlarge'
};

var center_x = 125;
var center_y = 125;
var offset_x = 45;
var offset_y = 45;
var $graph = $("#connections_graph_186817")[0];
var graph_x = 340;
var graph_y = 340;

var sizes = {
    'small': 35,
    'medium': 55,
    'large': 75,
    'xlarge': 100
};

var topic_graph = new TopicConnectionGraph($graph, graph_x, graph_y, 
                                           center_x, center_y,
                                           offset_x, offset_y, sizes);
topic_graph.runner(images, topic_image);

Comments

2:55 p.m. on October 1st, 2009
1 Alexander Ainslie (@AAinslie) says...

Interesting approach. Thanks for sharing. Would love to chat sometime and lear more. Best, Alexander Paris, France

2:55 p.m. on October 2nd, 2009
2 Marak Squires says...

Looking good Samuel! I can't wait to see more Raphael.js widgets like this!

2:56 p.m. on October 3rd, 2009
3 Rob Belics says...

Better idea. Don't support a dying browser. Don't support VML and help kill off that turd of a browser. (IE and all its versions.)

1:20 a.m. on April 10th, 2010
4 Evannigrata says...

johns hopkins antibiotic guide <a href=http://usadrugstoretoday.com/bestsellers.htm>Pharmacy bestsellers</a> drug testing soma http://usadrugstoretoday.com/products/femara.htm companion diagnostic fda http://usadrugstoretoday.com/products/zyvox.htm public service employees health care <a href=http://usadrugstoretoday.com/products/coumadin.htm>coumadin</a> guidelines for manegment of intravenous drugs <a href=http://usadrugstoretoday.com/categories/general-health.htm>blood typing diet</a>

1:56 a.m. on April 12th, 2010
5 Zorryinursips says...

babies health <a href=http://usadrugstoretoday.com/products/betapace.htm>betapace</a> lift every heart and sing http://usadrugstoretoday.com/products/hair-loss-cream.htm neg blood types http://usadrugstoretoday.com/products/altace.htm bad killers blood minutes watch min closer cure death high <a href=http://usadrugstoretoday.com/products/erythromycin.htm>erythromycin</a> medical office lapel <a href=http://usadrugstoretoday.com/index.php?lng=uk&cv=po>tapeworm pills</a>

6:18 p.m. on April 14th, 2010
6 IdonihInnyjen says...

http://brazil.mcneel.com/members/lopid.aspx lopid <a href="http://brazil.mcneel.com/members/lopid.aspx">lopid</a> http://brazil.mcneel.com/members/lopid.aspx - lopid

6:03 p.m. on April 18th, 2010
7 CenPrerseag says...

Dooiekd <a href="http://fkioskj.com">fkioskj</a> http://fkioskj.com - fkioskj http://fkioskj.com

3:55 a.m. on April 19th, 2010
8 KamagraCheap says...

[url="http://www.bip40.org/series/kamagramain.html"]Buy Kamagra Online[/url] Cheap kamagra uk viagra , [url="http://www.bip40.org/series/kamagra-oral-jelly-100-mg.html"]Kamagra oral jelly 100 mg[/url] Kamagra blue , [url="http://www.bip40.org/series/viagra-vs-kamagra.html"]Viagra vs kamagra[/url] Silagra kamagra , [url="http://www.bip40.org/series/buy-kamagra-tablets.html"]Buy kamagra tablets[/url] Kamagra or viagra , [url="http://www.bip40.org/series/kamagra-co-uk.html"]Kamagra co uk[/url] Kamagra jellies , [url="http://www.bip40.org/series/order-kamagra-online.html"]Order kamagra online[/url] Kamagra 100mg tablets , [url="http://www.bip40.org/series/sildenafil-oral-jelly-kamagra.html"]Sildenafil oral jelly kamagra[/url] Buy kamagra , [url="http://www.bip40.org/series/kamagra-women.html"]Kamagra women[/url] Kamagra r us , [url="http://www.bip40.org/series/cheap-viagra-kamagra.html"]Cheap viagra kamagra[/url] Kamagra fast , [url="http://www.bip40.org/series/kamagra-canada.html"]Kamagra canada[/url] Sildenafil citrate kamagra , [url="http://www.bip40.org/series/kamagra-uk-buy.html"]Kamagra uk buy[/url] Buy cheap kamagra uk , [url="http://www.bip40.org/series/kamagra-india.html"]Kamagra india[/url] Kamagra cheapest , [url="http://www.bip40.org/series/kamagra-wirkung.html"]Kamagra wirkung[/url] Viagra kamagra uk , [url="http://www.bip40.org/series/buy-kamagra-uk.html"]Buy kamagra uk[/url] Kamagra legal , [url="http://www.bip40.org/series/india-kamagra.html"]India kamagra[/url] Kamagra potenzmittel , [url="http://www.bip40.org/series/kamagra-nachnahme.html"]Kamagra nachnahme[/url] Kamagra oral jelly side effects , kamagra gel , kamagra kaufen, kamagra generic, kamagra jel, kamagra gold, kamagra india, kamagra in uk, kamagra jellies, kamagra man, kamagra kopen, kamagra generique, kamagra legal, kamagra for women, kamagra london, kamagra in the uk, kamagra buy

9:56 a.m. on April 24th, 2010
9 Claliafam says...

Udjieower <a href="http://udjieower.com">udjieower</a> http://udjieower.com udjieower http://udjieower.com

3:21 a.m. on April 30th, 2010
10 Guishioth says...

inexpensive golf shoes http://topcitystyle.com/outwear-category8.html kevin garnett basketball shoes <a href=http://topcitystyle.com/blue-dresses-color32.html>stephenville fashion</a> chanel jacket resale berkeley http://topcitystyle.com/cream-casual-color68.html mirrors designer bath <a href=http://topcitystyle.com/accessories>j renee shoes wholesale</a>

9:22 p.m. on April 30th, 2010
11 pneucraneip says...

mens fashion briefs http://topcitystyle.com/?action=products&product_id=27 winter baby clothes <a href=http://topcitystyle.com/black-green-red-t-shirts-for-men-color76.html>chanel iman</a> kamby clothes http://topcitystyle.com/white-blue-long-sleeve-tops-color... tomasello shoes streator il <a href=http://topcitystyle.com/m-leather-jacket-size5.html>high end fashion liquidation</a>

1:35 a.m. on May 2nd, 2010
12 Woholoneade says...

ralph lauren upholstery fabric http://topcitystyle.com/on-sale-shorts-type2.html michael kors pearl shoes <a href=http://topcitystyle.com/leather-shoes-page13.html>gucci minaudiere</a> ladies shoes http://topcitystyle.com/beige-new-color5.html basketball shoes wholesale <a href=http://topcitystyle.com/grey-sport-pants-color1.html>become a fashion designer</a>

12:42 a.m. on May 3rd, 2010
13 offedysledync says...

biking shoes http://topcitystyle.com/of-white-pink-color166.html gucci wallets <a href=http://topcitystyle.com/american-eagle-outfitters-men-brand77.html>puma tennis shoes</a> merrell gore tex xcr stormfront shoes http://topcitystyle.com/calvin-klein-underwear-brand40.html outdoor shoes <a href=http://topcitystyle.com/d-amp-g-hooded-zip-jacket-for-men-grey-item2246.html>petite fashion</a>

10:13 a.m. on May 11th, 2010
14 ImperaCaria says...

Hi, people! I've already 5 days looking for it, but nothing happens. Give plz links as more as you can... I only know these: <a href=http://clr-h.jp/members/Cheap-Deltasone-Without-Prescription.aspx>Cheap Deltasone Without Prescription</a>, Buy Deltasone With No Rx, <a href=http://clr-h.jp/members/Buy-Cod-Deltasone.aspx>Buy Cod Deltasone</a>, Purchase Deltasone Mail Purchase, <a href=http://clr-h.jp/members/Purchase-Cheap-Deltasone-No-Rx.aspx>Purchase Cheap Deltasone No Rx</a>, Purchase Deltasone Cod Next Day Deliver, <a href=http://clr-h.jp/members/Order-Deltasone-Without-Rx.aspx>Order Deltasone Without Rx</a>, Deltasone Buy Cod, <a href=http://clr-h.jp/members/Buy-Deltasone-Pay-Pal-Online-Without-Prescription.aspx>Buy Deltasone Pay Pal Online Without Prescription</a>, Purchase No Online Prescription Deltasone Thanks!

7:14 a.m. on May 12th, 2010
15 weenemnjand says...

<a href="http://grou.ps/viagrasoft">Order Viagra Soft No Prescription</a> Buy Viagra Soft Online, <a href="http://grou.ps/softviagra">Online Ordering Viagra Soft</a> No Prescription Viagra Soft, <a href="http://grou.ps/zithromaxnow/">Buy Zithromax Online</a> cheap zithromax, <a href="http://grou.ps/zithromaxonline">Order Zithromax Without Prescription</a> buy zithromax generic, <a href="http://grou.ps/hqzithromax">Buy Cheap Zithromax Online</a> zithromax no script, <a href="http://grou.ps/norxtab">Buy Zithromax Without A Prescription</a> purchase zithromax, <a href="http://grou.ps/ciprobuy">Buy Cipro Online</a> order cipro cheap, <a href="http://grou.ps/nolvadexpill">Purchase Nolvadex Online Without A Prescription</a> Cheap Nolvadex Online, <a href="http://grou.ps/nolvadex3">Buy Cheap Nolvadex Online</a> Buy Nolvadex Generic.

10:56 p.m. on May 14th, 2010
16 freecell solitaire says...

<a href=freecell-solitaire.socialgo.com>freecell solitaire</a> http://freecell-solitaire.socialgo.com

8:38 a.m. on May 15th, 2010
17 majong says...

<a href=http://majong.socialgo.com>majong solitaire games</a> http://majong.socialgo.com

12:52 p.m. on May 15th, 2010
18 kegeratorser says...

<a href=http://connect.cleveland.com/dashboard/kegerator/index.html>fridge for kegerator</a> http://connect.cleveland.com/dashboard/kegerator/index.html

11:44 a.m. on May 16th, 2010
19 java freecell solitaire says...

<a href=http://www.thisisdelaghetto.com/profile/freecellsolitaire>windows freecell solitaire</a> http://www.thisisdelaghetto.com/profile/freecellsolitaire

11:08 a.m. on May 18th, 2010
20 ownsaed says...

http://needman.ru замуж за иностранца <a href=http://needman.ru>знакомства с иностранцами</a>

3:18 p.m. on May 18th, 2010
21 majongng says...

<a href=http://majong.socialgo.com>majong</a> http://majong.socialgo.com

3:27 p.m. on May 19th, 2010
22 insurancesan says...

<a href=http://insurances.socialgo.com>free health insurance quotes</a> http://insurances.socialgo.com

1:18 p.m. on May 21st, 2010
23 kegeratorer says...

<a href=http://h2o.law.harvard.edu/ViewProject.do?projectID=12410>sanyo 4912 kegerator</a> http://h2o.law.harvard.edu/ViewProject.do?projectID=12410

4:27 p.m. on May 24th, 2010
24 dietologov says...

<a href=http://acmehitech.com/3/6888.php>Самый эффективный массаж для похудения</a> http://acmehitech.com//map.html

7:45 p.m. on May 29th, 2010
25 xbaiuopqjios says...

7:10 a.m. on May 30th, 2010
26 ownsahi says...

cool site http://needman.ru знакомства с иностранцами <a href=http://needman.ru>знакомства с иностранцами</a>

4:36 p.m. on May 30th, 2010
27 wkpsojqios says...

5:37 a.m. on June 1st, 2010
28 Dreancebroano says...

three cups of tea essays <a href=http://usadrugstoretoday.com/products/erythromycin.htm>erythromycin</a> great breast pumps http://usadrugstoretoday.com/products/crestor.htm united health care dallas choice epo <a href=http://usadrugstoretoday.com/products/zantac.htm>zantac</a> health lessons for esl students about prescription labels <a href=http://usadrugstoretoday.com/categories/arreter-de-fumer.htm>medical record management in australia </a> kids escaping drugs buffalo ny golf vaginal irritation after intercourse <a href=http://usadrugstoretoday.com/products/french-red-wine.htm>french red wine</a> muscle strain in front of neck http://usadrugstoretoday.com/products/pro-erex.htm scabies prescription medicine <a href=http://usadrugstoretoday.com/products/vantin.htm>vantin</a> chemical oral health care product avoid dental plaque <a href=http://usadrugstoretoday.com/products/lithium-carbonate.htm>homeopathic medicine manufacturer herb sante quebec canada </a> wellbutrin anxiety side effects

6:38 p.m. on June 1st, 2010
29 ownsahi says...

cool site http://needman.ru как заинтересовать иностранца <a href=http://needman.ru>сайт знакомств с иностранцами возраст не важен</a>

2:23 p.m. on June 2nd, 2010
30 accutane says...

<a href=http://accutane.socialgo.com> accutane dosage </a> http://accutane.socialgo.com

10:21 p.m. on June 2nd, 2010
31 accutane says...

<a href=http://accutane.socialgo.com> accutane guild paternity rights figures </a> http://accutane.socialgo.com

7:11 a.m. on June 3rd, 2010
32 buynolvadex says...

buy generic nolvadex <a href=http://profiles.tigweb.org/buynolvadex>buy nolvadex</a> buy cheap nolvadex online http://profiles.tigweb.org/buynolvadex

8:32 p.m. on June 16th, 2010
33 trannahedroca says...

<a href=http://connect.al.com/user/uanvertalpma/index.html>viagra other uses</a> <a href=http://connect.mlive.com/user/detlerecnavp/index.html>works levitra</a> <a href=http://connect.nj.com/user/leckennscub/index.html>you can buy cialis</a> <a href=http://connect.lehighvalleylive.com/user/leunisentbrah/index.html>one a day cialis</a> <a href=http://connect.cleveland.com/user/tofefu/index.html>viagra hearing loss</a> <a href=http://connect.pennlive.com/user/silloleasub/index.html>online cialis buy</a> <a href=http://connect.silive.com/user/prolhischotamb/index.html>per cialis pill</a> <a href=http://connect.silive.com/user/ersinlei/index.html>buy cialis without prescription</a>

9:25 p.m. on June 18th, 2010
34 Dokallony says...

The United States and England meet today for one of the World Cup's most anticipated match-ups, 60 years in the making. The Americans are ranked 14th, while England ranks eighth. But the underdogs say they are ready for a victory that is long overdue, says CBS news correspondent Mark Phillips. Everybody's optimistic at the beginning of a tournament, especially England fans about to play the U.S. in what the rest of the world calls "football." "It's the round one, not the funny-shaped one" says one enthusiast. The English team is being sent into battle with encouragement from British troops in Afghanistan. "Just like you, we have to hit the target under pressure," said one soldier. They're being urged on by prime ministers: "Come on, England!" said David Cameron. But the U.S. team has presidential approval: "Everybody's going to be rooting for you," said Mr. Obama. And Team USA has something else on its side: History. <a href=http://www.google.com/>Google</a> - http://www.google.com/

9:33 a.m. on July 1st, 2010
35 Bioftlatpat says...

Hello. <a href="http://hukilxxxru.com ">hukilxxxru</a> And Bye.

11:33 a.m. on July 11th, 2010
36 DobLoodoMor says...

DobLoodoMor <a href=http://needman.ru>замуж за иностранца</a> замуж за иностранца http://needman.ru Imapamsit

11:22 p.m. on July 14th, 2010
37 coernclourL says...

croproyarve <a href=http://www.ekccc.org>wholesale adipex</a> coernclourL <a href=http://noweatthis.net>ambien latest side effects</a> smoowphasia <a href=http://www.thegibsoncompany.com>lorazepam without prescription</a> Lewembott

7 p.m. on July 18th, 2010
38 coernclourL says...

croproyarve <a href=http://www.ekccc.org>where can i buy adipex online</a> coernclourL <a href=http://noweatthis.net>ambien 10mg</a> smoowphasia <a href=http://www.thegibsoncompany.com>lorazepam 1mg tablets</a> Lewembott

7:52 p.m. on July 21st, 2010
39 Cheap Auto Insurance Quotes says...

<a href="http://cheapautoinsurancequotes.biz/">Cheap Auto Insurance Quotes</a> <a href="http://healthyweightlosspills.com/">weight loss pill</a>

8:07 p.m. on July 22nd, 2010
40 kayalydroca says...

car insurance price comparison <a href="http://amdzhadleono.tripod.com/cat8/nalc-federal-health-insurance-9.html">nalc federal health insurance</a> florida automobile insurance law <a href="http://anisrimar14.tripod.com/cat3/insurance-licensing-training-class-texas-48.html">insurance licensing training class texas</a> life insurance quotes <a href="http://evgenijalozi.tripod.com/cat5/sentury-insurance-work-comp-156.html">sentury insurance work comp</a> motorcycle insurance quotes online <a href="http://ierofejsopin.tripod.com/cat3/unique-insurance-concets-kutztown-575.html">unique insurance concets kutztown</a> farm bureau insurance company <a href="http://manalfavstov.tripod.com/cat7/cortera-long-term-care-insurance-689.html">cortera long term care insurance</a> auto insurance quotes <a href="http://nadzhibfranc.tripod.com/cat7/21-centry-insurance-woodland-hills-ca-241.html">21 centry insurance woodland hills ca</a> california capital insurance <a href="http://saidsartov47.tripod.com/cat4/insurance-assurance-difference-maritime-law-492.html">insurance assurance difference maritime law</a> health insurance terms <a href="http://stefantjurin.tripod.com/cat2/riversource-life-insurance-15.html">riversource life insurance</a> country companies insurance

8:02 p.m. on July 27th, 2010
41 gellulfupenna says...

Без салонов красоты и студий загара сложно представить нашу жизнь. Мы уже сами, не осознавая происходящего, регулярно посещаем студии загара, пользуемся услугами салонов красоты. Если нам предложить отказаться от данных услуг, мы испытаем как минимум шок... А что бы его не испытывать есть<a href=http://baseall.ru>Рейтинг SUN&SPA</a>

2:52 p.m. on July 28th, 2010
42 shiemnefs says...

Проект <a href="http://moskow-sun.ru">Студия света </a> является эксклюзивным порталом в отрасли загара. Портал является структурированной системой объединяющей студии загара, и предоставляющей объективную оценку работы салонов. Объективность оценок в первую очередь достигается с помощью ваших отзывов и оценок студий загара.

12:06 p.m. on July 29th, 2010
43 Incurdyrern says...

Juicssaillpap Интересные новости и не только в <a href=http://livjurnal.ru>Почти живой журнал</a> jodsernorge

5:12 a.m. on July 30th, 2010
44 lenenzymn says...

сайт обо всём на свете <a href=http://lampara.ru>lampara.ru</a>

10:01 a.m. on July 30th, 2010
45 lenenzymn says...

сайт обо всём на свете <a href=http://lampara.ru>обо всём</a>

OfBrooklyn.com Samuel Clay's public record