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>:

<script src="http://raphaeljs.com/raphael.js" 
        type="text/javascript" charset="utf-8"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" 
        type="text/javascript" charset="utf-8"></script>    
<script src="/scripts/jquery.topicconnections.js" 
        type="text/javascript" charset="utf-8"></script>

4) This code goes inline:

<div class="SO-module">
    <div id="SO-connections-graph-wrapper">
        <div id="connections_graph_186817" class="SO-connections-graph"></div>
        <ol class="SO-topics">
            <li class="SO-topic">
                <a class="SO-name" href="http://beta.daylife.com/topic/White_House">White House</a>
            </li>
            <li class="SO-topic">
                <a class="SO-name" href="http://beta.daylife.com/topic/U.S._Republican_Party">U.S. Republican Party</a>
            </li>
            <li class="SO-topic">
                <a class="SO-name" href="http://beta.daylife.com/topic/U.S._Democratic_Party">U.S. Democratic Party</a>
            </li>
            <li class="SO-topic">
                <a class="SO-name" href="http://beta.daylife.com/topic/U.S._Congress">U.S. Congress</a>
            </li>
            <li class="SO-topic">
                <a class="SO-name" href="http://beta.daylife.com/topic/George_W._Bush">George W. Bush</a>
            </li>
            <li class="SO-topic">
                <a class="SO-name" href="http://beta.daylife.com/topic/U.S._Senate">U.S. Senate</a>
            </li>
            <li class="SO-topic">
                <a class="SO-name" href="http://beta.daylife.com/topic/Economic_Recession">Economic Recession</a>
            </li>
        </ol>
    </div>
</div>

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.)
9:29 p.m. on March 2nd, 2010
4 areriespooxia says...
Samsung laptop battery <a href=http://www.hqlaptopbatteries.com/battery-3022wlmi-batterytype1.html>Asus Laptop</a> sony laptop http://www.hqlaptopbatteries.com/-2430-laptopbatterymodel... universal laptop battery High quality discount laptop battery store <a href=http://www.hqlaptopbatteries.com/battery-a150-bb1-batterytype1.html>Professional Laptop Battery Wholesale Site</a> Fujitsu Laptop http://www.hqlaptopbatteries.com/dell-xps-laptopbatterymo... universal laptop battery Laptop Batteries Wholesale <a href=http://www.hqlaptopbatteries.com/battery-9104wsmi-batterytype1.html>laptop batteries for notebook computers</a> notebook battery http://www.hqlaptopbatteries.com/-c300xci-laptopbatterymo... Acer laptop battery
1:24 p.m. on March 3rd, 2010
5 sonAlgone says...
auto audio capasiters <a href=http://www.cardvdplanet.com/gps-car-dvd-player-2-din-7-inch-tft-led-touch--discount-price36.html>hyundai car audio system</a> auto audio for sale http://www.cardvdplanet.com/car-cd-mp3-player-with-usb-sd... auto audio systems car audio equipment for gmc <a href=http://www.cardvdplanet.com/7-inch-in-dash-tft-lcd-monitor-16-9-with-dvd--discount-price74.html>car audio subwoofer alpine plt 5 ford 2002 f150 supercrew</a> racing car audio http://www.cardvdplanet.com/magoten-touch-screen-7-inch-2... chrysler car audio ho auto audio <a href=http://www.cardvdplanet.com/car-dvd-player-with-bluetooth-and-tv--discount-price51.html>car audio for subaru legacy</a> venice florida auto audio installation http://www.cardvdplanet.com/car-dvd-player-with-fm-functi... car audio subwoofer alpine plt 5 ford 2002 f150 supercrew