Randomized Sketch

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]: