D3.js Study 9

D3.js Data Visualization Practical Manual study notes

The interpolator interpolation a given range of values and prints it in the middle.

Character interpolation

var data=[];var sizescale=d3.scale.linear (). Domain ([0,9]). Range (["Italic bold 12px/30px Georgia, serif", "Italic bold 120px/180px Georgia, serif "]); for (Var i=0;i<10;i++) {Data.push (i);} function Render (data,scale,component) {var selector=d3.select (component). SelectAll ("Div.cell"). data (data);// Enterselector.enter (). Append ("div"). Classed ("cell", True). Append ("span");//exitselector.exit (). remove ();/ Updateselector.style ("Display", "Inline-block"). Select ("span"). Style ("Font", function (d,i) {return scale (d);}). Text (function (d,i) {return i;});} Render (Data,sizescale, "#font")

Color interpolation

var data=[];var colorscale=d3.scale.linear (). Domain ([0,21]). Range (["White", "#4169e1"]), and for (Var i=0;i<21;i++) { Data.push (i);} function Render (data,scale,component) {var selector=d3.select (component). SelectAll ("Div.cell"). data (data);// Enterselector.enter (). Append ("div"). Classed ("cell", True). Append ("span");//exitselector.exit (). remove ();/ Updateselector.style ("Display", "Inline-block"). Style ("Background-color", function (d,i) {return scale (d);}). Select ("span"). Text (function (d,i) {return i;});} Render (Data,colorscale, "#color");

D3.js Study 9