Unable to run jsfiddle code on browser

Does anyone know how I can see the result of : http://jsfiddle.net/Wexcode/KGxHF/ in my brwoser. I want to use the code but no result is shown. What frame works and extension should I add? What is Mootool 1.4.5 that is added on the left section of Jsfiddle?

 Mootool 1.4.5

Thanks

Solution

You need to add the script library in your page to run Mootools. MooTools is a Object-Oriented JavaScript framework/library.

For example, insert this in the <head> tag, before other .js files that need Mootools:

<script type="text/javascript" src="http://mootools.net/download/get/mootools-core-1.4.5-full-nocompat.js"></script>

Look here for the same demo but with Mootools loaded by the link i wrote above. The better though is to download the link and run the .js file from your server/computer.

To run it in a page of yours you can use this code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo</title>
<script type="text/javascript" src="http://mootools.net/download/get/mootools-core-1.4.5-full-nocompat.js"></script>
<script type="text/javascript" src="http://d3js.org/d3.v2.min.js"></script>
<style>
path { stroke: #000; fill: brown; stroke-width: .5px }
circle { fill: red; }
</style>
<script>
window.addEvent('domready', function() {
    var SPACING = 5;

    var data = d3.range(50).map(function(d, i) {
        return {x: i * SPACING, y: (Math.random()*100)};
    });
    var h = d3.max(data, function(d) { return d.y; }) + 15;

    /* Create the lookup table */
    var table = [];
    data.forEach(function(d) {
        table[d.x] = d.y;
    });

    var svg = d3.select("body").append("svg")
        .attr("width", 410)
        .attr("height", 125)
    .append("g")
        .attr("transform", "translate(5, 5)");

    var area = svg.selectAll("path").data([data]).enter().append("path")
        .attr(
            "d",
            d3.svg.area()
                .x(function(d) { return d.x; })
                .y0(h)        
                .y1(function(d) { return d.y; })
        );

    var circle = svg.append("circle")
        .attr("r", 3)
        .attr("display", "none");

    area
        .on("mouseover", function() { circle.attr("display", "block"); })
        .on("mousemove", update)
        .on("mouseout", function() { circle.attr("display", "none"); });

    function update() {    
        var x = d3.mouse(this)[0];
        var y;

        if ( table[x] === undefined ) {
            var lower = x - (x % SPACING);
            var upper = lower + SPACING;
            var between = d3.interpolateNumber(table[lower], table[upper]);
            y = between( (x % SPACING) / SPACING );
        } else {
            y = table[x];
        }

        circle
            .attr("cx", x)
            .attr("cy", y);
    }
});
</script>
</head>
<body>
</body>
</html>