Създайте SVG визуализация на данни с PHP

Добрият програмист е мързелив програмист. В нарастващия свят на визуализации на данни, ръчно изработването на всеки дизайн няма да се мащабира. Исках да видя дали има начин да се създадат аспекти на визуализациите с помощта на програма, за да се направи изходът лесен за създаване и повторна употреба. Подобно на философията на UNIX за свободно свързани програми, възможно ли беше да се създаде малка кутия с инструменти от свободно свързани скриптове, които създават градивни елементи на визуализациите?

Изглежда, че няма приет термин за това. Чувал съм фразите „детерминиран дизайн“, „програмен дизайн“ и „изчислителен дизайн“. Това, което всички те се стремят, е способността да създават последователно някакъв графичен елемент въз основа на въвеждането на данни.

Виждаме това в реалния свят през цялото време. Старите живачни термометри взеха данни от околната среда, температурата и преобразуваха това във визуализация, като преместиха живака нагоре с пипетата. Какво представлява цифровият еквивалент?

Има няколко кандидат-технологии. Ако работите онлайн, тогава платното изниква в съзнанието ви. Тя ви позволява да рисувате растерни графики бързо и лесно. Ако искате, има и много библиотеки с кодове на изображения, които могат да генерират GIF, JPEG и PNG при поискване. Но какво, ако целта ви не винаги е онлайн? Ами ако се стремите към печат? Тогава можете да използвате растерна графика, но тя ще трябва да бъде доста голяма. По-добро решение е да създадете векторен формат на изображение от вашия код. Тук стъпва SVG (Scalable Vector Graphics).



Какво е SVG?

SVG е малката технология, която би могла! Той е на повече от 10 години и спецификацията все още се усъвършенства. SVG е проектиран и преработен с мисъл за XML мрежа. SVG Tiny беше настроен да превземе мобилния свят с буря, но никога не го направи. Мрежата ще има мащабируема графика, която би могла да се мащабира с вашия отзивчив уеб дизайн, но малко браузъри първоначално поддържат SVG. Оглеждайки се, бихте си помислили, че SVG се е провалил и е отписване. Загубата в мрежата е печалба на програмиста!

SVG е базиран на XML език, използван за описване на векторни графики. Има няколко примитива, които трябва да знаете, като линия, кръг, правоъгълник и път. От тях можете да изградите много по-сложни изображения. Тъй като XML е просто текст, можете да напишете SVG файл във всеки текстов редактор. Дори прости скриптове за програмиране могат бързо да изведат SVG. Тъй като форматът е текстов, възможно е да влезете и да го промените дори след като кодът ви приключи ... Ако цветът не ви харесва, отворете Notepad и го намерете и заменете.

SVG е красиво просто нещо за научаване. В продължение на много години никога не съм се занимавал с програмиране на графики, защото трябваше да знаете за форматите на изображения и това беше като чужд език, но със SVG това е просто текст. Мрежата спечели, защото можете да „Прегледате изходния код“; SVG е чудесен формат на изображението, защото можете да направите същото!

Използване на код за изграждане на SVG

Изграждането на SVG от кода има своите предимства. Можете всеки път математически да постигнете взискателни резултати. Използвайки алгоритми, можете бързо да разнесете обекти на точни интервали. Виждал съм дизайнери да се опитват да прикачат обекти към линии или да използват правилата за измерване на разстояния, само за да увеличат мащаба, да го проверят, да отдалечат и все още да го извадят от моите допустими отклонения под милиметър. В кода всичко това може да бъде игнорирано. Невероятно сложни криви могат да бъдат обяснени с няколко линии в пътека и най-хубавото е, че се възпроизвежда отново и отново. Генерирането на 10 000 произволни точки в скрипт е едно за цикъл. На ръка това ще отнеме много копиране и поставяне и тогава няма да е наистина произволно. Силата на кода за бързо генериране на дизайни, които са твърде взискателни или твърде досадни за дизайнерите, е най-доброто място.

Не се застъпвам за отнемане на дизайна на графики от професионалистите, а по-скоро позволявам на кода да прави това, което прави най-добре. Добрият програмист е мързелив програмист. Добрият дизайнер трябва да бъде мързелив. Не е необходимо да създавате 10 000 произволни точки на ръка. Вашето време може да се използва по много по-добри начини.

Изграждането на SVG чрез код е най-бързият начин за получаване на база, която лесно може да бъде импортирана в по-сложен векторен софтуер като Adobe Illustrator или Inkscape. Оттам дизайнът може да бъде оформен допълнително, за да отговаря на нуждите на всеки уникален проект.

Примери

Ако вземем пример, нещата ще станат много по-ясни. Виждам страхотни дизайни наоколо и се чудя как са го направили и как, или ако това може да се направи в код. Един от любимите ми е този плакат за 15-годишнината на списание WIRED . Само по себе си това е красиво нещо, което трябва да се погледне, но докато не го разберете, не получавате фината справка. Всяко от цветните колела представлява основните цветове на корицата на всеки брой. С течение на времето можете да видите как са преминали през тъмни периоди и ярко оцветени периоди. Помислих си как бих могъл да направя нещо подобно и написах прост PHP скрипт, който ще заеме корица на списание .net и ще доведе до подобен ефект.



За да отпразнува своята годишнина, през 2008 г. списание WIRED възложи на Фернанда Вигас и Мартин Ватенберг да създадат визуализация на своята история и култура

За да отпразнува своята годишнина, през 2008 г. списание WIRED възложи на Фернанда Вигас и Мартин Ватенберг да създадат визуализация на своята история и култура

Осъществяването на .net обхваща визуализации

За тези от вас, които не са запознати с PHP, SVG или как да ги преглеждате, това е доста лесно. Ще ви преведа през кода и ще ви покажа как да видите SVG в браузъра и в текстов редактор. Ако искате да използвате своя любим език, не би трябвало да е трудно да го следвате.

Първото нещо, което трябва да направим, е да заредим JPG изображението, което искаме да анализираме. В PHP можете да използвате imagegreatefromjpeg () функция, ако имате инсталирани правилните библиотеки. Това връща манипулатор на изображение, за да можем да зададем допълнителен въпрос за графиката.

Следващото нещо, което ще направим, е да определим височината и ширината на изображението с помощта на imagesx () и imagest () функции.

Нашата цел е да търсим всеки пикселен цвят в изображението и да преброим честотата на всеки от тях. Така че ще ни трябва някакъв масив. В този случай създадох масив, наречен $ rgb = масив () , който мога да направя нов ключ за всеки цвят и да увелича стойността като брояч.

Тъй като имаме височината и ширината на изображението, можем да направим две вложени цикли. Сега можем да преминем колона по колона, гледайки всеки x и y пиксел, като използваме imagecolorat () функция. Линията $ rgb [imagecolorat ($ im, $ i, $ j)] ++; е достъп до масива rgb с ключ, равен на стойността на пиксела, и добавяне на един към тази стойност. Когато двата цикъла for приключат, ще разгледаме всеки един пиксел, създавайки хубав, компактен масив от само известните цветове и тяхната честота.

Накрая ще сортираме този масив с asort () така че най-популярните цветове са в края, а най-малките стойности в началото.

Кодът в PHP изглежда по следния начин:

В този момент нашият масив $ rgb е пълен; вече не се нуждаем от изходното изображение и ще създадем нова визуализация в SVG въз основа на данните.

SVG е базиран на XML, което означава, че е просто текст. Така че можем просто да повторим SVG кода и да видим резултатите. Първото нещо, което трябва да направим, е да уведомим браузъра, че това е SVG, а не обикновен текст. В този случай трябва да използваме заглавка () функция с подходящ тип съдържание ' +xml '. Сега браузърите или други приложения могат да използват това, за да го изобразят правилно. Може да се получи и без това, но е по-добре да сте добър нетен гражданин и да го изведете, ако можете.

След това разпечатваме XML декларацията и SVG DOCTYPE.

Сега всъщност можем да започнем да стигаме до SVG частта, която е специфична за нашия образ. Подобно на това, че всяка HTML страница има корен на, SVG има корен на. Това отнема няколко параметъра като височината и ширината на крайното изображение. Тъй като не винаги знаем колко голям ще бъде изходното ни изображение, по-лесно е просто да направим това 100% за всяка стойност.



Концентрични пръстени подредени, за да се получи ефект

Концентрични пръстени подредени, за да се получи ефект

Логиката за извеждане на дизайна е доста проста. Ще вземем най-малката срещаща се цветова стойност в изображението и ще направим кръг, равен на височината, умножена по ширината.

Не изглежда интуитивно, че възможно най-големият кръг е най-малката възможна стойност! Това, което правим по-нататък, ще помогне да се изясни това.

Този голям кръг е нашият основен слой. Първо ще оставим това и ще сложим допълнителни кръгове отгоре, като всеки път ставаме малко по-малки. В крайна сметка единственото, което се вижда от нашия огромен изходен кръг, ще бъде мъничко парче около ръба.

За да постигнем всичко това, ще преминем през $ rgb масив, извличащ ключа, който е цветът, и стойността, която е честотата. Можем да направим това с foreach ($ rgb като $ k => $ v) . Следващите няколко реда разделят стойността на RGB на стойност $ r, $ g, $ b, готова за конвертиране в шестнадесетична. В PHP имате dechex () функция, която приема десетично число и създава шестнадесетичен еквивалент. Също така трябва да подплатим низа с водещи нули, в случай че стойността на цвета е по-малка от 16. Поставяйки ги заедно, получаваме $ шестнадесетичен стойност.

До този момент дори не сме извели нито един графичен елемент SVG. Това ще бъде първият ни кръг. В SVG, за да направите кръг, използвате елемент с някои атрибути. Тези атрибути описват както кръга, така и неговото положение. Атрибутите cx и cy са централната точка на кръга в мрежата x, y. Атрибутът r е радиусът и запълването е шестнадесетичен цвят, с който искате да бъде запълнен кръгът. Създаването на графични елементи не може да бъде много по-лесно.

Сега трябва да вземем наученото и да го приложим към нашия набор от цветове. Има две променливи, които трябва да следим: максималният размер на кръга и размерът на предишния кръг. Също така, за да се уверя, че нещата не излизат от ръцете по размер, добавих a $ скалер променлива, за да предотврати експлозията на размера твърде голям.

как да направите решетка в индизайн

Променливата $ c е максималният размер, от който непрекъснато ще намаляваме радиуса. От $ c е ширината по височината, всеки пиксел в оригиналната графика е представен в радиуса на кръга. Следващата променлива $ пред е размерът на предишния кръг, който нарисувахме. По този начин можем бавно да намалим размера на радиуса въз основа на броя пиксели, за които вече сме направили кръгове.

$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 '';?>

Близък план на пръстените, без да се комбинират подобни цветове

Близък план на пръстените, без да се комбинират подобни цветове

Ако разгледаме някои примерни резултати, бързо ще видим, че всеки мъничък нюанс на всеки цвят получава свой пръстен. Това означава, че изглаждащият текст създава много нюанси на сивото, които би трябвало да сгънем в един представителен цвят. Това ще намали броя на пръстените, но в същото време е по-ясно кои цветове се открояват най-много. Можем просто да вземем петте най-популярни цвята, но това, което обикновено се случва, е да получите подобни нюанси от един и същи цвят, вместо да представите пълния спектър. По-добрият начин е да опитате да популяризирате цветове с подобни стойности в най-популярния съсед. За да направим това, трябва да напишем проста функция, която да вмъкнем преди изхода на SVG.

$rgb = reduceColors($rgb);

Преминавайки в списъка с $ rgb цветове, получаваме тяхната стойност и честота. Идеята е да прегледате целия пълен списък и да създадете нов списък с намалените цветове. Избрах плюс-минус от 75. Това означава, че RGB стойност от 100 100 100 ще се повиши в най-популярния цвят, който е от 25,25,25 до 175,175,175. Можете да настроите тази стойност, за да бъде по-опрощаваща или по-строга. В зависимост от вашите стойности ще получите повече или по-малко пръстени.

Първо, трябва да обърнем масива обратно, така че най-популярните цветове да са първи. Това означава, че насърчаваме най-популярните, а не най-малкото. Докато обикаляме през $ rgb масив, ние също се нуждаем от под-цикъл през $ темп масив. Ако това е нов цвят, който не сме виждали преди, ние го поставяме в новия $ темп масив. В противен случай, докато се придвижваме, можем да го добавим към първия $ rgb стойност, която намираме да съвпада с нашия плюс / минус диапазон. В края прибягваме до масива, така че най-малкият е първи и го връщаме обратно, за да можем да изведем 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;}

Вместо да използвате функцията, друга опция би била да използвате вградената функция imagetruecolortopalette () , които могат да отнемат максимален брой цветове за цветовата палитра. Това ще определи броя на възможните цветове в пръстените и ще намали цвета вместо вас. Резултатите могат или не могат да бъдат това, което сте планирали, но това е по-лесна алтернатива.

.net корици и пръстен, произведен от кода, представящ цветовите количества

.net корици и пръстен, произведен от кода, представящ цветовите количества

Подобрения

Има много начини това да бъде подобрено. По-добър алгоритъм за групиране на цветове, някои оптимизирани цикли, може би да го обърнат, така че най-популярните цветове са на външния пръстен вместо на вътрешния. Това беше проектирано като бърз старт в света на динамично генерираните визуализации. Оттук нататък трябва да вземете творчеството си и да видите към какво можете да го приложите.

SVG едва ли е страшната технология, която може би сте си помислили. Като се има предвид, че това е просто текстов, XML формат, можете да пишете скриптове на любимия си език, за да генерирате бързо и лесно изходни данни. Изпълнението на тези скриптове върху различни данни дава различни резултати, но основният код остава същият, което ви позволява бързо и лесно да прототипирате нови дизайни. Познаването на SVG и как да скриптирате резултата от него е друг инструмент във вашата кутия с инструменти, полезен в много аспекти при работа и игра.