I was trying out the code from this site: http://bl.ocks.org/bycoffe/3230965
I keep having the error that "n is undefined".
Upon further scaling down, i have come to the conclusion that the problem is with these lines:
(function() {
var width = 800;
var height = 700;
var padding = 10;
var k;
var node;
var pixelLoc = d3.geo.mercator();
pixelLoc.scale(2000);
svg = d3.select('#map')
.append('svg:svg')
.attr('width', width)
.attr('height', height);
d3.json('coordinates.json', function(coordinates) {
var coords = [];
var xs = [];
var ys = []
for (alias in coordinates) {
coords.push(coordinates[alias]);
xs.push(coordinates[alias][0]);
ys.push(coordinates[alias][1]);
}
var minX = d3.min(xs);
var maxX = d3.max(xs);
var xScale = d3.scale.linear().domain([minX, maxX]).range([-50, -30]);
var minY = d3.min(ys);
var maxY = d3.max(ys);
var yScale = d3.scale.linear().domain([minY, maxY]).range([-20, -10]);
d3.json('medals.json', function(medals) {
var pointScale = d3.scale.sqrt().domain([0, 80]).range([0, 75]);
nodes = []
for (i=0; i<medals.length; i++){
node = medals[i];
node.coordinates = coordinates[node.alias];
node.cx = xScale(pixelLoc(node.coordinates)[0]);
}
})
The issue arises with the last line:
node.cx = xScale(pixelLoc(node.coordinates)[0]);
However, I still have no idea what do they mean by "n is undefined". Anybody able to help?
If you are using d3.min :
Change the library from d3.min.js to d3.js you will probably find out that the error changes to
TypeError: array is undefined
Which means the functions min and max don't work propperly .
var minX = d3.min(xs);
//Change this for actual min value and max for actual max value and it should work.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With