Referencing JavaScript library in GWT for JavaScript Code

I'm using the d3.js library and have some javascript code written that already draws the animation I want. For the sake of simplicity/ size, say I want to use this sample source code. I'm trying to use GWT to build a richer user interface around the animation. For example, if I designed a button in GWT java to toggle the particle animation on/off and trigger a "StopAnimation()" javascript function, where would I place the d3.js library so it is correctly referenced?

I've read the following posts related to this topic:

Post 1 Post 2 Post 3

I'm really new to GWT so I may have missed something but all of these examples talk about having direct contact with the javascript library from your GWT code or interfacing with javascript code. In my case, the only javascript code I need to interface with from GWT is the particle example so I don't believe d3.js should need any special JSNI interface correct?...since the particle example code is the only part that utilizes d3.js. The problem I'm running into is that when I place the javascript code into the compiled html file, it never produces the animation.

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <link type="text/css" rel="stylesheet" href="MenuViewer.css">

    <title>Wrapper HTML for MenuViewer</title>

    <script language="javascript" src="com.JoshBradley.MenuViewer/com.JoshBradley.MenuViewer.nocache.js"></script>
    <script language="javascript" src="d3-v2.9.5/d3.v2.js"></script>

</head>
<body>
    <div id="graph"></div>
    <div id="menu"></div>
    <script type="text/javascript">
        var w = 960;
        var h = 500;
        var z = d3.scale.category20c();
        var i = 0;

        var svg = d3.select("body").select("graph").append("svg:svg").attr("width", w).attr("height", h).style("pointer-events", "all").on("mousemove", particle);

        function particle() {
            var m = d3.svg.mouse(this);

            svg.append("svg:circle").attr("cx", m[0]).attr("cy", m[1]).attr("r", 1e-6).style("stroke", z(++i)).style("stroke-opacity", 1).transition().duration(2000).ease(Math.sqrt).attr("r", 100).style("stroke-opacity", 1e-6).remove();
        }
    </script>
</body>

I see the stuff I created in GWT but no particles. Initially I was getting reference errors because d3.js was not in the right folder, however once I put it in the war directory, they went away so the problem can't be a reference error. Am I allowed to place javascript code right into the html file like that? As of right now, I'm not worried about getting the GWT/ javascript interaction with the particle code working. I just want to see the appropriate GWT code and particle code animations on the same page. I'll worry about stopping the animation later.

The RootPanel is assigned to the "menu" div and the particle code assigned to the "graph" div. When I check the html through firebug, nothing is created in the "graph" div. Can someone explain what I'm doing wrong?

Solution

This bit is incorrect:

d3.select("body").select("graph")

There are no elements called "graph", so this will be an empty selection.

D3 uses CSS3 to select elements. I think you wanted to select the element with ID "graph", so it should be:

d3.select("body").select("#graph")