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
Post a Comment