In [1]:
%%html

<style>
.hello-world{
    border: 1px solid black; 
    width: 300px; 
    height: 50px; 
    font-size: 2em; 
    padding: 0.3em;
}
</style>

<div class='hello-world'>
Hello ,html magic!
</div>
Hello ,html magic!
In [2]:
%%javascript

window.get_element = function(el){
    if(el){ $(el).html('') }
    return (el !== undefined) ? el[0] : $('script').last().parent()[0];
};

element = undefined;
In [3]:
%%javascript

var target = get_element(element)
$(target).append('<div class="hello-world">Hello, js magic!</div>')
In [4]:
%%javascript

require.config({
    paths: {
        d3: "http://d3js.org/d3.v3.min"
    }
});
In [5]:
%%javascript

(function(){
    var targetElement = get_element(element);
    require(['d3'], function(){
        $(targetElement).append($('<p>' + d3 + '</p>'))
    });
})();
In [6]:
%%javascript

(function(){
    var targetElement = get_element(element);
    require(['d3'], function(){
        $(targetElement).append($('<p>' + d3.max([3,91,82,34,19]) + '</p>'))
    });
})();
In [7]:
%%javascript

(function(){
    var targetElement = get_element(element);
    require(['d3'], function(){
        var data = [1, 2, 3, 4, 5, 6, 10]
        var svg = d3.select(targetElement).append('svg')
            .attr('width', '350px')
            .attr('height', '100px')
            .style('border', '1px solid lightgray');
        
        svg.selectAll('circle')
            .data(data)
            .enter()
            .append('circle')
            .style('fill', 'skyblue')
            .attr('cx', function(d, i){ return i * (350/data.length) + 15})
            .attr('cy', '50px')
            .attr('r', function(d){ return d * 3})
    });
})();