D3 Animated Lines

<script src='https://d3js.org/d3.v6.min.js'></script> was added in the page head.

D3 Recursive Curves

<script src='https://d3js.org/d3.v6.min.js'></script> was added in the page head.

Mouse Drawing and Events

<script src='https://d3js.org/d3.v5.min.js'></script> was added in the page head.

D3 Styling in Printing

Random Lines

<script src='https://d3js.org/d3.v6.min.js'></script> was added in the page head.

Functions with Summation

<script src='https://d3js.org/d3.v6.min.js'></script> was added in the page head.

D3.js for Plotting with Random Coefficients

<script src='https://d3js.org/d3.v4.min.js'></script> was added in the page head.

D3 Plotting and Functions

<script src='https://d3js.org/d3.v4.min.js'></script> was added in the page head.

D3 Color Gradients

<script src='https://d3js.org/d3.v4.min.js'></script> was added in the page head.

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>""")

Creating Maps

<script src='https://d3js.org/d3.v3.min.js'></script>
<script src='https://d3js.org/topojson.v0.min.js'></script>
was added in the page head.

Color Interpolation 2

<script src='https://d3js.org/d3.v4.min.js'></script> was added in the page head.

Combine JavaScript Sources

<script src='https://d3js.org/d3.v4.min.js'></script> was added in the page head.

Histogram Examples

<script src='https://d3js.org/d3.v4.min.js'></script> was added in the page head.

Parametric Scatter Plots

function_plotting_js.ipynb

from IPython.display import HTML

HTML("""<style>

.xaxis1 text,.yaxis1 text {fill:#36ff36; font-size:150%;} 

.point {stroke:#fff; stroke-width:1;}             

.grid1 line,.grid1 path {stroke:#fff; stroke-opacity:0.9; shape-rendering:crispEdges;}

</style>

<script src='https://d3js.org/d3.v4.min.js'></script>

<svg id='pp1' style='background-color:slategray;'></svg><script>

var n=255,m=35, margin={top:m,right:m,bottom:m,left:m},

    width=500-margin.left-margin.right,height=500-margin.top-margin.bottom; 

var xScale=d3.scaleLinear().domain([-1.2,1.2]).range([0,width]); 

var yScale=d3.scaleLinear().domain([-1.2,1.2]).range([height,0]);

function make_x_gridlines() {return d3.axisBottom(xScale).ticks(11)}; 

function make_y_gridlines() {return d3.axisLeft(yScale).ticks(11)};

var pointColor=d3.scaleSequential().domain([0,n]).interpolator(d3.interpolateCool);            

var data=d3.range(0,n).map(function(i){return {'x':Math.sin(4*Math.PI/n*i),

                                               'y':Math.sin(10*Math.PI/n*i)}});

var svg=d3.select('#pp1').attr('width',width+margin.left+margin.right)

          .attr('height',height+margin.top+margin.bottom)

          .append('g').attr('transform','translate('+margin.left+','+margin.top+')');

svg.append('g').attr('class','xaxis1').call(d3.axisBottom(xScale).tickSize(0.5))

               .attr('transform','translate(0,'+height+')'); 

svg.append('g').attr('class','yaxis1').call(d3.axisLeft(yScale).tickSize(0.5));    

svg.append('g').attr('class','grid1').attr('transform','translate(0,'+height+')')

               .call(make_x_gridlines().tickSize(-height).tickFormat(''));

svg.append('g').attr('class','grid1').call(make_y_gridlines().tickSize(-width).tickFormat(''));

svg.selectAll('.point').data(data).enter().append('circle').attr('class','point')

                       .attr('fill',function(d,i){return pointColor(i)}).attr('r',4)

                       .attr('cx',function(d) {return xScale(d.x)})

                       .attr('cy',function(d) {return yScale(d.y)});

</script>""")

Zooming of Function Plots 2

<script src='https://d3js.org/d3.v6.min.js'></script> was added in the page head.

Random Parametric Plotting

function_plotting_js.ipynb

from IPython.display import HTML

HTML("""<style>

text {fill:#fff; font-size:135%;} 

.grid line,.grid path {stroke:#fff; stroke-opacity:0.7; shape-rendering:crispEdges;}

</style>

<script src='https://d3js.org/d3.v4.min.js'></script>

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

<script>

var n=640,m=30; var i,t,k,xmax,xmin;

var margin={top:m,right:m,bottom:m,left:m},

    width=600-margin.left-margin.right,height=600-margin.top-margin.bottom; 

function make_x_gridlines() {return d3.axisBottom(xScale).ticks(11).tickFormat('')};

function make_y_gridlines() {return d3.axisLeft(yScale).ticks(11).tickFormat('')}; 

function get_int(xmin,xmax) {return Math.floor(Math.random()*(xmax-xmin+1))+xmin;};

function get_color(k) {var r=get_int(10*k,255),g=get_int(10*k,255),b=get_int(10*k,255);

    return '#'+r.toString(16)+g.toString(16)+b.toString(16);}

var a=get_int(7,15),b=get_int(10,24),l=get_int(3,12);              

function make_data(k) {return d3.range(0,n).map(function(t){

    return {'x':k*(Math.cos(0.01*t)+Math.cos(a*0.01*t)/2+Math.sin((a+b)*0.01*t)/3),

            'y':k*(Math.sin(0.01*t)+Math.sin(a*0.01*t)/2+Math.cos((a+b)*0.01*t)/3)} });};

var xScale=d3.scaleLinear().domain([-1.8*l,1.8*l]).range([0,width]);

var yScale=d3.scaleLinear().domain([-1.8*l,1.8*l]).range([height,0]);

var svg=d3.select('#svg').attr('width',width+margin.left+margin.right)

          .attr('height',height+margin.top+margin.bottom)

          .append('g').attr('transform','translate('+margin.left+','+margin.top+')');

svg.append('g').attr('class','x axis').call(d3.axisBottom(xScale).tickSize(0.5))

               .attr('transform','translate(0,'+height+')'); 

svg.append('g').attr('class','y axis').call(d3.axisLeft(yScale).tickSize(0.5));    

svg.append('g').attr('class','grid').attr('transform','translate(0,'+height+')')

               .call(make_x_gridlines().tickSize(-height));

svg.append('g').attr('class','grid').call(make_y_gridlines().tickSize(-width));

var line=d3.line().curve(d3.curveMonotoneX).x(function(d) {return xScale(d.x);})

                                           .y(function(d) {return yScale(d.y);});

for (i=1; i<l+1; i++) {var data=make_data(i); var col=get_color(i);

                       svg.append('path').datum(data).attr('class','line').attr('d',line)

                                         .attr('stroke',col).attr('fill','none');};

svg.append('text').attr('transform','translate('+(width/2-50)+','+-5+')')

                  .style('fill','#fff').text('a='+a+'; b='+b+'; l='+l);

</script>""")

Color Interpolation

function_plotting_js.ipynb

from IPython.display import HTML

HTML("""

<style>

.point1, .point2 {stroke:#fff; stroke-width:1;}

.grid1 line, .grid1 path {stroke:#fff; stroke-opacity:0.9; shape-rendering:crispEdges;} 

</style>

<script src='https://d3js.org/d3.v5.min.js'></script>

<svg id='pp2' style='background-color:slategray;'></svg>

<script>

var n=630,m0=35,m={top:m0,right:m0,bottom:m0,left:m0},w=700-m.left-m.right,h=700-m.top-m.bottom; 

var xScale=d3.scaleLinear().domain([-3,3]).range([0,w]); 

var yScale=d3.scaleLinear().domain([-3,3]).range([h,0]);

function make_x_gridlines() {return d3.axisBottom(xScale).ticks(11)}; 

function make_y_gridlines() {return d3.axisLeft(yScale).ticks(11)};

var svg=d3.select('#pp2').attr('width',w+m.left+m.right).attr('height',h+m.top+m.bottom)

                         .append('g').attr('transform','translate('+m.left+','+m.top+')');

svg.append('g').attr('class','grid1').attr('transform','translate(0,'+h+')')

               .call(make_x_gridlines().tickSize(-h).tickFormat(''));

svg.append('g').attr('class','grid1').call(make_y_gridlines().tickSize(-w).tickFormat(''));

var data1=d3.range(0,n).map(function(i){return {'x':(Math.cos(0.12*i)+1)*Math.cos(0.01*i),

                                                'y':(Math.cos(0.12*i)+1)*Math.sin(0.01*i)}});

var data2=d3.range(0,n).map(function(i){return {'x':(Math.cos(0.12*i)+2)*Math.cos(0.01*i),

                                                'y':(Math.cos(0.12*i)+2)*Math.sin(0.01*i)}});

svg.selectAll('.point1').data(data1).enter().append('circle').attr('class','point1')

                        .attr('r',3).attr('cx',function(d) {return xScale(d.x)})

                        .attr('cy',function(d) {return yScale(d.y)})

                        .transition().duration(20000)

                        .styleTween('fill',function(){return d3.interpolate('#3636ff','#ff3636')});

svg.selectAll('.point2').data(data2).enter().append('circle').attr('class','point2')

                        .attr('r',4).attr('cx',function(d) {return xScale(d.x)})

                        .attr('cy',function(d) {return yScale(d.y)})

                        .transition().duration(20000)

                        .styleTween('fill',function(){return d3.interpolate('#ff3636','#3636ff')});

</script>""")