PHP로 SVG 데이터 시각화 만들기

좋은 프로그래머는 게으른 프로그래머입니다. 성장하는 데이터 시각화 세계에서 각 디자인을 수작업으로 만드는 것은 확장되지 않습니다. 프로그램을 사용하여 시각화 측면을 생성하고 출력을 쉽게 만들고 재사용 할 수있는 방법이 있는지 확인하고 싶었습니다. 느슨하게 결합 된 프로그램의 UNIX 철학과 마찬가지로, 시각화의 구성 요소를 생성하는 느슨하게 결합 된 스크립트의 작은 도구 상자를 구축 할 수 있었습니까?

이것에 대해 허용되는 용어가없는 것 같습니다. 나는 '결정 론적 디자인', '프로 그래 매틱 디자인', '컴퓨 테이션 디자인'이라는 말을 들었다. 그들이 모두 목표로하는 것은 데이터 입력을 기반으로 일부 그래픽 요소를 일관되게 생성하는 능력입니다.

우리는 항상 이것을 현실 세계에서 봅니다. 오래된 수은 온도계는 환경, 온도에서 데이터를 가져 와서 수은을 피펫 위로 이동하여 시각화로 변환했습니다. 디지털 등가물은 무엇입니까?

몇 가지 후보 기술이 있습니다. 온라인으로 작업하는 경우 캔버스가 떠 오릅니다. 래스터 그래픽을 빠르고 쉽게 그릴 수 있습니다. 원하는 경우 요청시 GIF, JPEG 및 PNG를 생성 할 수있는 이미지 코드 라이브러리도 많이 있습니다. 하지만 타겟이 항상 온라인 상태가 아니라면 어떻게해야할까요? 인쇄를 목표로한다면? 그런 다음 래스터 그래픽을 사용할 수 있지만 꽤 커야합니다. 더 나은 솔루션은 코드에서 벡터 기반 이미지 형식을 만드는 것입니다. 여기에서 SVG (Scalable Vector Graphics)가 등장합니다.



SVG 란 무엇입니까?

SVG는 할 수있는 작은 기술입니다! 10 년이 넘었고 사양은 아직 개선 중입니다. SVG는 XML 웹을 염두에두고 설계 및 재 설계되었습니다. SVG Tiny는 모바일 세계를 폭풍으로 몰아 넣을 예정 이었지만 결코 그렇지 않았습니다. 웹에는 반응 형 웹 디자인에 따라 확장 할 수있는 확대 / 축소 가능한 그래픽이 있지만 기본적으로 SVG를 지원하는 브라우저는 거의 없습니다. 주위를 둘러 보면 SVG가 실패하고 상각이라고 생각할 것입니다. 웹의 손실은 프로그래머의 이익입니다!

SVG는 벡터 그래픽을 설명하는 데 사용되는 XML 기반 언어입니다. 선, 원, 직사각형 및 경로와 같이 알아야 할 몇 가지 기본 요소가 있습니다. 이로부터 훨씬 더 복잡한 이미지를 만들 수 있습니다. XML은 텍스트 일 ​​뿐이므로 모든 텍스트 편집기에서 SVG 파일을 작성할 수 있습니다. 간단한 프로그래밍 스크립트라도 빠르게 SVG를 출력 할 수 있습니다. 형식이 텍스트이기 때문에 코드가 완성 된 후에도 들어가서 조정할 수 있습니다. 색상이 마음에 들지 않으면 메모장을 열고 찾아서 교체하십시오.

SVG는 배우기에 아주 간단합니다. 이미지 형식에 대해 알아야하고 외국어와 같았 기 때문에 수년 동안 그래픽 프로그래밍에 뛰어 들지 않았습니다.하지만 SVG에서는 텍스트에 불과했습니다. '소스보기'가 가능했기 때문에 웹이 이겼습니다. SVG는 당신도 똑같이 할 수 있기 때문에 훌륭한 이미지 형식입니다!



코드를 사용하여 SVG 빌드

코드에서 SVG를 빌드하면 장점이 있습니다. 매번 정확한 결과를 수학적으로 생성 할 수 있습니다. 알고리즘을 사용하면 정확한 간격으로 객체의 간격을 빠르게 지정할 수 있습니다. 저는 디자이너가 물체를 선에 맞추거나 규칙을 사용하여 거리를 측정하려고 시도하는 것을 보았습니다. 단지 확대, 확인, 축소하고 여전히 내 밀리미터 미만의 공차를 벗어나도록합니다. 코드에서 이것은 모두 무시할 수 있습니다. 믿을 수 없을 정도로 복잡한 곡선은 경로에 몇 개의 선으로 설명 할 수 있으며 무엇보다도 반복해서 재현 할 수 있다는 것입니다. 스크립트에서 임의의 점 10,000 개를 생성하는 것은 for 루프입니다. 손으로이 작업은 많은 복사 및 붙여 넣기가 필요하며 실제로 무작위가 아닙니다. 설계자에게 너무 까다 롭거나 지루한 설계를 신속하게 생성하는 코드의 힘이 최적의 지점입니다.

나는 전문가들로부터 그래픽 디자인을 빼앗는 것을 옹호하는 것이 아니라 코드가 가장 잘하는 일을하도록하는 것입니다. 좋은 프로그래머는 게으른 프로그래머입니다. 좋은 디자이너는 게으르다. 10,000 개의 임의의 점을 손으로 만들 필요가 없습니다. 당신의 시간은 훨씬 더 나은 방법으로 사용될 수 있습니다.

코드를 통해 SVG를 빌드하는 것은 Adobe Illustrator 또는 Inkscape와 같은 더 복잡한 벡터 소프트웨어로 쉽게 가져올 수있는베이스를 얻는 가장 빠른 방법입니다. 거기에서 각 고유 한 프로젝트의 요구 사항에 맞게 디자인을 더 구체화 할 수 있습니다.

예를 들어 보면 상황이 훨씬 더 명확해질 것입니다. 저는 훌륭한 디자인을보고 그들이 어떻게했는지, 어떻게 코드로 할 수 있는지 궁금합니다. 내가 가장 좋아하는 것 중 하나는 WIRED 매거진 15 주년 기념 포스터 . 그 자체로는보기에 아름다운 것이지만 이해하기 전까지는 미묘한 참조를 얻지 못합니다. 각 색상환은 각 호 표지의 주요 색상을 나타냅니다. 시간이 지남에 따라 그들이 어두운 기간과 밝은 색상의 기간을 어떻게 겪었는지 볼 수 있습니다. 나는 어떻게 이런 일을 할 수 있을지 생각하고 .net 잡지 표지를 가져와 비슷한 효과를 낼 수있는 간단한 PHP 스크립트를 작성했습니다.



페이스 북에서 내 사진을 차단하려면 어떻게 해

창립 기념일을 축하하기 위해 2008 년 WIRED Magazine은 Fernanda Vigas와 Martin Wattenberg에게 역사와 문화를 시각화하도록 의뢰했습니다.

창립 기념일을 축하하기 위해 2008 년 WIRED Magazine은 Fernanda Vigas와 Martin Wattenberg에게 역사와 문화를 시각화하도록 의뢰했습니다.

.net 만들기는 시각화를 다룹니다.

PHP, SVG 또는 그것들을 보는 방법에 익숙하지 않은 사람들에게는 매우 쉽습니다. 코드를 살펴보고 브라우저와 텍스트 편집기에서 SVG를 보는 방법을 보여 드리겠습니다. 자신이 좋아하는 언어를 사용하고 싶다면 따라하기가 어렵지 않습니다.

가장 먼저해야 할 일은 분석 할 JPG 이미지를로드하는 것입니다. PHP에서는 다음을 사용할 수 있습니다. imagegreatefromjpeg () 적절한 라이브러리가 설치되어 있으면 기능합니다. 이것은 그래픽에 대한 추가 질문을 할 수 있도록 이미지 핸들을 반환합니다.

다음으로 할 일은 다음을 사용하여 이미지의 높이와 너비를 가져 오는 것입니다. imagesx ()imagest () 기능.

우리의 목표는 이미지의 모든 픽셀 색상을 찾아보고 각각의 빈도를 계산하는 것입니다. 그래서 우리는 일종의 배열이 필요합니다. 이 경우에는 $ rgb = 배열 ​​() , 각 색상에 대해 새 키를 만들고 값을 카운터로 늘릴 수 있습니다.

이미지의 높이와 너비가 있으므로 두 개의 중첩 for 루프를 만들 수 있습니다. 이제 각 x 및 y 픽셀을 사용하여 열 단위로 이동할 수 있습니다. imagecolorat () 함수. 라인 $ rgb [imagecolorat ($ im, $ i, $ j)] ++; 픽셀 값과 동일한 키에서 rgb 배열에 액세스하고 해당 값에 1을 더합니다. 두 개의 for 루프가 완료되면 모든 단일 픽셀을 살펴보고 알려진 색상과 해당 주파수로 구성된 멋지고 컴팩트 한 배열을 만듭니다.

마지막으로이 배열을 다음과 같이 정렬합니다. asort () 따라서 가장 인기있는 색상은 끝에 있고 가장 작은 값은 시작에 있습니다.

PHP의 코드는 다음과 같습니다.

이 시점에서 우리의 $ rgb 어레이는 꽉 찼습니다. 더 이상 소스 이미지가 필요하지 않으며 데이터를 기반으로 SVG에서 새 시각화를 만들 것입니다.

SVG는 XML 기반이므로 텍스트 일뿐입니다. 따라서 우리는 단순히 SVG 코드를 에코하고 결과를 볼 수 있습니다. 가장 먼저해야 할 일은 이것이 일반 텍스트가 아니라 SVG라는 것을 브라우저에 알려야합니다. 이 경우 우리는 헤더() 적절한 콘텐츠 유형 ' 이미지 / svg + xml '. 이제 브라우저 나 다른 응용 프로그램에서이를 사용하여 올바르게 렌더링 할 수 있습니다. 이것 없이도 작동 할 수 있지만, 좋은 순 시민이되어 가능하면 출력하는 것이 좋습니다.

그 후 XML 선언과 SVG DOCTYPE을 출력합니다.

이제 실제로 이미지에 특정한 SVG 부분에 도달 할 수 있습니다. 모든 HTML 페이지에 루트가있는 것처럼 SVG에도 루트가 있습니다. 최종 이미지의 높이 및 너비와 같은 몇 가지 매개 변수가 필요합니다. 소스 이미지의 크기를 항상 알 수있는 것은 아니기 때문에 각 값에 대해 100 %로 만드는 것이 더 쉽습니다.



효과를 내기 위해 쌓인 동심원 고리

효과를 내기 위해 쌓인 동심원 고리

디자인을 출력하는 논리는 매우 간단합니다. 이미지에서 발생하는 가장 작은 색상 값을 가져와 높이 곱하기 너비와 같은 원을 만듭니다.

가능한 가장 큰 원이 가능한 가장 작은 값이라는 것은 직관적이지 않은 것 같습니다! 우리가 다음에 할 일은 이것을 해결하는 데 도움이 될 것입니다.

대학생을위한 그래픽 디자인 프로젝트

이 큰 원이 기본 레이어입니다. 먼저 이것을 내려 놓고 그 위에 추가 원을 쌓아 매번 조금씩 작아집니다. 결국, 거대한 시작 원에서 보이는 유일한 것은 가장자리 주변의 작은 은색입니다.

이 모든 작업을 수행하기 위해 $ rgb 색상 인 키와 빈도 인 값을 추출하는 배열입니다. 우리는 이것을 할 수 있습니다 foreach ($ rgb를 $ k => $ v로) . 다음 몇 줄은 RGB 값을 16 진수로 변환 할 준비가 된 $ r, $ g, $ b 값으로 분할합니다. PHP에서는 dechex () 함수는 십진수를 취하고 이에 상응하는 16 진수를 만듭니다. 또한 색상 값이 16 미만인 경우 문자열을 선행 0으로 채울 필요가 있습니다. 모두 넣으면 $ 16 진수 값.

이 시점까지 우리는 SVG 그래픽 요소를 출력하지 않았습니다. 이것이 우리의 첫 번째 원이 될 것입니다. SVG에서 원을 만들려면 일부 속성이있는 요소. 이러한 속성은 원과 그 위치를 모두 설명합니다. cx 및 cy 속성은 x, y 그리드에서 원의 중심점입니다. 속성 r은 반경이고 채우기는 원을 채우려는 16 진수 색상입니다. 그래픽 요소를 만드는 것은 그다지 쉬울 수 없습니다.

이제 우리는 우리가 배운 것을 가져와 우리의 색상 배열에 적용해야합니다. 추적해야 할 두 가지 변수는 원의 최대 크기와 이전 원의 크기입니다. 또한 크기 측면에서 문제가 발생하지 않도록하기 위해 $ scaler 변수를 사용하여 크기가 너무 커지지 않도록합니다.

변수 $ c 반경을 지속적으로 감소시킬 최대 크기입니다. 이후 $ c 너비 x 높이이며 원본 그래픽의 모든 픽셀은 원의 반경으로 표시됩니다. 다음 변수 $ prev 이전에 그린 원의 크기입니다. 이렇게하면 이미 원을 만든 픽셀 수를 기준으로 반경의 크기를 천천히 줄일 수 있습니다.

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

유사한 색상을 결합하지 않은 링 클로즈업

유사한 색상을 결합하지 않은 링 클로즈업

예제 출력을 보면 각 색상의 모든 작은 음영이 자체 링을 갖는 것을 빠르게 알 수 있습니다. 즉, 앤티 앨리어싱 된 텍스트는 하나의 대표 색상으로 축소되어야하는 많은 회색 음영을 생성합니다. 이렇게하면 링의 수가 줄어들지 만 동시에 어떤 색상이 가장 눈에 띄는 지 더 명확 해집니다. 우리는 단순히 가장 인기있는 5 가지 색상을 선택할 수 있지만 일반적으로 발생하는 것은 전체 스펙트럼을 나타내는 대신 동일한 색상의 비슷한 음영을 얻는 것입니다. 더 좋은 방법은 비슷한 값을 가진 색상을 가장 인기있는 이웃으로 홍보하는 것입니다. 이렇게하려면 SVG 출력 전에 삽입하는 간단한 함수를 작성해야합니다.

$rgb = reduceColors($rgb);

$ rgb 색상 목록을 전달하면 값과 빈도를 얻습니다. 아이디어는이 전체 목록을 반복하고 감소 된 색상으로 새 목록을 만드는 것입니다. 플러스 또는 마이너스 범위 75를 선택했습니다. 이것은 RGB 값 100,100,100이 25,25,25에서 175,175,175 사이의 가장 인기있는 색상으로 승격된다는 것을 의미합니다. 이 값을 더 관대하거나 더 엄격하게 조정할 수 있습니다. 당신의 가치에 따라, 당신은 더 많거나 적은 반지로 끝날 것입니다.

먼저, 가장 인기있는 색상이 먼저 표시되도록 배열을 역 정렬해야합니다. 이것은 우리가 가장 인기있는 것보다는 가장 인기있는 것으로 홍보하고 있음을 의미합니다. $를 반복하면서 rgb 배열을 통해 하위 루프도 필요합니다. $ temp 정렬. 이것이 우리가 전에 보지 못한 새로운 색상이라면, 우리는 그것을 새로운 $ temp 정렬. 그렇지 않으면 루프를 통해 첫 번째 $ 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와 그 출력을 스크립팅하는 방법을 아는 것은 직장과 놀이의 여러 측면에서 유용한 도구 상자의 또 다른 도구입니다.