This is a demonstration of importing a SVG and modifying it with D3.
In [1]:
from IPython.core.display import display, HTML
from string import Template
import pandas as pd
import json, random
In [2]:
HTML('<script src="lib/d3/d3.min.js"></script>')
Out[2]:
In [3]:
HTML('''
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 792 365" style="enable-background:new 0 0 792 365;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;stroke:#000000;stroke-miterlimit:10;}
</style>
<circle class="st0" cx="152.5" cy="160.5" r="20.5"/>
<circle class="st0" cx="308" cy="204" r="10"/>
<circle class="st0" cx="372.5" cy="113.5" r="17.5"/>
<circle class="st0" cx="229.5" cy="38.5" r="9.5"/>
<circle class="st0" cx="209.5" cy="302.5" r="10.5"/>
<circle class="st0" cx="474" cy="229" r="15"/>
<rect x="74" y="77" class="st0" width="31" height="31"/>
<rect x="308" y="276" class="st0" width="42" height="42"/>
<rect x="249" y="131" class="st0" width="69" height="21"/>
</svg>
''')
Out[3]:
In [4]:
dx_max, dy_max = 100, 70
In [5]:
HTML(Template('''<script>
var a = setInterval(function() {
d3.select("svg").selectAll("circle")
.transition(1000)
.attr("transform", function(d){
return "translate(" + Math.random() * 50 + "," + Math.random() * 50 + ")";
});
}, 1000)
</script>''').substitute({'dx_max': dx_max, 'dy_max': dy_max}))
Out[5]:
In [6]:
HTML('''
<script> clearInterval(a) </script>
''')
Out[6]: