Interact with d3 using D3Magic? about d3magic.jl HOT 6 CLOSED

using Interact
@manipulate for i in 1:30
    d3code = """
        <g></g>

        <style>
        element {
            height: 25px;
        }
        div.bar {
            display: inline-block;
            width: 20px;
            height: 75px;
            margin-right: 2px;
            background-color: teal;
        }
        </style>

        <script>
        var dataset = [ 5, 10, 13, 19, 21, $i, 22, 18, 15, 13,
                        11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];

        d3.select("g").selectAll("div")
            .data(dataset)
            .enter()
            .append("div")
            .attr("class", "bar")
            .style("height", function(d) {
                var barHeight = d * 5;
                return barHeight + "px";
            });
        </script>
    """
    IJulia.clear_output()
    @d3_str d3code
end;

d3"""
<div class="example_div"></div>
<script>
var tooltip = d3._select("body")
    .append("div")
    .attr("class", "jjtooltip")
	.style("position", "absolute")
	.style("z-index", "10")
	.style("visibility", "hidden")
	.text("a simple tooltip");
	
var sampleSVG = d3.select(".example_div")
	.append("svg:svg")
	.attr("class", "sample")
	.attr("width", 300)
	.attr("height", 300);    
	
d3.select(".example_div svg")
	.append("svg:circle")
	.attr("stroke", "black")
	.attr("fill", "aliceblue")
	.attr("r", 50)
	.attr("cx", 52)
	.attr("cy", 52)
	.on("mouseover", function(){
        return tooltip.style("visibility", "visible");
    })
	.on("mousemove", function(){
        // debugger
        return tooltip.style("top", (event.y-10)+"px").style("left",(event.x+10)+"px");
    })
	.on("mouseout", function(){return tooltip.style("visibility", "hidden");});
</script>
"""