Creating Irregular Shapes From Coordinate Mesh-grid

[Zac Rinehart]

I am trying to visualize a decision tree plot aka decision surface plot from a JSON containing coordinate mesh. It's a little tricky as the shapes are irregular and a small step size is needed to incrementally interpolate spatially by that small step size (say .02) until each zig zag has been accounted for. In my case, I have a matrix of 220 x 395 of purely x coordinates, and a y coordinate matrix of equal size, as well as an ID matrix for the predicted class (also governs color). 

With these coordinate and ID values, I want to create a 2D visual of these irregular shapes using D3's path. You can see my best attempt on this block:

https://bl.ocks.org/diggetybo/99a123aae5e3819dbe835a14d0f2f175

No errors are displaying, but I know something is amiss because nothing is being appended. 

It should look like one of the following plots (without the scatter plot overlay, my data is only for the 2D regions):

For those familiar with Python, I'm using the numpy.meshgrid() call to get the coordinate data for the shapes, from which point I write to JSON. No knowledge of Python is required for my problem though I'm pretty sure, it's all about giving the D3 path the input it expect, which I'm confused about given my particular input.

My guess is I'm not accessing the JSON the correct way. Or I am not using the right line generating technique for the path to draw the lines at the JSON values. Can someone please explain what I can do to plot via D3 path correctly?

Thank you

[Ian Johnson]

Hi Zac,

You are right in your suspicion that you are not accessing the json correctly. I recommend doing a console.log(json) and clicking through it in the developer console.

the selection.data(json) expects an array that it can iterate over. it essentially does something like this under the hood:

for(var i = 0; i < json.length; i++) {

  var d = json[i];

  callback(d,i);

}

where callback is any one of the attribute functions you are passing in.

You can either reformat your json into an array that you pass to your selection, or you can figure out how to access the appropriate x and y coordinates from within those callbacks.

in general i recommend making liberal use of console.log until you understand what d3 is doing for you :)

--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Ian Johnson - 周彦

http://enjalot.github.io/

[Zac Rinehart]

Hey Ian,

Thanks for the run-down on that section of the code.Inspect element/console log did help me get through some of the initial hurdles. 

Since my original post I have flattened my mesh-grids into 1 dimensional arrays for x,y and id. That should make things simpler. I also tried to put the whole JSON inside an array. From here console log started to show errors, which I took as a good sign (as before nothing displayed/no errors). So now at least I have an error to work with, specifically: Error <path> d expected number, 'mnan', 'nan'. 

Once I clicked through it again in the console, it seemed to be the same structure as other complex path json formats (i.e. topojson, ect). So I'm not sure why after my data transformations path still doesn't like what it sees.

Here is a screen shot of the JSON's current structure in the console:

I also tried d[0].xs and d[0].ys in the line generator function, but that did not help. Am I still on the right track?