D3 playing with data

Here's my take on  Gödel, Escher, Bach cover in an attempt to start my new class, DATA ANALYTICS: PRINCIPLES & TOOLS.

These were generated with DataToolit.  I probably went overboard on using arrow functions in the coding. What I found interesting in writing the code was that interconnected three different projections has some subtlety. I do not understand the constraints on data set, but I was very constrained on my last choice of projection, the y. Perhaps I'll give it some thought later. Also, D3 is not the best choice for 3D  but I've recently be playing around with D3 in my course WEB TECHNOLOGIES, so I figured why not.  

You may enjoy playing with the javascript. The interface needs work but I doubt I'll get around to fixing it until I have another need for something similar. 

Details

The message I started with was Data-Tool-it but then I shifted more towards Data-Tools-y: partly because I had the missing sections of at least one of the shadows and partly to make an easier message of y which is "WHY do this course". Constructing the points was simply a task of blanking out blocks that one of the directions had a zero.  Enjoy this code constructig the basics blocks. The interface coding with D3 is more involved.

 

let data =[
[1,1,1,1,1,1,0,0,0,0,0,1,0,0,1,1,1,1,1,1,0,0,1,0,0,0],
[0,1,1,0,0,1,1,0,0,0,1,1,1,0,0,0,1,1,0,0,0,1,1,1,0,0],
[0,1,1,0,0,0,1,1,0,0,1,0,1,0,0,0,1,1,0,0,0,1,0,1,0,0],
[0,1,1,0,0,0,1,1,0,1,1,0,1,1,0,0,1,1,0,0,1,1,0,1,1,0],
[0,1,1,0,0,0,1,1,0,1,1,1,1,1,0,0,1,1,0,0,1,1,1,1,1,0],
[0,1,1,0,0,0,1,1,0,1,1,1,1,1,0,0,1,1,0,0,1,1,1,1,1,0],
[0,1,1,0,0,1,1,0,1,1,0,0,0,1,1,0,1,1,0,1,1,0,0,0,1,1],
[1,1,1,1,1,1,0,0,1,1,0,0,0,1,1,0,1,1,0,1,1,0,0,0,1,1]

]

let tool =[
[1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,1,1,0,0,0,0],
[0,0,0,0,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0],
[0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,1,1,1],
[0,0,0,1,1,0,0,1,1,1,1,0,0,1,1,1,1,0,0,1,1,0,1,0,0,0],
[0,0,0,1,1,0,1,1,0,1,1,0,1,1,0,1,1,0,1,1,1,0,1,1,1,0],
[0,0,1,1,0,0,1,0,0,1,0,0,1,0,0,1,0,0,1,1,0,0,0,0,1,1],
[0,0,1,1,0,1,1,0,1,1,0,1,1,0,1,1,0,1,1,1,0,0,0,0,1,1],
[0,1,1,1,0,1,1,1,1,0,0,1,1,1,1,0,0,1,1,0,0,1,1,1,1,0]
]

let it = [

[0,1,1,1,1,1,0,1],

[1,0,1,1,1,0,1,1],

[1,1,0,1,1,0,1,1],

[1,1,0,1,0,1,1,1],

[1,1,1,0,1,1,1,1],

[1,1,1,0,1,1,1,1],

[1,1,0,1,1,1,1,1],

[1,0,1,1,1,1,1,1]

]

let block = 

Array.from({length:data[0].length},(_,i)=> Array.from({length:data.length},(_,j)=> Array.from({length:tool.length},(_,k)=> data[j][i] * tool[k][i] * it[k][j] )))      

Content for now

I'm going to fiddle with this later. The code is not that ugly.  Aside from JQuery and math.js, it's under 200 lines of source half of which is Javascript.  It still needs commenting but I'm off to 3D land to start working of a tree version of FibBox which is already a bit mind warping.  Here's the latest version of the Fibonnaci trees.

Solved but still plugging

The issue was easier than I thought.  It was the 45 degree rotation which I wanted to better emphasize the treeness of the structure.

This has none of the unexpected lines.  I'm still not loving some of the boundary colour meshing but these are just choices which I can now put some time to improve on.

This update has some hoving CSS that allows you to see the Fibonacci connections of the pieces.  So you can take a look at what is going on before I complete the version that may work as a decent teaching example for coding. Here is an example of seeing that that div has a width of 144 and a height of 89 which are both Fibonacci numbers.

Still plugging...

This is close but not quite ready for prime time....

A collection of Fibonacci Trees

Although I've never heard of Fibonacci Trees, it seems like a reasonable name for this since it is made up of Fibonacci spirals. It's created with a bunch rectangles with integer coordinates that are Fibonacci numbers. I thought that I could easily use border-top-left radius:100% and conic-gradients... It's some finicky code that seems to produce a bunch of artifacts that I can't get rid of... Currently, the rough draft of the code needs a lot of polish but I feel there is no point streamlining it until it can produce what I want without the artifacts.... I could fix a few of the colour issues that occur in the upper tree not nicely meshing but since the other problems can't be fixed I'll leave it.

There seems to be no issues with the sizes and placements so the artifacts are related to the conic-gradient and perhaps a browser thing...  There is a better way to colour but not one that will be easy least using CSS. 

Perhaps the 3D version of this tree will be more interesting and will fall together better.

Back to JQuery...

I got beaten by CORS (cross-origin resource sharing).  To really show the utility of using divs to construct fractals I wanted to use images. Being a lazy sort and less interested in picking the best set of images, I decided to use an somewhat arbitrary collection of images from a site like Flickr. And Boom I had a CORS issue. The cross-origin issue is not easy to solve without a library--a pure Javascript solution was far from pretty, intuitive, or readily available. I ended up retreating back to JQuery.  Here's a what I ended up with:

You can find this code on my dumping site (jimmorey.com) or in this CodePen. I'm cheating a bit with the image sizes--the Sierpinski carpet's holes aren't quite as big as these images but I wanted to show off the images more than accurately have a fractal. Generally, I've been thinking about using the fractal as more of an information display for images.  Perhaps later.

I'll explore a few more parameter tweaks to see if I can have some more fun with graphics. I may explore some rectangular ones but these were my first two.

These used "cat,cute" to find the Flickr images. Make sure to take a look at the active code--in total, it's under 150 lines.  It allows you to hover over images to brighten and in the case of this later triangular one reshape to square images to better see the images. 

I will explore other libraries and photo sites like google photos to see if I can construct a better teaching example but probably I'll let it sit for a bit.

Sierpinski with divs and CSS

A simple construction with plain Javascript and CSS can be seen here.  It is part of my push to make examples that have a few prerequisites.  In this case, ES6 Javascript, CSS, and HTML.  I make use of divs as the main graphical elements. This chunk of code

    function iterate(el){  
        [[1,1],[1,-1],[-1,1]].forEach(x=> {
            let newEl = el.cloneNode();
            newEl.style["transform"]=
                `scale(0.5) 
                 translate(${x[0]*el.offsetWidth/2}px,
                ${x[1]*el.offsetHeight/2}px)`;
            el.appendChild(newEl);
        });
    }

adds three shifted elements, a quarter of the original's size. Each shift is relative to the center of the original, corresponding to all the corners excluding the upper-left corner, which would be the [-1,-1] .

After thee iterates, there are 27 equally small divs as seen below and to the left. To get the more attractive triangles on the right, a class, called half, transforms the appearance of the squares into triangles.

Essentially, the squares are 0x0 divs with a 100px border where as the triangles are divs with borders described in the CSS below

 
    .half{ /* the bottom right half of a 0x0 div */
        border-bottom:100px solid rgba(0,0,255,0.3);
        border-right:100px solid rgba(0,0,255,0.3);
        border-left:100px solid transparent;
        border-top:100px solid transparent;
    }








A further bit of CSS transforms the outer square into a rhombus which transforms the blue part into an equilateral triangle. The class rhomb below skews the shape putting the vertical lines into a 30 degree lines going to the right and squashes the vertical so that the length of the skewed vertical lines are the same as the horizontal lines. The shift (translate) puts bottom horizontal line approximately where the original was.

    .rhomb { 
        transform:skew(30deg) scale(1,0.866) translate(-58px,0);
    }

To further show off this div construction of this pattern, a Button is used to highlight how each div sits in other divs. The Button

        <button onclick="show()">show divs</button>

On button presses, the highlight class is either added or removed from special divs (div.done).

function show(){ // toggles whether the borders are shown in iterations
    let toggle = document.getElementsByClassName("highlight").length > 0;
    Array.from(document.getElementsByClassName("done")).forEach(x=>{ 
        if (toggle) x.classList.remove("highlight");
        else  x.classList.add("highlight");
    });
}

Style can be used to suggest its construction. Above, the stacked shaded backgrounds reveal how many divisions a particular regions is included in. Adding a border to each div can better show how the construction was achieved.

    .highlight { 
        border:2px red solid; 
        background:rgba(220,220,100,0.2);
    }

This code can be a simplified by a Javascript library or framework with  complication of having to something else to learn  and potentially having to later switch if something better or more popular comes along.

Weeping willows

Earlier, I mentioned my visualizations the "Weeping Willow" that depicts the hailstone function but I didn't explain it — I'll try to give a quick description now.
In the picture, all of the red numbers are even and are above their halves. The odd black odd numbers are above numbers that are one more than triple their value (if the number is x then they are above 3x + 1). All number sequences starting with a red number can be traced down to 1. For example, if you start at the red number 212 (located directly above the 1) you can trace the sequence: 212 106 53 160 80 40 20 10 5 16 8 4 2 1. Notice how the numbers half until they reach an odd number (53 and 5) when they become one more than their triple. This behaviour sums up the tree aspect of the "willow". The weeping aspect comes from green numbers. Each of the green numbers are multiples of 3 and 2; these numbers are below their halves. So number sequences starting with green numbers can be trace up until they hit black numbers at which point they turn downward and also end up at the number 1. For example, if you start at the green number 288 (located along the left side of the tree) you can trace the sequence: 288 144 72 36 18 9 28 14 7 22 11 34 17 52 26 13 40 20 10 5 16 8 4 2 1. After 9 in the sequence, the sequence of numbers descend in the tree eventually reaching the base of one. The ascending green part forms linear structures which is very unlike the branching structure of the rest of the tree.
Every sequence of numbers in the visualization is rigidly defined by iterating the hailstone function which is simply defined by f(x) = x/2 if it is even or 3x + 1 if it is odd. The question that many people ask is, does every sequence end in 1? In terms of this tree, is every number in this tree? It certainly is an interesting question to which I refer you to the link above.
I can't answer many questions about the sequences but I perhaps this visualization can shed some light on the problem. The picture comes from a Javascript tool that uses html's DOM with some added branch-lines provided by a dynamic SVG background. The program can generate any subtree of defined by its base number and a other parameters: start number, maximum number, and tree depth. The one below has 19 as its base (19,20000,200). It also has supplementary map at the bottom that helps show the numbers that are not in the tree: numbers like 27 which have has a particularly long sequence ending in 1 (27 .82 41 .124 62 31 94 47 .142 71 .214 107 .322 161 .484 242 121 364 182 91 274 137 412 206 103 310 155 466 233 .700 350 175 526 263 .790 395 .1186 593 .1780 890 445 1336 668 334 167 502 251 754 377 1132 566 283 850 425 1276 638 319 958 479 1438 719 .2158 1079 .3238 1619 .4858 2429 .7288 3644 1822 911 2734 1367 4102 2051 6154 3077 .9232 4616 2308 1154 577 1732 866 433 1300 650 325 976 488 244 122 61 184 92 46 23 70 35 106 53 160 80 40 20 10 5 16 8 4 2 1 — the "." here shows that the number is maximum value of the sequence so far). Try out the program. Hopefully, my program isn't to buggy to play with.