I am working on a d3.js scatter chart, and I want it to be scalable, without changing the size of the points. I based it on http://static.cybercommons.org/js/d3/examples/zoom-pan/zoom-pan.html , which has working scalable grid lines, but still I have problems getting points to increase, When I scale / pan, each point returns the following console warning:
An unexpected value translates the (NaN, 0) parsing conversion attribute.
Here you can see everything, with screenshots of the figure below (click "Open in a new window" to see all this): http://bl.ocks.org/242dcfc83d98743d8589
A simplified version of JS is here:
d3.csv("js/AllOccupations.csv", function(data) { var margin = {top: 30, right: 10, bottom: 50, left: 60}, width = 960 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; var xMax = d3.max(data, function(d) { return +d.TotalEmployed2011; }), xMin = 0, yMax = d3.max(data, function(d) { return +d.MedianSalary2011; }), yMin = 0; //Define scales var x = d3.scale.linear() .domain([xMin, xMax]) .range([0, width]); var y = d3.scale.linear() .domain([yMin, yMax]) .range([height, 0]); var colourScale = function(val){ var colours = ['#9d3d38','#c5653a','#f9b743','#9bd6d7']; if (val > 30) { return colours[0]; } else if (val > 10) { return colours[1]; } else if (val > 0) { return colours[2]; } else { return colours[3]; } }; //Define X axis var xAxis = d3.svg.axis() .scale(x) .orient("bottom") .tickSize(-height) .tickFormat(d3.format("s")); //Define Y axis var yAxis = d3.svg.axis() .scale(y) .orient("left") .ticks(5) .tickSize(-width) .tickFormat(d3.format("s")); var svg = d3.select("#chart").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 + ")") .call(d3.behavior.zoom().x(x).y(y).scaleExtent([1, 8]).on("zoom", zoom)); svg.append("rect") .attr("width", width) .attr("height", height); svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis); svg.append("g") .attr("class", "y axis") .call(yAxis); // Create points svg.selectAll("polygon") .data(data) .enter() .append("polygon") .attr("transform", function(d, i) { return "translate("+x(d.TotalEmployed2011)+","+y(d.MedianSalary2011)+")"; }) .attr('points','4.569,2.637 0,5.276 -4.569,2.637 -4.569,-2.637 0,-5.276 4.569,-2.637') .attr("opacity","0.8") .attr("fill",function(d) { return colourScale(d.ProjectedGrowth2020); }); // Create X Axis label svg.append("text") .attr("class", "x label") .attr("text-anchor", "end") .attr("x", width) .attr("y", height + margin.bottom - 10) .text("Total Employment in 2011"); // Create Y Axis label svg.append("text") .attr("class", "y label") .attr("text-anchor", "end") .attr("y", -margin.left) .attr("x", 0) .attr("dy", ".75em") .attr("transform", "rotate(-90)") .text("Median Annual Salary in 2011 ($)"); function zoom() { svg.select(".x.axis").call(xAxis); svg.select(".y.axis").call(yAxis); } });
Any help would be greatly appreciated.