Color Palettes

function_plotting_js.ipynb

from IPython.display import HTML

HTML("""

<script src='//d3js.org/d3.v3.min.js'></script>

<svg id='poly' style='background-color:silver;'></svg>

<script>

var mouse=[330,330],count=0;

var svg=d3.select('#poly')

          .attr('width',650).attr('height',650);

var g=svg.selectAll('g').data(d3.range(25)).enter()

         .append('g').attr('transform','translate('+mouse+')');

g.append('rect').attr('rx',7).attr('ry',7)

 .attr('x',-12.5).attr('y',-12.5)

 .attr('width',20).attr('height',20)

 .attr('transform',function(d,i){return 'scale('+(1-d/25)*20+')';})

 .style('fill',d3.scale.category20b());

g.datum(function(d){return {center:mouse.slice(),angle:0};});

svg.on('mousemove',function(){mouse=d3.mouse(this);});

d3.timer(function(){count++; 

g.attr('transform',

       function(d,i){d.center[0]+=(mouse[0]-d.center[0])/(i+1); 

d.center[1]+=(mouse[1]-d.center[1])/(i+1); 

d.angle+=Math.sin((count+i)/40)*7; 

return 'translate('+d.center+')rotate('+d.angle+')'});});

</script>""")