d3.js - trouble with scales and hebin in d3js -


i trying use hexbin layout data distributed around 0 - examples use data centered around center of screen, scales same screen scales (except y inversion) i've tried modify scale functions account possible negative values. works y-scale, x-scale gives nans, , hexagons plotted off screen upper left. not problem - programmatically determine bin size hexbin function - in data series, of values 'binned' 1 3 hexagons, , need them spread out on available domain.. here code

   <script src="http://d3js.org/d3.v3.min.js"></script>    <script src="http://d3js.org/d3.hexbin.v0.min.js?5c6e4f0"></script>    <script> minmultarray =function(arr,index){     var min = arr[0][index];     (i=0;i<arr.length;i++) {         min = (min>arr[i][index]?arr[i][index]:min);     }     return min; }; maxmultarray =function(arr,index){     var max = arr[0][index];     (i=0;i<arr.length;i++) {         max = (max< arr[i][index]?arr[i][index]:max);     }     return max; };  var margin = {top: 20, right: 20, bottom: 30, left: 40},     width = 960 - margin.left - margin.right,     height = 500 - margin.top - margin.bottom;  var randomx = d3.random.normal(0, 5),     randomy = d3.random.normal(0, 6),     points = d3.range(2000).map(function() { return [randomx(), randomy()]; });  var minx = minmultarray(points,0); var miny = minmultarray(points,1); //var minz = minmultarray(points,2); var maxx = maxmultarray(points,0); var maxy = maxmultarray(points,1); //var maxz = maxmultarray(points,2);  var color = d3.scale.linear()     .domain([0, 20])     .range(["white", "steelblue"])     .interpolate(d3.interpolatelab);  var hexbin = d3.hexbin()     .size([width, height])     .radius(20); alert('minx='+minx +' maxx='+maxx);  var x = d3.scale.linear()     .domain([minx, maxx])     .range(0,width); alert('xscale(3)='+x(3)); var y = d3.scale.linear()     .domain([miny, maxy])     .range([height, 0]);  var xaxis = d3.svg.axis()     .scale(x)     .orient("bottom")     .ticksize(6, -height);  var yaxis = d3.svg.axis()     .scale(y)     .orient("left")     .ticksize(6, -width);  console.log('hex = ' +hexbin(points));  var svg = d3.select("body").append("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("clippath")     .attr("id", "clip")   .append("rect")     .attr("class", "mesh")     .attr("width", width)     .attr("height", height);  svg.append("g")     .attr("clip-path", "url(#clip)")   .selectall(".hexagon")     .data(hexbin(points))   .enter().append("path")     .attr("class", "hexagon")     .attr("d", hexbin.hexagon())     .attr("transform", function(d) { return "translate(" + (d.x) + "," + (d.y) + ")"; })     .style("fill", function(d) { return color(d.length); });  svg.append("g")     .attr("class", "y axis")     .call(yaxis);  svg.append("g")     .attr("class", "x axis")     .attr("transform", "translate(0," + height + ")")     .call(xaxis);  </script> 

after more debugging hexbin functions, not compatible negative and/or fractional domains- solved mapping original data linear scales height , width of hexagon plots. bin size controlled radius. modified hexbin binning function handle 3 element arrays, , can compute stats on third element, using color or size show mean/median/stddev/max/min. if interested, can post code on github...


Comments

Popular posts from this blog

javascript - Count length of each class -

What design pattern is this code in Javascript? -

hadoop - Restrict secondarynamenode to be installed and run on any other node in the cluster -