📑 Chart Building 02: Bar Charts with Color Interpolation.

 chart_building02.html

<style>

    @import 'https://fonts.googleapis.com/css?family=Wallpoet|Orbitron|Akronim|Smokum|Ewert|Aladin';

    h1 {font-family:Wallpoet; font-size:160%; text-shadow:3px 3px 3px #aaa;}

    .text1 {font-family:Wallpoet; font-size:100%; color:slategray;}

    .text1:hover {font-size:105%; text-shadow:3px 3px 3px #aaa;}

    #s_font_family {text-align:center; text-align-last:center; background:silver; 

                    width:200px; height:30px; font-family:Wallpoet; color:slategray;}          

    body {margin:5px 5px 5px 15px;}

</style>

<script>

  var tc=setInterval(function() {

    var width=Math.min(window.screen.width,window.innerWidth);

    var now=new Date().getTime();

    var iddoc1=document.getElementById('header1');

    iddoc1.style.color=d3.interpolateSinebow((now%30000)/30000);

    var data=[];

    for (var i=1; i<10; i++){

      v=parseInt(document.getElementById('value'+i).value);

      data.push(v)};

    var ff=document.getElementById('s_font_family').value;

    var fs=parseInt(document.getElementById('s_font_size').value);

    var div=d3.select('#chart_building_02_01');

    div.style('text-align','right')

       .style('text-shadow','3px 3px 3px darkslategray')

       .style('padding','5px')

       .style('width','80%').style('height',38*Math.pow(fs,.78)+'px')

       .style('color',d3.interpolateSinebow((now%60000)/60000))

       .style('background',d3.interpolateSinebow((now%60000)/60000));

    div.select('#barchart_title')

       .text('An Example of D3 Bar Charts')

       .style('text-shadow','3px 3px 3px darkslategray')

       .style('color','silver')

       .style('font-family',ff).style('font-size',fs+'px');

    var x=d3.scaleLinear().domain([0,d3.max(data)]).range([0,.75*width]);

    div.selectAll('div').data(data).join('div')

       .style('background','silver')

       .style('padding','5px').style('margin','3px')

       .style('width',d=>x(d)+'px')

       .style('font-family',ff).style('font-size',fs+'px')

       .text(d=>d);

  },1);

</script>