OfBrooklyn.com

Samuel Clay is a grad student in the schools of design and of engineering at Harvard. He founded NewsBlur, a personal RSS news reader, and Turn Touch, beautiful control for the smart home.

Talk to him @samuelclay.

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

October 1st, 2009

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);

Other writing