웹차트 만들기 1편에 이어 응용 편으로 파이그래프를 그려보도록 하겠습니다~! 파이그래프 그리기 먼저, 파이그래프의 전체적 윤곽을 잡는 코드와 설명입니다. [line6] D3 라이브러리를 사용하기 위해서 해당 스크립트 링크 주소를 넣어줍니다. [line11 ~ 15] 파이차트를 그려내기 위해서 고정적으로 사용할 변수들을 선언합니다. - 파이차트를 그려내기 위한 바깥쪽반지름(outerRadius), 안쪽반지름(innerRadius) - d3.scale.category20() 으로 d3 표준색상을 지정합니다. [line17 ~ 22] 파이차트에서 사용할 데이터를 dataset변수에 할당합니다. [line24 ~ 30] 해당라인의 코드는 아래와 같은 구조로 후에 그리게 될 파이차트를 감싸는 태그를 만듭니다. s..

D3.js란? 안녕하세요. 자바스크립트 라이브러리 중 하나인 D3.js에 대해서 소개해드리려고 합니다. D3.js란 자바스크립트 라이브러리를 처음 들어보신 분도 또는 자주 사용해보셨던 분들도 계시겠지만, 이번에는 처음 접해보시는 분들을 위해 조금 자세하고 쉽게 설명해드리도록 하겠습니다. (이미 자주 사용하시고 저보다 더 많은 지식을 알고 계시는 분들에게 미리 양해 말씀드립니다^^) 우선 D3는(D3.js를 줄여서 D3라고 함) 완전히 오픈소스이며, Data-Driven-Documents의 약자로 D가 연속으로 3번 들어가서 일명 D3라는 명칭으로 부르며, 웹브라우저상에서 동적이고 인터렉티브한 정보시각화를 구현하기 위한 자바스크립트 라이브러리입니다. D3의 장점은 새로운 언어 형태가 아니라 자바스크립트 문..

안녕하세요. HTML5 기반의 데이터 인포그래픽 컴포넌트 webPonent CHART의 Visual Radar Chart 추가 버전 업그레이드 소식을 안내드립니다. 추가된 Radar 차트의 기능 및 사용환경은 아래와 같습니다. (Radar CHART) - 여러 개의 데이터를 한번에 보여주기 유용 - 데이터 개수에 따라 다각형 세팅 가능 - 차트 눈금 개수 지정 가능 - Tick 모양(원, 사각형, 삼각형, 별, 다이아몬드) 설정 가능 - Tooltip을 이용해서 커서가 틱을 가리킬 때 해당 데이터를 불러올 수 있음 - 시계열 사용 가능 - 애니메이션 효과 사용 가능 - 범례 사용 가능 - 데이터의 크기를 패턴으로 나타낼 수 있음 (사용환경) - 서버: 모든 서버 - 언어: 개발언어에 종속되지 않음(htm..

사이버이메지네이션의 사업분야는 '웹시스템 통합/운영, 솔루션 개발 및 컨설팅'이며, 금융권에 특화된 프로젝트 수행 경험으로 국내 굴지의 대형 금융사 프로젝트 레퍼런스를 대거 확보하고 있습니다. 1996년 설립이래 회사의 많은 자원을 R&D에 지속적으로 투입하고 있으며, 프로젝트 경험과 노하우를 바탕으로 신제품 개발 및 기존 제품의 완성도를 높이는 연구를 수행하고 있습니다. 금융권에서 좋은 평가를 받고 있는 이유는,다양한 프로젝트 경험을 토대로 금융권 특유의 복잡하고 보안성 높은 시스템을 안정적으로 처리하며 기술력을 인정받았기 때문으로, 이는 경험이 풍부한 기획, 디자이너, 개발자 등의 전문 인력과 더불어 자체 개발한 솔루션이 있었기에 가능했습니다. 솔루션 특화 업체는 아니지만, 지속적인 R&D를 통해 웹..

안녕하세요. 오늘은 사이버이메지네이션의 새해 내부 프로젝트로 진행된 솔루션 홈페이지의 런칭 소식을 전해드리고자 합니다. 솔루션 홈페이지는 금융권 프로젝트 수행 경험과 기술력을 바탕으로 자체 개발한 솔루션을 소개하는 사이트로 자사의 bizXpress(CMS)를 활용하여 개발하였으며, 2월 말 오픈하여 솔루션 정보를 제공해드리고 있습니다. 솔루션 홈페이지에서 소개해 드리고 있는 제품은, 웹콘텐츠관리(bizXpress), API서버(DBridge), 웹프레임워크(coreFRAME, coreFRAME WTS Edition, coreSPRING), UI컴포넌트(webPonent CHART ∙ GRID ∙ VIRTUAL KEY, coreSTOCKCHART), 텍사노미(Semantrix TMS, OntoMetrics..

[웹포넌트 차트] webPonent Visual Gauge Chart webponent CHART 2.0.6 버전이 릴리즈 되었습니다. (짝짝짝)2.0.6버전에 맞추어 새롭게 추가된 Gauge Chart에 대해 작성해보려 합니다. gauge chart는 크게는 원형 게이지(angular), 선형 게이지(Linear), 실린더(cylinder), 온도계(thermometer) 이렇게 크게는 4가지, 세부적으로는 8가지 타입으로 구성되어져 있습니다. 디자인 테마로는 기본 디자인(Basic), 블랙 디자인, 라이트 그레이 디자인 3가지 종류가 있습니다. 여기에 option과 style을 주어 원하는 색상의, 모양의 게이지를 만드실 수 있습니다.예를 들면, 하나의 실린더도 필요에 맞게, 나만의 스타일로 변경 가..

HTML5 로 데스크탑 어플리케이션 만들기3 안녕하세요. CX 사업본부 MD 왓썹입니다.지난 포스팅에서는 node-webkit 을 이용하여 간단한 데스크탑 어플리케이션을 만들어 테스트해보는 시간을 가졌는데요. 이번 포스팅에서는 node-webkit이 실제 프로젝트에 적용되어 어떻게 사용되는지 알아보도록 하겠습니다. 1. 프로젝트 소개먼저 node-webkit 을 적용할 프로젝트는 웹포넌트 팀에서 개발한 webPonent-publisher 로 조금은 생소하지만 아주 편리한 웹 코드 편집 툴 입니다. 웹포넌트 퍼블리셔는 프로토타입 및 샘플 소스 작성 등에 특화된 실시간 웹 코드 에디터로, 웹포넌트 차트&그리드의 각 기능에 해당하는 다양한 샘플 코드 (HTML, CSS, JS) 를 사용자에게 제공하고 있으며,..

TypeScript란?TypeScript는 대형 자바스크립트 애플리케이션에 적합한 대안 언어이다. TypeScript를 활용하여 개발하여도 기존의 소프트웨어 컴포넌트와 자바스크립트 라이브러리의 동작 방식과는 충돌하지 않는다. 또한, 동적인 모듈 로딩을 지원하여 네이밍 충돌 문제를 줄일 수 있게 해주며, 추가된 타입 체계를 바탕으로 생산성을 높여주는 여러가지 툴과 사례(정적 타이핑, 심볼 기반 네비게이션, 구문 완성, 코드 리펙토링 등)를 활용할 수 있다.TypeScript는 ES5 (ECMAScript 5) 문법의 상위 집합(Super Set)이다. 모든 자바스크립트 프로그램은 TypeScript 프로그램이기도 하다. TypeScript 컴파일러는 TypeScript 문법을 자바스크립트 문법으로 변환시켜..

◆ 결혼 비용 얼마나 들었나?…3,000만~6,000만 원이 제일 많아 결혼할 때 실제로 지출한 금액은 얼마나 될까. 전체 응답자 중 3000만~6000만 원 사이의 돈을 썼다는 응답자가 34.9%로 가장 많았고, 3000만 원 미만이 20.9%로 두 번째로 많았다. 전체 응답자의 절반 이상이 결혼식에 6000만 원 미만의 돈을 썼다. 초기 설정이 필요합니다. 결혼할 때 본인과 부모님(혹은 본인)이 실제로 지출한 금액 차트 by http://www.webponent.com/ 반면 1억~1억5000만 원 사이의 금액을 썼다는 응답자도 9.8%에 달했으며, 이들을 포함해 1억 원 이상 지출한 응답자는 19.6%에 달했다. 5명 중 1명은 결혼식에 1억 원 이상 쓴 것이다. ◆ 부모님 지원 안 받은 결혼 10..

웹포넌트 그리드와 차트는 웹 상에서 표현된 데이터를 Excel, CSV, PDF 등의 파일로 추출하는 기능을 가지고 있습니다. 데모 보러가기 클릭!! 그 중 PDF를 추출하는 기능은 PhantomJS 라는 툴을 이용하여 만들었는데요, PDF추출 기능을 구현하며 처음 사용해 된 PhantomJS! 세상 모든것들이 그렇듯 잘 사용하기만 하면 아주 유용한 녀석입니다. 만들면서 많은 시행착오를 겪게 되었는데요, 앞으로 몇 회에 걸친 글을 통해 구현하면서 얻게 된 Know How와 Tip들을 공유해보도록 하겠습니다. 그 첫 시간으로 PhantomJS란 과연 무엇인지에 대한 간략한 설명과 함께 기본적인 Screen capture에 대해 설명하도록 하겠습니다. 1. PhantomJS 란? PhantomJS 공식 홈페..