%%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>
%%javascript
window.get_element = function(el){
if(el){ $(el).html('') }
return (el !== undefined) ? el[0] : $('script').last().parent()[0];
};
element = undefined;
%%javascript
var target = get_element(element)
$(target).append('<div class="hello-world">Hello, js magic!</div>')
%%javascript
require.config({
paths: {
d3: "http://d3js.org/d3.v3.min"
}
});
%%javascript
(function(){
var targetElement = get_element(element);
require(['d3'], function(){
$(targetElement).append($('<p>' + d3 + '</p>'))
});
})();
%%javascript
(function(){
var targetElement = get_element(element);
require(['d3'], function(){
$(targetElement).append($('<p>' + d3.max([3,91,82,34,19]) + '</p>'))
});
})();
%%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})
});
})();