Inkscape d3 tutorial

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@2.10.3/d3.v2.js"></script>
<title>D3-Inkscscape tutorial</title>
</head>
<body>
<div id="viz"></div>
<a href="#" id="download">Download</a>
<script type="text/javascript">

d3.xml("tuto3.svg", "image/svg+xml", function(xml) {
    var importedNode = document.importNode(xml.documentElement, true);
    d3.select("#viz").node().appendChild(importedNode);
    
    var dataMax = 100;
    function generateData(num){
        var randomArray = [];
        for(var i=0; i<num; i++)randomArray.push(Math.random()*dataMax);
        return randomArray;
    }
    var data = generateData(5);
    
    d3.select("#button_panel")
        .on("mousedown", function(d, i){
            data = generateData(5);
            d3.selectAll("rect.bar")
                .data(data)
                .transition()
                .call(setBarHeight);
        });
    
    var barW = 40;
    var panelSVG = d3.select("#chart_panel");
    var panelX = ~~panelSVG.attr("x");
    var panelY = ~~panelSVG.attr("y");
    var panelW = ~~panelSVG.attr("width");
    var panelH = ~~panelSVG.attr("height");
    d3.select("#layer1")
        .selectAll("rect.bar")
        .data(data)
        .enter().append("svg:rect")
        .attr("class", "bar")
        .attr("width", barW)
        .attr("fill", "#5599FF")        
        .attr("stroke", "black")
        .attr("x", function(d, i){return panelX+i*panelW/data.length+10;})
        .call(setBarHeight);
    function setBarHeight(){        
        this.attr("height", function(d, i){return d/dataMax*panelH;})        
        .attr("y", function(d, i){return panelY+panelH-(d/dataMax*panelH);})
    }
    
    d3.select("#download")
     .on("mouseover", function(){
        var html = d3.select("svg")
            .attr("version", 1.1)
            .attr("xmlns", "https://www.w3.org/2000/svg")
            .node().parentNode.innerHTML;
        
        d3.select(this)
            .attr("href-lang", "image/svg+xml")
            .attr("href", "data:image/svg+xml;base64,\n" + btoa(html));
    });
    
});

</script>
</body>
</html>

Modified http://mbostock.github.com/d3/d3.js to a secure url

https://mbostock.github.com/d3/d3.js