Verkon visualisointi

Minä olen suorittanut koodaus-oppitunnin täällä ( http://silentteacher.toxicode.fr/hourofcode ) ja läpäissyt sen hyväksyttävästi, saaden siitä serifikaatin https://code.org/printcertificate/_1_28382b33a5786e7392bf9e9738198717 , mutta tuohon sinun onglmaasi ei minun peruskoulun matematiikka riitä alkuunkaan.

Jos tehdään sykli, koodilla

var testN = 20
var mat = new Array(testN).fill(null).map((_,i)=>new Array(testN).fill(null).map((_,j)=>{
if (i===j) return testN-1;
return Math.abs(i-j)===1?1:0;
}));
mat[0][testN-1] = mat[testN-1][0] = 1;

ja käytetään x-coord: 5 ja y-coord: 7, niin saadaan syklistä sydän: https://aijaa.com/Z65dCm

muillakin arvoilla saadaan hienoja symmetrisiä kuvioita, erityisesti tuo x-coord: 5 näyttäisi olevan hyvä.

Pitihän se arvata, että viesti, jossa oli koodia poistuu, no nyt sitä ei enää tarvitakaan, sillä löysin JS-kirjaston nimeltä numerical.js, josta löytyy funktio eig. Refactoroin koodia vähän muutenkin. Osoitteesta https://codepen.io/minkkilaukku/full/aPPvOp löytyy jos haluatte kokeilla. Siinä on valmiiksi joku verkko, mutta ylhäältä voi syöttää oman datan JSON:ina muodossa

{"labels": ["A", "B", "C", "D"],
"mat": [[2, 3, 1, 0], [3, 1, 0, 5], [1, 0, 6, 2], [0, 5, 2, 2]]}

tai sitten voi valita verkon: ketju, sykli, täysi tai satunnainen. Valitse koko (kuinka monta solmua ja satunnaiselle todennäköisyys, jolla kukin kaari otetaan mukaan ja paina Set-nappia.

Siellä on myös nappi, joka asettaa solmut ympyrään. Aika kivan, hieman jopa hypnoottisen kuvion saa, kun tekee isohkon täyden graafin ja laittaa sen ympyrään. Ai niin, pitäisi vielä laittaa liukuvalitsin sille kuinka paksuna kaaret piirretään, mutta jos otatte koodin itsellenne, niin se onnistuu syöttämällä

g.setEdgeWBounds(0, 2);

missä parametrin arvot siis ovat pienin ja suurin paksuus kaarelle, voitte myös kokeilla

g.edgeAlpha = 0.3;

Kokeilin artikkelissa http://yifanhu.net/PUB/graph_draw_small.pdf kuvailtua algoritmia (minun versioni löytyy CodePen-linkistä funktiosta Graph.prototype.forceDirect). Kokeilemalla asetin parametrien arvoja ja kyllä se nyt melko järkevästi verkkoja asettelee. Mutta miksi se minulla vaatii niin monta iteraatiota ennen kuin se verkko asettuu hyvin (kokeilkaa vaikka "grid"-verkolla, se vie monta tuhatta iteraatiota, ennenkuin verkko "selviää", niin siellä on nyt uutuutena "grid" ja "torus" -verkot, ja ruksikaa pois se "calculate eigen" vasemmasta ylälaidasta, jos ison verkon teette).

Johtuuko se parametrien arvoista?

Ja linkkihän oli (taisi jo tuolla jossain viestissä ollakin):
https://codepen.io/minkkilaukku/full/aPPvOp

Siellä alapuolella jossain on se "Lay with force direct"-nappi ja siinä vieressä iteraatiomäärä-säädin.

Uutena ominaisuutena "Random Planar"-verkko. Nyt jopa lisätty sinne drop-valikkoon (viime kerralla unohtu, grid ja torus lisätä).

Tuostahan saa hauskan pikkupelin, kun tekee satunnaisen verkon ja sitten yrittää manuaalisesti selvitää sen siten että mitkään viivat eivät mene päällekäin. Solmujen määrää ja kaaren todennäköisyyttä vaihtelemalla voi säätää vaikeustasoa. (Todennäköisyys tarkoittaa sitä kuinka suurella kukin kaari verkon kolmioinnista otetaan mukaan.)