samzmann / contoursweb Goto Github PK

For some reason that remains obscure to me, contours.js is not drawing the right shape around the blobs.
When I open the SVG in Illustrator, I see that strokes are being drawn around each group of 4 pixels (1px heigh 4px width) is some areas, and that the blobs are detected only in some regions.
Because of this, and because the minimum stroke weight is 1pt, it appears like blobs are being filled a certain color, and not blobs filled in another colors, however it is the strokes that are fat and give the illusion of a fill.
See the attached zip file and open it in Illustrator for a visual explanation.
svgTest3.svg.zip

To sum up:

• Why are strokes being drawn around 4x1 groups of pixels?
• Why are only some blobs being detected by contours.js?

Still have not figured out why the x and y axis are being switched and then the shape scaled.
I suspect the problem is happening in contours.js at line 26/27:

x = d3.scale.linear().range([0, width]).domain([data.length, 0]),
y = d3.scale.linear().range([height, 0]).domain([data[0].length, 0]),

I have tried every possible combinations of switching [width, 0] to [0, width] and such, but nothing has done it.

I wonder if the problem might come from the way the data is structured. The example I used and copied the code from is here: https://github.com/jasondavies/conrec.js/tree/master/example
See the data.js file and compare to the blobMap array to determine if there is indeed data formatting issues.