I have a script that originated in D3 V3 and I'm trying to rebuild it in V5.
I'll go through the code and then the problem. This is the relevant part of code.
var height = 570
var width = 510
var svg = d3.select("#chart").append("svg")
.attr("width", width + 160)
.attr("height", height + 90)
.append("g")
.attr("transform", "translate(" + 160 + "," + 90 + ")");
// this has a count for how many are in each group
var grpcnts = {
met: { '1960': 0, '1970': 0, '2010': 0, label: "First Met", x: 1, y: 1 },
romantic: { '1960': 0, '1970': 0, '2010': 0, label: "Romantic", x: 2, y: 1 },
lived: { '1960': 0, '1970': 0, '2010': 0, label: "Live Together", x: 3, y: 1 },
married: { '1960': 0, '1970': 0, '2010': 0, label: "Married", x: 4, y: 3 },
}
var x = d3.scaleBand()
.domain([1950, 1970, 1980, 2010])
.range([0, width]);
var y = d3.scaleBand()
.domain(d3.keys(grpcnts))
.range([height, 0]);
var sched_objs = [],
curr_index = -1;
// Load data
d3.tsv("timelines.tsv")
.then(function(data) {
data.forEach(function(d) {
var day_array = d.timeline.split(",");
var activities = [];
for (var i=0; i < day_array.length; i++) {
// Duration
if (i % 2 == 1) {
activities.push({'act': day_array[i-1], 'duration': +day_array[i]});
}
}
sched_objs.push(activities);
});
// A node for each person's schedule
var nodes = sched_objs.map(function(o,i) {
var act = o[0].act;
var init_x = x(+data[i].decade) + Math.random();
var init_y = y('met') + Math.random();
var col = "#cccccc";
grpcnts[act][data[i].decade] += 1;
return {
act: act,
radius: maxRadius,
x: init_x,
y: init_y,
decade: data[i].decade,
color: color(act),
married: false,
moves: 0,
next_move_time: o[0].duration,
sched: o
}
});
}) // end tsv
This is a sample of the dataset.
"decade" "timeline"
1970 "met,4,romantic,14,lived,1,married,-99"
1970 "romantic,2,married,-99"
1970 "met,9,romantic,48,married,-99"
1970 "romantic,20,married,-99"
1970 "met,2,romantic,10,married,-99"
1970 "met,13,romantic,16,married,-99"
The problem is that the x and y fields show up as NaN.
I've added console.log statements before the return clause and the init_x and init_y values print out the right numbers.
I've tested the x() and y() functions with all the valid inputs and they return the right values. I've tested Math.random() which appears to work just fine.
None of the other fields show up as NaN which leads me to believe that the syntax for returning multiple values is right. I've also tried wrapping init_x and init_y in Number().
Unfortunately your code is full of errors, to the point that we cannot make it run without a major refactor.
However, just to answer your current specific question ("where are the NaNs coming from?"), this is the problem (line 212 in your pasteBin):
var k = 0.03 * this.alpha;
Since there is no alpha, but alpha() instead, when you use k (which is undefined) latter on...
o.x += (x(+o.decade) - o.x) * k * damper;
... you get that nice and beautiful NaN.
I'd like to emphasise again that this change will not make your code work, you have a lot of other problems to fix.
Related
I want to create the array below with a for loop as its large
var centres = {
1979: { x: width * 1 / 41, y: height / 2 },
1980: { x: width * 2 / 41, y: height / 2 },
1981: { x: width * 3 / 41, y: height / 2 },
...
}
and then access it as follows:
function nodeYearPos(d) {
return yearCenters[d.year].x;
}
I have the following code, but its only setting the year...
var yearCenters = Array.from(new Array(2020-1919+1), (x, i) => i + 1919);
for (year = 1919; year <= 2020; year++) {
coords = getCentres(year); // this returns an object in the form {x : x, y : y}
yearCenters[year] = coords;
}
you can do as gorak commented but with the getCenters function
var yearCenters = Object.fromEntries(Array.from(new Array(2020-1919+1), (x, i) => [i + 1919, getCenters(i + 1919)]));
or you can also try
var yearCenters = {};
for (year = 1919; year <= 2020; year++) {
coords = getCenters(year);
yearCenters[year] = coords;
}
When you try to fetch by year in yearCenters array (e.g. yearCenters[year]) this won't work since the year is not the index in the array.
I would suggest you first convert the array into a JS object so that indexing on it works with years.
See below snippet -
// Create obejct from array
var yearCenters = Object.fromEntries(Array.from(new Array(2020-1919+1), (x, i) => [i + 1919, null]))
// This loop remains same
for (year = 1919; year <= 2020; year++) {
coords = getCentres(year); // this returns an object in the form {x : x, y : y}
yearCenters[year] = coords;
}
// Mock function
function getCentres(year) {
return {
x: Math.random() * 100,
y: Math.random() * 100
}
}
console.log(yearCenters)
I have a grid with items inside of it with x and y co-orditantes. I am trying to write a function (with lodash) to determine where is the first empty spot where the top most left most spot is the first position.
I am trying to do this by iterating over each spot until I find the first empty spot. It is only a 2 column layout so I work through them in a pattern like so - x: 0, y:0 -> x:1, y:0 -> x:0, y:1 -> x:1, y:1 ... and then checking all the items along the way to see if there is not a match, so I then know if there is an opening. My attempt looks like so :
function fillEmptySpace(isFilled, startX, startY) {
if (!isFilled) {
_.forEach(items, function(item, i) {
if (!_.isMatch(item, {
'x': startX
}) && !_.isMatch(item, {
'y': startY
})
) {
console.log("empty spot at", startX, startY);
isFilled = true;
} else if (!_.isMatch(item, {
'x': startX + 1
}) && !_.isMatch(item, {
'y': startY
})) {
console.log("empty spot at", startX + 1, startY);
isFilled = true;
}
});
startY += 1;
fillEmptySpace(isFilled, startX, startY);
}
}
fillEmptySpace(false, 0, 0);
The data looks like so :
var items = [{
i: 'a',
x: 0,
y: 0,
w: 1,
h: 1,
maxW: 2
}, {
i: 'b',
x: 1,
y: 4,
w: 1,
h: 1,
maxW: 2
}, {
i: 'c',
x: 0,
y: 1,
w: 1,
h: 1,
maxW: 2
}, {
i: 'd',
x: 0,
y: 2,
w: 1,
h: 1,
maxW: 2
}];
And here is the fiddle I have been fooling around in : https://jsfiddle.net/alexjm/ugpy13xd/38/
I can't seem to get this logic quite right, I am not sure a this point where I am getting it wrong. Any input would be greatly appreciated!
Just as a note : with the provided data it should identify the first empty space as x:1, y:0, however right now it is saying empty spot at 0 0, which cannot be correct. Thanks!
When it comes to 2D arrays, the 1D index can be calculated with x + y * width. If we then sort the 1D indexes, we can create an O(nlogn) solution:
function findEmptySpace(grid, width) {
var index = _(grid)
.map(function(p) { return p.x + p.y * width })
.sortBy()
.findIndex(_.negate(_.eq));
if (index < 0) index = grid.length;
return {
x: index % width,
y: index / width >> 0 // ">> 0" has the same result as "Math.floor"
};
}
var items = [{x:0,y:0},{x:0,y:4},{x:0,y:1},{x:0,y:2}];
function findEmptySpace(grid, width) {
var index = _(grid)
.map(function(p) { return p.x + p.y * width; })
.sortBy()
.findIndex(_.negate(_.eq));
if (index < 0) index = grid.length;
return {
x: index % width,
y: index / width >> 0 // ">> 0" has the same result as "Math.floor"
};
}
document.getElementById('btn').onclick = function() {
var space = findEmptySpace(items, 2);
items.push(space);
console.log(space);
};
#btn { font-size: 14pt }
<script src="https://cdn.jsdelivr.net/lodash/4.13.1/lodash.min.js"></script>
<button id="btn">Fill the Empty Space</button>
If you pre-sort the array, the solution would be worst-case O(n).
May I suggest checking to see if the point exists vs checking to see if it doesn't. Iterate over each item in the list to see if it exists if it does set a flag, then increment positions through your grid. Keep in mind this will not account for coords less than your intial value of "startY". Consider the following code:
function findEmptySpace(startX, startY) {
var isFilled = false;
_.forEach(items, function(item, i) {
if (_.isMatch(item, { 'x': startX }) && _.isMatch(item, { 'y': startY }) {
// this spot is filled check next x
isFilled = true;
continue;
}
}
if (isFilled == true) {
// we need to recursively call our function but I don't know the value of x
(startX == 0) ? findEmptySpace(1, startY): findEmptySpace(0, startY + 1);
} else {
console.log("Congrats, we found a spot", startX, startY);
}
}
It looks like you're always going to find a match at 0,0 since your logic is finding if there is any item in the list that is not on 0,0, instead of if there is an item in the list on 0,0
What you really want to do is stop checking once you've found an item in the current x,y (and, additionally, check both x and y in your isMatch). You can use your existing routine and your existing isFilled check:
function fillEmptySpace(isFilled, startX, startY) {
_.forEach(items, function(item, i) {
if (!isFilled) {
if (!_.isMatch(item, {'x': startX, 'y': startY})) {
console.log("empty spot at", startX, startY);
isFilled = true;
} else if (!_.isMatch(item, {'x': startX + 1, 'y': startY})) {
console.log("empty spot at", startX + 1, startY);
isFilled = true;
}
}
});
if (!isFilled) {
startY += 1;
fillEmptySpace(isFilled, startX, startY);
}
}
I need to find a library that allows me to get interpolated values from irregular 2d data. Imagine having something like this:
var data = [{{x: 0, y: 0, value: 0},
{x: 0.5, y: 1, value: 1},
{x: 1, y: 0, value: 2}}, .... Many more elements]
var value = interpolate(data, 0.24, 0.3); // 0.24 = x, 0.3 = y
What the interpolate method does is that it finds the element, in this case a triangle, that the coordinate is inside. Then it interpolates the value between the corners of the element it is contained in.
I do realize that there are lots of aspects in it to optimize performance like building up a tree that allows fast narrowing of elements by having preprocessed bounding boxes. All of this would be great as well, but I am just trying to get started.
There must be some library out there that I can use for it instead of writing my own.
Since search results for barycentric interpolation in javascript were inconclusive, here's some code that might help you get started.
This code takes as input a data set of 2D points, each with a "value", and a "new point" with an unknown value. It first finds the smallest triangle in the data set that contains the "new point", then performs barycentric interpolation using that triangle to find a value for the "new point".
This runs reasonably quickly with a data set of a few hundred points. There are many opportunities for testing, error checking, and optimization - for example, don't look at every possible triangle in the data set. N choose 3 grows with the cube of N, so optimizing to look at triangles made with only points "close to" the "new point" could show significant performance gains.
// Calculate the area of a triangle
function triangle_area(vertexA, vertexB, vertexC) {
return Math.abs(((vertexA.x - vertexC.x) * (vertexB.y - vertexA.y) - (
vertexA.x - vertexB.x) * (vertexC.y - vertexA.y)) * 0.5)
}
// Given a number N, return a list of all possible triples from the list [1..N]
// credit: http://stackoverflow.com/a/5752056/1612562
function list_triples(N) {
var fn = function(n, src, got, all) {
if (n == 0) {
if (got.length > 0) {
all[all.length] = got;
}
return;
}
for (var j = 0; j < src.length; j++) {
fn(n - 1, src.slice(j + 1), got.concat([ src[j] ]), all);
}
return;
}
var triples = [];
// Generates the list [0, ..., N]
// credit: http://stackoverflow.com/a/20066663/1612562
var indices =
Array.apply(null, {length: N}).map(Number.call, Number);
fn(3, indices, [], triples);
return triples;
}
// Given three vertices of a triangle and a point, determine if
// the point falls in the triangle
// credit: https://koozdra.wordpress.com/2012/06/27/javascript-is-point-in-triangle/
// credit: http://www.blackpawn.com/texts/pointinpoly/default.html
function is_in_triangle(newPoint, vertexA, vertexB, vertexC) {
var v0 = [vertexC.x - vertexA.x, vertexC.y - vertexA.y];
var v1 = [vertexB.x - vertexA.x, vertexB.y - vertexA.y];
var v2 = [newPoint.x - vertexA.x, newPoint.y - vertexA.y];
var dot00 = (v0[0] * v0[0]) + (v0[1] * v0[1]);
var dot01 = (v0[0] * v1[0]) + (v0[1] * v1[1]);
var dot02 = (v0[0] * v2[0]) + (v0[1] * v2[1]);
var dot11 = (v1[0] * v1[0]) + (v1[1] * v1[1]);
var dot12 = (v1[0] * v2[0]) + (v1[1] * v2[1]);
var invDenom = 1 / (dot00 * dot11 - dot01 * dot01);
var u = (dot11 * dot02 - dot01 * dot12) * invDenom;
var v = (dot00 * dot12 - dot01 * dot02) * invDenom;
return ((u >= 0) && (v >= 0) && (u + v < 1));
}
// Perform barycentric interpolation on a point in a triangle
function barycentric_interpolate(newPoint, vertexA, vertexB, vertexC) {
var area = triangle_area(vertexA, vertexB, vertexC);
var sub_area_1 = triangle_area(newPoint, vertexB, vertexC);
var sub_area_2 = triangle_area(vertexA, newPoint, vertexC);
var sub_area_3 = triangle_area(vertexA, vertexB, newPoint);
return ((sub_area_1 * vertexA.v) + (sub_area_2 * vertexB.v) + (sub_area_3 *
vertexC.v)) / area;
}
// Find the smallest triangle in the data set containing the new
// point, and perform barycentric interpolation using that triangle
function interpolate(newPoint, data) {
var triangles = list_triples(data.length);
var smallest_triangle_area = Number.MAX_VALUE;
var smallest_triangle;
for (t in triangles) {
var vertexA = data[triangles[t][0]];
var vertexB = data[triangles[t][1]];
var vertexC = data[triangles[t][2]];
var in_triangle = is_in_triangle(newPoint, vertexA, vertexB, vertexC);
if (in_triangle) {
if (triangle_area(vertexA, vertexB, vertexC) < smallest_triangle_area) {
smallest_triangle = [vertexA, vertexB, vertexC];
}
}
}
return smallest_triangle
? barycentric_interpolate(newPoint, smallest_triangle[0], smallest_triangle[1], smallest_triangle[2])
: "Interpolation failed: newPoint isn't in a triangle";
}
var newPoint = {'x': 0.24, 'y': 0.3};
var data = [
{'x': 0, 'y': 0, 'v': 0},
{'x': 0.5, 'y': 1, 'v': 1},
{'x': 1, 'y': 0, 'v': 2},
{'x': 1.5, 'y': 2.5, 'v': 1.5},
{'x': 2, 'y': 1, 'v': 0.5}
];
console.log(interpolate(newPoint, data));
There are also other kinds of spatial interpolation, e.g. kriging, which does have at least one ready-made .js library.
I'm making a chart that can be updated with different data when a button is clicked.
The code below seems to works when the x-axis does not change its length, but when the x-axis length is changed and the chart updated I get this error: Error: Invalid value for <circle> attribute cx="NaN"
Code:
var svg = dimple.newSvg("#stepContainer", 400, 300);
var step_data = [
{Period: 1, FIP: (Math.random() * 1000000)},
{Period: 2, FIP: (Math.random() * 1000000)},
{Period: 3, FIP: (Math.random() * 1000000)},
{Period: 4, FIP: (Math.random() * 1000000)},
];
var stepChart = new dimple.chart(svg, step_data);
stepChart.setBounds(50, 40, 305, 205);
var myAxis = stepChart.addCategoryAxis("x", "Period");
stepChart.addMeasureAxis("y", "FIP");
var s = stepChart.addSeries(null, dimple.plot.line);
s.interpolation = "step";
stepChart.draw();
d3.select("#btn").on("click", function() {
// If the length of the x-axis stays the same I don't get the error
//var periods = 4;
var periods = Math.random()* 50;
arr = [];
for (i=1; i <=periods; i++) {
arr.push({Period: i, FIP: (Math.random() * 1000000)});
}
stepChart.data = arr;
stepChart.draw(1000);
});
What's causing this error?
fiddle: http://jsfiddle.net/jdash99/4pgd900f/9/
This is an outstanding bug. It doesn't seem to affect display, it just raises an unwanted console error:
https://github.com/PMSI-AlignAlytics/dimple/issues/93
I have following code to update chart1 with dataset2 but in the result mychart1 values are not updated to the new values in the dataset2. I want the updated values in dataset2 to be reflected in myChart1, but the old data is getting updated when I look at the class assinged in the debugger.
Can anybody point me where I am going wrong
function chart() {
//Width and height
var w = 200;
var h = 100;
var barPadding = 2;
var max = 0;
this.createChart = function(dataset,cls) {
//create svg element
var svg = d3.select("#chartDisplay").append("svg").attr("class",cls).attr(
"width", w).attr("height", h);
//create rect bars
var rect = svg.selectAll("rect").data(dataset,function(d, i) {return d;});
rect.enter()
.append("rect")
.attr("class","original")
.attr("x",function(d, i) {
return i * (w / dataset.length);
})
.attr("y", function(d) {
return h - d * 3; //Height minus data value
})
.attr("width", w / dataset.length - barPadding)
.attr("height", function(d) {
return d * 3;
});
max = d3.max(dataset);
var xScale = d3.scale.linear().domain([ 0, max ]).range(
[ 0, w ]);
}
this.updateChart = function(dataset,cls) {
var svg = d3.select("#chartDisplay").select("svg."+cls);
var rect = svg.selectAll('rect')
.data(dataset,function(d, i) {
return d;
});
rect.attr("y", function(d) {
return h - d * 3; //Height minus data value
})
.attr("height", function(d) {
return d * 3;
});
rect.attr("class","updated");
}
this.getMax = function() {
return max;
}
}
var dataset1 = [ 5, 10, 12, 19, 21, 25, 22, 18, 15, 13 ];
var dataset2 = [ 1, 4, 14, 19, 16, 30, 22, 18, 15, 13 ];
var myChart1 = new chart();
myChart1.createChart(dataset1,"chart1");
myChart1.updateChart(dataset2,"chart1");
var myChart2 = new chart();
myChart2.createChart(dataset2,"chart2");
This is the problem:
var rect = svg.selectAll('rect')
.data(dataset,function(d, i) { return d; });
This is telling d3 to use the data value as a key into your array. Since your values are changing, the different values don't match and so they aren't being updated (you would need to use another append statement to get them to show up). Since you just have an array of values, you want to use the index of the value as the key (this makes it so that element 1 from dataset1 gets updated with the value of the new element 1 in dataset2).
You can either specifically use the index as the key:
var rect = svg.selectAll('rect')
.data(dataset,function(d, i) { return i; });
Or more simply, by doing this since using the index as the key is the default behavior.
var rect = svg.selectAll('rect')
.data(dataset);