biovisualize/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.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", "http://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>

## tuto3.svg
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="600"
   height="480"
   viewBox="0 0 800 640"
   id="svg2"
   version="1.1"
   inkscape:version="0.48.1 r9760"
   sodipodi:docname="tuto3.svg">
  <defs
     id="defs4" />
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="4.8402771"
     inkscape:cx="470.46413"
     inkscape:cy="77.479015"
     inkscape:document-units="px"
     inkscape:current-layer="layer1"
     showgrid="false"
     inkscape:window-width="1280"
     inkscape:window-height="753"
     inkscape:window-x="0"
     inkscape:window-y="1"
     inkscape:window-maximized="1"
     showguides="true"
     inkscape:guide-bbox="true" />
  <metadata
     id="metadata7">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:groupmode="layer"
     id="layer1"
     inkscape:label="layer1">
    <rect
       style="color:#000000;fill:#d5e5ff;stroke:#2c5aa0;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
       id="rect3765-1-7"
       width="150"
       height="50"
       x="0"
       y="0" />
    <rect
       style="color:#000000;fill:#d5e5ff;stroke:#2c5aa0;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
       id="rect3765-1-7-4"
       width="150"
       height="50"
       x="0"
       y="320" />
    <rect
       style="color:#000000;fill:#f0f6ff;fill-opacity:1;stroke:#2c5aa0;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
       id="list1"
       width="150"
       height="270"
       x="0"
       y="50"
       inkscape:label="list1" />
    <rect
       style="color:#000000;fill:#f0f6ff;stroke:#2c5aa0;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;fill-opacity:1"
       id="list2"
       width="150"
       height="270"
       x="0"
       y="370"
       inkscape:label="list2" />
    <rect
       inkscape:label="chart_panel"
       y="140"
       x="240"
       height="300"
       width="80"
       id="chart_panel-4"
       style="color:#000000;fill:#f0f6ff;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;fill-opacity:1" />
    <rect
       inkscape:label="chart_panel"
       y="140"
       x="620"
       height="300"
       width="80"
       id="chart_panel-4-8"
       style="color:#000000;fill:#f0f6ff;stroke:none;stroke-width:0.99999994000000003;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;fill-opacity:1" />
    <rect
       inkscape:label="chart_panel"
       y="60"
       x="320"
       height="80"
       width="300"
       id="chart_panel-8"
       style="color:#000000;fill:#f0f6ff;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;fill-opacity:1" />
    <rect
       inkscape:label="chart_panel"
       y="440"
       x="320"
       height="80"
       width="300"
       id="chart_panel-8-2"
       style="color:#000000;fill:#f0f6ff;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;fill-opacity:1" />
    <rect
       inkscape:label="button_panel"
       y="537"
       x="430"
       height="32"
       width="70"
       id="button_panel"
       style="color:#000000;fill:#5599ff;stroke:#2c5aa0;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;fill-opacity:1" />
    <text
       xml:space="preserve"
       style="font-size:18px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Sans"
       x="436.29581"
       y="559.00488"
       id="text4084"
       sodipodi:linespacing="125%"
       pointer-events="none"><tspan
         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:Tahoma;-inkscape-font-specification:Tahoma"
         id="tspan4114">Update</tspan></text>
    <rect
       style="color:#000000;fill:#d5e5ff;stroke:#2c5aa0;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
       id="chart_panel"
       width="300"
       height="300"
       x="320"
       y="140"
       inkscape:label="chart_panel" />
    <rect
       style="color:#000000;fill:none;stroke:#2c5aa0;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
       id="rect3765-1"
       width="149.99995"
       height="640"
       x="0"
       y="0" />
    <path
       style="color:#000000;fill:#d5e5ff;stroke:#2c5aa0;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
       d="M 0 0 L 0 640 L 800 640 L 800 0 L 0 0 z M 8.1875 8.1875 L 791.8125 8.1875 L 791.8125 631.8125 L 8.1875 631.8125 L 8.1875 8.1875 z "
       id="rect3765" />
  </g>
</svg>
	<!DOCTYPE html>
	<html>
	<head>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.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", "http://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>
	<?xml version="1.0" encoding="UTF-8" standalone="no"?>
	<!-- Created with Inkscape (http://www.inkscape.org/) -->

	<svg
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:cc="http://creativecommons.org/ns#"
	xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
	xmlns:svg="http://www.w3.org/2000/svg"
	xmlns="http://www.w3.org/2000/svg"
	xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
	xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
	width="600"
	height="480"
	viewBox="0 0 800 640"
	id="svg2"
	version="1.1"
	inkscape:version="0.48.1 r9760"
	sodipodi:docname="tuto3.svg">
	<defs
	id="defs4" />
	<sodipodi:namedview
	id="base"
	pagecolor="#ffffff"
	bordercolor="#666666"
	borderopacity="1.0"
	inkscape:pageopacity="0.0"
	inkscape:pageshadow="2"
	inkscape:zoom="4.8402771"
	inkscape:cx="470.46413"
	inkscape:cy="77.479015"
	inkscape:document-units="px"
	inkscape:current-layer="layer1"
	showgrid="false"
	inkscape:window-width="1280"
	inkscape:window-height="753"
	inkscape:window-x="0"
	inkscape:window-y="1"
	inkscape:window-maximized="1"
	showguides="true"
	inkscape:guide-bbox="true" />
	<metadata
	id="metadata7">
	<rdf:RDF>
	<cc:Work
	rdf:about="">
	<dc:format>image/svg+xml</dc:format>
	<dc:type
	rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
	<dc:title></dc:title>
	</cc:Work>
	</rdf:RDF>
	</metadata>
	<g
	inkscape:groupmode="layer"
	id="layer1"
	inkscape:label="layer1">
	<rect
	style="color:#000000;fill:#d5e5ff;stroke:#2c5aa0;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
	id="rect3765-1-7"
	width="150"
	height="50"
	x="0"
	y="0" />
	<rect
	style="color:#000000;fill:#d5e5ff;stroke:#2c5aa0;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
	id="rect3765-1-7-4"
	width="150"
	height="50"
	x="0"
	y="320" />
	<rect
	style="color:#000000;fill:#f0f6ff;fill-opacity:1;stroke:#2c5aa0;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
	id="list1"
	width="150"
	height="270"
	x="0"
	y="50"
	inkscape:label="list1" />
	<rect
	style="color:#000000;fill:#f0f6ff;stroke:#2c5aa0;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;fill-opacity:1"
	id="list2"
	width="150"
	height="270"
	x="0"
	y="370"
	inkscape:label="list2" />
	<rect
	inkscape:label="chart_panel"
	y="140"
	x="240"
	height="300"
	width="80"
	id="chart_panel-4"
	style="color:#000000;fill:#f0f6ff;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;fill-opacity:1" />
	<rect
	inkscape:label="chart_panel"
	y="140"
	x="620"
	height="300"
	width="80"
	id="chart_panel-4-8"
	style="color:#000000;fill:#f0f6ff;stroke:none;stroke-width:0.99999994000000003;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;fill-opacity:1" />
	<rect
	inkscape:label="chart_panel"
	y="60"
	x="320"
	height="80"
	width="300"
	id="chart_panel-8"
	style="color:#000000;fill:#f0f6ff;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;fill-opacity:1" />
	<rect
	inkscape:label="chart_panel"
	y="440"
	x="320"
	height="80"
	width="300"
	id="chart_panel-8-2"
	style="color:#000000;fill:#f0f6ff;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;fill-opacity:1" />
	<rect
	inkscape:label="button_panel"
	y="537"
	x="430"
	height="32"
	width="70"
	id="button_panel"
	style="color:#000000;fill:#5599ff;stroke:#2c5aa0;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;fill-opacity:1" />
	<text
	xml:space="preserve"
	style="font-size:18px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Sans"
	x="436.29581"
	y="559.00488"
	id="text4084"
	sodipodi:linespacing="125%"
	pointer-events="none"><tspan
	style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:Tahoma;-inkscape-font-specification:Tahoma"
	id="tspan4114">Update</tspan></text>
	<rect
	style="color:#000000;fill:#d5e5ff;stroke:#2c5aa0;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
	id="chart_panel"
	width="300"
	height="300"
	x="320"
	y="140"
	inkscape:label="chart_panel" />
	<rect
	style="color:#000000;fill:none;stroke:#2c5aa0;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
	id="rect3765-1"
	width="149.99995"
	height="640"
	x="0"
	y="0" />
	<path
	style="color:#000000;fill:#d5e5ff;stroke:#2c5aa0;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
	d="M 0 0 L 0 640 L 800 640 L 800 0 L 0 0 z M 8.1875 8.1875 L 791.8125 8.1875 L 791.8125 631.8125 L 8.1875 631.8125 L 8.1875 8.1875 z "
	id="rect3765" />
	</g>
	</svg>