Stvorite SVG vizualizaciju podataka s PHP-om

Dobar programer je lijeni programer. U rastućem svijetu vizualizacija podataka, ručna izrada svakog dizajna neće se mijenjati. Htio sam vidjeti postoji li način za stvaranje aspekata vizualizacije pomoću programa, kako bi se izlaz učinio jednostavnim za stvaranje i ponovnu upotrebu. Slično kao i UNIX-ova filozofija labavo spojenih programa, je li bilo moguće stvoriti mali okvir alata od labavo spojenih skripti koji stvaraju gradivne blokove vizualizacija?

Čini se da za to ne postoji prihvaćen izraz. Čuo sam izraze 'deterministički dizajn', 'programski dizajn' i 'proračunski dizajn'. Sve što im je cilj je sposobnost dosljednog stvaranja nekog grafičkog elementa temeljenog na unosu podataka.

To stalno vidimo u stvarnom svijetu. Stari živini termometri uzimali su podatke iz okoline, temperature i pretvarali ih u vizualizaciju pomicanjem žive prema pipeti. Što je digitalni ekvivalent?

Postoji nekoliko tehnologija kandidata. Ako radite na mreži, tada će vam platna pasti na pamet. Omogućuje vam brzo i jednostavno crtanje rasterske grafike. Ako želite, postoji i mnoštvo knjižnica slikovnih kodova koje na zahtjev mogu generirati GIF-ove, JPEG-ove i PNG-ove. Ali što ako vaš cilj nije uvijek na mreži? Što ako ciljate na tisak? Tada biste mogli koristiti rastersku grafiku, ali ona bi trebala biti prilično velika. Bolje rješenje je stvoriti vektorski format slike iz vašeg koda. Ovdje stupa SVG (Scalable Vector Graphics).

Što je SVG?

SVG je mala tehnologija koja bi mogla! Star je preko 10 godina, a specifikacija se još usavršava. SVG je dizajniran i redizajniran s XML mrežom na umu. SVG Tiny trebao je olujno zauzeti svijet mobilnih uređaja, ali nikada nije. Web bi mogao imati grafiku koja se može zumirati i koja bi se mogla prilagoditi vašem responzivnom web dizajnu, ali malo koji preglednik izvorno podržava SVG. Gledajući oko sebe, pomislili biste da SVG nije uspio i predstavlja otpis. Gubitak interneta dobit je programera!

SVG je jezik zasnovan na XML-u koji se koristi za opisivanje vektorske grafike. Postoji pregršt primitiva koje trebate znati, poput crte, kruga, pravokutnika i putanje. Iz njih možete stvoriti mnogo složenije slike. Budući da je XML samo tekst, SVG datoteku možete napisati u bilo kojem uređivaču teksta. Čak i jednostavne programske skripte mogu brzo izbaciti SVG. Budući da je format tekst, moguće je ući u njega i podesiti ga čak i nakon što je kôd gotov ... Ako vam se boja ne sviđa, otvorite Notepad i pronađite ga i zamijenite.

SVG je lijepo jednostavna stvar za naučiti. Mnogo godina nikad se nisam bavio programiranjem grafike jer ste trebali znati o formatima slika i to je bilo poput stranog jezika, ali sa SVG-om to je samo tekst. Web je pobijedio jer ste mogli 'pogledati izvor'; SVG je izvrstan format slike jer i vi možete to učiniti!



Korištenje koda za izgradnju SVG-a

Izrada SVG-a iz koda ima svoje prednosti. Svaki put možete matematički postići precizne rezultate. Pomoću algoritama možete brzo razmaknuti objekte u točnim intervalima. Vidio sam kako dizajneri pokušavaju preslikati objekte na crte ili koristiti pravila za mjerenje udaljenosti, samo da bi uvećali prikaz, provjerili ga, uvećali i odbacili od mojih tolerancija ispod milimetra. U kodu se sve to može zanemariti. Nevjerojatno složene krivulje mogu se objasniti s nekoliko linija na putu, a što je najbolje, ponovljive su uvijek iznova. Generiranje 10 000 slučajnih točaka u skripti jedno je za petlju. Ručno bi ovo zahtijevalo puno kopiranja i lijepljenja, a onda ne bi bilo uistinu slučajno. Moć koda za brzo generiranje dizajna koji su ili previše zahtjevni ili preumorni za dizajnere je slatka točka.

Ne zagovaram oduzimanje dizajna bilo koje grafike profesionalcima, već puštanje koda da radi ono što najbolje radi. Dobar programer je lijeni programer. Dobar dizajner trebao bi biti lijen. Nije potrebno ručno stvarati 10.000 slučajnih točaka. Vaše vrijeme moglo bi se iskoristiti na puno bolje načine.

Izgradnja SVG-a putem koda najbrži je način da se dobije baza koja se lako može uvesti u složeniji vektorski softver poput Adobe Illustrator ili Inkscape. Odatle se dizajn može oblikovati dalje kako bi odgovarao potrebama svakog jedinstvenog projekta.

Primjeri

Uzmemo li primjer, stvari će biti puno jasnije. Vidim sjajne dizajne uokolo i pitam se kako su to napravili i kako, ili ako se to može učiniti u kodu. Jedan od mojih najdražih je ovaj poster za 15. godišnjicu časopisa WIRED . Samo po sebi to je lijepa stvar koju treba pogledati, ali dok je ne shvatite, nećete dobiti suptilnu referencu. Svaki kotačić u boji predstavlja glavne boje naslovnice svakog izdanja. Vremenom možete vidjeti kako su prolazili kroz tamna razdoblja i razdoblja jarkih boja. Pomislio sam u sebi kako bih mogao raditi nešto slično i napisao sam jednostavnu PHP skriptu koja bi zauzela naslovnicu časopisa .net i proizvela sličan efekt.

Na proslavu svoje obljetnice, 2008. magazin WIRED naručio je Fernandi Vigas i Martinu Wattenbergu izradu vizualizacije njegove povijesti i kulture

Na proslavu svoje obljetnice, 2008. magazin WIRED naručio je Fernandi Vigas i Martinu Wattenbergu izradu vizualizacije njegove povijesti i kulture

Izrada .neta pokriva vizualizacije

Za one koji nisu upoznati s PHP-om, SVG-om ili kako ih pregledati, prilično je jednostavno. Provest ću vas kroz kôd i pokazati vam kako pregledati SVG u pregledniku i u uređivaču teksta. Ako želite koristiti svoj omiljeni jezik, ne bi trebalo biti teško slijediti ga.

Prvo što moramo učiniti je učitati JPG sliku koju želimo analizirati. U PHP-u možete koristiti imagegreatefromjpeg () ako imate instalirane odgovarajuće knjižnice. Ovo vraća ručicu slike kako bismo mogli postaviti dodatna pitanja o grafici.

Sljedeće što ćemo učiniti je dobiti visinu i širinu slike pomoću imagesx () i imagest () funkcije.

Cilj nam je potražiti svaku boju piksela na slici i izbrojati učestalost svake od njih. Dakle, trebat će nam neka vrsta niza. U ovom sam slučaju stvorio niz nazvan $ rgb = niz () , koji mogu izraditi novi ključ za svaku boju i povećati vrijednost kao brojač.

Budući da imamo visinu i širinu slike, možemo napraviti dvije ugniježđene petlje. Sada možemo ići stupce po stupce gledajući svaki x i y piksel pomoću imagecolorat () funkcija. Crta $ rgb [imagecolorat ($ im, $ i, $ j)] ++; pristupa rgb polju s ključem jednakim vrijednosti piksela i dodaje jedan toj vrijednosti. Kad završe dvije petlje for, pogledati ćemo svaki pojedini piksel, stvarajući lijep, kompaktan niz samo poznatih boja i njihove frekvencije.

Napokon ćemo sortirati ovaj niz s asort () pa su najpopularnije boje na kraju, a najmanje vrijednosti na početku.

Kôd u PHP-u izgleda ovako:

kako ručno napraviti pop art

U ovom trenutku naš je niz $ rgb pun; izvorna slika nam više nije potrebna i stvorit ćemo novu vizualizaciju u SVG-u na temelju podataka.

SVG se temelji na XML-u, što znači da je to samo tekst. Tako možemo jednostavno odjeknuti SVG kod i vidjeti rezultate. Prvo što bismo trebali učiniti je da pregledniku dodamo da je ovo SVG, a ne običan tekst. U tom slučaju trebamo koristiti Zaglavlje() funkcija s odgovarajućim sadržajem ' slika / svg + xml '. Sada to mogu koristiti preglednici ili druge aplikacije za pravilno prikazivanje. Moglo bi funkcionirati i bez ovoga, ali bolje je biti dobar neto građanin i objaviti ovo ako možete.

Nakon toga ispisujemo XML deklaraciju i SVG DOCTYPE.

Sada zapravo možemo početi dolaziti do SVG dijela koji je specifičan za našu sliku. Kao što bilo koja HTML stranica ima korijen, tako i SVG ima korijen. Za to je potrebno nekoliko parametara, poput visine i širine konačne slike. Budući da ne znamo uvijek koliko će velika biti naša izvorna slika, lakše je to napraviti samo 100% za svaku vrijednost.

Koncentrični prstenovi naslagani kako bi se postigao efekt

Koncentrični prstenovi naslagani kako bi se postigao efekt

Logika izlaženja dizajna prilično je jednostavna. Uzet ćemo najmanju vrijednost boje na slici i napraviti krug koji je jednak visini i širini.

Ne čini se intuitivno da je najveći mogući krug najmanja moguća vrijednost! Što ćemo dalje pomoći, razjasnit ćemo ovo.

kako se koristi alat za zamjenu boja u Photoshopu

Ovaj veliki krug je naš osnovni sloj. Prvo ćemo to odložiti i na to ćemo složiti dodatne krugove, koji će svaki put biti malo manji. Na kraju, jedino što se vidi iz našeg ogromnog početnog kruga bit će sitni djelić oko ruba.

Da bismo postigli sve ovo, provući ćemo se kroz $ rgb niz koji vadi ključ, a to je boja, i vrijednost koja je frekvencija. To možemo učiniti s foreach ($ rgb kao $ k => $ v) . Sljedećih nekoliko redaka RGB vrijednost dijeli na vrijednost $ r, $ g, $ b spremnu za pretvaranje u hex. U PHP-u imate dechex () funkcija koja uzima decimalni broj i stvara heksadecimalni ekvivalent. Također moramo podstaviti niz vodećim nulama u slučaju da je vrijednost boje manja od 16. Ako ih zajedno stavimo, dobivamo $ hex vrijednost.

Do ovog trenutka nismo ni izbacili nijedan SVG grafički element. Ovo će biti naš prvi, krug. U SVG-u za izradu kruga koristite element s nekim atributima. Ti atributi opisuju i krug i njegov položaj. Atributi cx i cy središnja su točka kruga na mreži x, y. Atribut r je radijus, a ispun je šesnaestougaonu boju kojom želite da se krug ispuni. Izrada grafičkih elemenata ne može biti puno lakša.

Sada moramo uzeti ono što smo naučili i primijeniti na naš niz boja. Dvije su varijable koje moramo pratiti: maksimalna veličina kruga i veličina prethodnog kruga. Također, kako bih osigurao da stvari ne izmaknu kontroli, dodao sam $ skaler varijabla da veličina ne eksplodira prevelika.

Varijabla $ c je maksimalna veličina s koje ćemo kontinuirano smanjivati ​​polumjer. Od $ c je širina pomnožena s visinom, svaki piksel na izvornoj grafici predstavljen je u radijusu kruga. Sljedeća varijabla $ pret je veličina prethodnog kruga koji smo nacrtali. Na taj način možemo polako smanjivati ​​veličinu radijusa na temelju broja piksela za koje smo već napravili krugove.

$v){ if($v > 0) { $r = ($k >> 16) & 0xFF; $g = ($k >> 8) & 0xFF; $b = $k & 0xFF; $hex = str_pad(dechex($r),2,'0',STR_PAD_LEFT).str_pad(dechex($g),2,'0',STR_PAD_LEFT).str_pad(dechex($b),2,'0',STR_PAD_LEFT); echo ''; echo ' '; $prev += (int)($v/$scaler); }}echo '';?>

Krupni plan prstenova bez kombiniranja sličnih boja

Krupni plan prstenova bez kombiniranja sličnih boja

Ako pogledamo neki primjer rezultata, brzo ćemo vidjeti da svaka sićušna sjena svake boje dobiva svoj prsten. To znači da antializirani tekst stvara obilje nijansi sive koje bismo trebali složiti u jednu reprezentativnu boju. To će smanjiti broj prstenova, ali istodobno je jasnije koje se boje najviše ističu. Jednostavno bismo mogli uzeti prvih pet najpopularnijih boja, ali ono što se obično događa je da dobijete slične nijanse iste boje, a ne da predstavljaju puni spektar. Bolji je način pokušati promovirati boje sličnih vrijednosti u najpopularnijeg susjeda. Da bismo to učinili, moramo napisati jednostavnu funkciju koju ubacujemo prije SVG izlaza.

$rgb = reduceColors($rgb);

Prolazeći na popisu $ rgb boja dobivamo njihovu vrijednost i učestalost. Ideja je provući se kroz cijeli popis i stvoriti novi popis sa smanjenim bojama. Odabrao sam plus ili minus opsega 75. To znači da bi se RGB vrijednost od 100.100.100 promovirala u najpopularniju boju, koja je od 25,25,25 do 175,175,175. Ovu vrijednost možete prilagoditi da biste više opraštali ili bili stroži. Ovisno o vašim vrijednostima, na kraju ćete dobiti manje ili više prstenova.

Prvo, moramo obrnuto sortirati niz, tako da su najpopularnije boje prve. To znači da promoviramo u najpopularnije, a ne u najmanje. Dok petljamo kroz $ rgb polje, trebamo i pot petlju kroz $ temp niz. Ako je ovo nova boja koju prije nismo vidjeli, stavimo je u novu $ temp niz. Inače, dok se petljamo, možemo ga dodati prvom $ rgb vrijednost koju pronalazimo u skladu s našim plus / minus rasponom. Na kraju pribjegavamo nizu tako da je najmanji prvi i vraćamo ga natrag kako bismo mogli iznijeti SVG.

function reduceColors($rgb){ $plusminus = 75; arsort($rgb); $temp = array(); // do colour merger foreach($list as $k=>$v){ if($v != 0){ $r = ($k >> 16) & 0xFF; $g = ($k >> 8) & 0xFF; $b = $k & 0xFF; $matched = false; foreach($temp as $m=>$n){ if($m != $k){ $rs = ($m >> 16) & 0xFF; $gs = ($m >> 8) & 0xFF; $bs = $m & 0xFF; if ( ($rs = ($r-$plusminus)) && ($gs = ($g-$plusminus)) && ($bs = ($b-$plusminus)) && $matched == false ) { $temp[$m] += $v; $matched = true; } } } if(!($matched)){ $temp[$k] = $v; } } } asort($temp); return $temp;}

Umjesto upotrebe funkcije, druga opcija bila bi uporaba ugrađene funkcije imagetruecolortopalette () , koji mogu uzeti maksimalan broj boja za paletu boja. Ovo će popraviti broj mogućih boja u prstenovima i smanjiti boju umjesto vas. Rezultati mogu i ne moraju biti ono što ste namjeravali, ali to je lakša alternativa.

najbolje ponude laptopa cyber ponedjeljak 2017

.net poklopci i prsten izrađen od koda koji predstavlja količine boja

.net poklopci i prsten izrađen od koda koji predstavlja količine boja

Poboljšanja

Postoji mnogo načina na koje bi se to moglo poboljšati. Bolji algoritam grupiranja boja, neke optimizirane petlje, možda ga invertiraju pa su najpopularnije boje na vanjskom prstenu umjesto na unutarnjem. Ovo je zamišljeno kao brzi početak u svijet dinamički generiranih vizualizacija. Odsad trebate uzeti svoju kreativnost i vidjeti na što je možete primijeniti.

SVG nije jedva zastrašujuća tehnologija o kojoj ste možda pomislili. S obzirom da se radi samo o tekstualnom XML formatu, možete pisati skripte na svom omiljenom jeziku kako biste brzo i jednostavno generirali izlaz. Pokretanje ovih skripti na različitim podacima dalo je različite rezultate, ali temeljni kôd ostaje isti, što vam omogućuje brzo i jednostavno izradu prototipa novih dizajna. Poznavanje SVG-a i kako skriptirati njegov izlaz još je jedan alat u vašem alatu koristan u mnogim aspektima na poslu i u igri.