반응형
반응형

Sunburst Chart

 

Sunburst Chart는 계층적 데이터를 시각화하는 데 사용되는 원형 차트입니다.

데이터의 루트는 중앙에 있고, 계층적으로 데이터를 표현하며, 내부에서 외부로 확장됩니다.

각 섹션은 데이터를 크기별로 구분하여 보여줍니다.

 

"""
    Sunburst Chart는 계층적 데이터를 시각화하는 데 사용되는 원형 차트입니다. 
    데이터의 루트는 중앙에 있고, 
    계층적으로 데이터를 표현하며, 내부에서 외부로 확장됩니다. 
    각 섹션은 데이터를 크기별로 구분하여 보여줍니다.
"""

import plotly.express as px
from PIL import Image

# 계층적 데이터 정의
data = dict(
    labels=["Root", "Child 1", "Child 2", "Grandchild 1", "Grandchild 2", "Grandchild 3"],
    parents=["", "Root", "Root", "Child 1", "Child 1", "Child 2"],
    values=[10, 5, 5, 2, 3, 5]
)

# Sunburst Chart 생성
fig = px.sunburst(
    data,
    names='labels',
    parents='parents',
    values='values',
    title="Sunburst Chart Example"
)

# fig.show()

# Sunburst Chart를 이미지로 저장
image_path = "sunburst_chart_001.png"
fig.write_image(image_path, width=800, height=600)
print(f"Sunburst chart saved as '{image_path}'")

# 저장된 이미지 출력
image = Image.open(image_path)
image.show()  # 기본 이미지 뷰어로 열기

 

 

 

반응형
반응형

https://www.chartjs.org/

 

Chart.js | Open source HTML5 Charts for your website

New in 2.0 New chart axis types Plot complex, sparse datasets on date time, logarithmic or even entirely custom scales with ease.

www.chartjs.org

 

https://www.chartjs.org/docs/latest/charts/bar.html

 

Bar · Chart.js documentation

No results matching ""

www.chartjs.org

 

반응형
반응형

ofcgwt



http://code.google.com/p/ofcgwt/



Overview


The OFCGWT project provides a simple to use chart widget for GWT based on Open Flash Chart 2. The library includes the needed flash insertion, update and manipulation methods for the chart widget. It also includes a POJO model for the chart elements and components that assist in the generation of the JSON to provide the correct chart data for OFC 2.x API.


The project has released a beta of version 2.x and a stable 1.3.x release - with over 12,000+ downloads !!


Note: A beta of v2.0 (GWT 1.6 support) does contain breaking API for those coming from the 1.X version of OFCGWT - it contains new refactored events and a new chart factory, better attach/detach support, new charts features(new Horizontal Stack Bar Chart, enhanced animations based on OFC Ichor with DZ fixes and patches).


Current Status


  • 2009-Apr-21: Version 2.0.1 beta released.


Demo


  • New Std Demo - Added Transparent Image Bar Chart
  • Events Demo - onClick Events Demo showing drill-down


Note: Source code for both demos and more is available in the SVN (click the source tab above and browse to the /trunk/test folder).





반응형
반응형

Paths.js: Create SVG shapes for geometric shapes

차트인듯 차트아닌 차트같이.

Paths.js is a JavaScript library for generating SVG paths that can then be used along with a template engine like Mustache or Handlebars for displaying those SVG shapes in the browser. It offers three APIs, of increasing abstraction.

paths.js

반응형
반응형

 

http://helloworld.naver.com/helloworld/651829

 

기존의 상용 차트 라이브러리와 오픈소스 차트 라이브러리는 다양한 종류의 차트를 구현할 수 있지만 데이터를 시각적으로 표현하는 데만 중점을 둡니다. 그렇기 때문에 스크린 리더 등의 보조 기기로 차트에 접근하면 스크린 리더가 차트 자체를 이미지로 판단해 전달하려는 실질적인 데이터는 읽을 수 없습니다.

네이버에서 차트 라이브러리를 개발하게 된 계기는 네이버 사이트의 접근성 현황을 효율적으로 표현할 방법이 필요했기 때문입니다. 지침별 수준을 수치화하는 폴리곤 모양의 레이더 차트가 필요하다고 판단하여 오픈소스 기반의 차트를 사용하려 했습니다. 그러나 원하는 정보를 표현할 수 있는 차트를 제공하는 라이브러리를 찾지 못해 내부에서 직접 차트 라이브러리를 개발하기로 결정했습니다.

개발 초기에는 폴리곤 형태를 표현할 수 있는 레이더 차트의 개발만 염두에 두었습니다. 이후 다른 형태의 정보를 효율적으로 표현할 수 있는 Polar Pie 차트, 비교 차트 등 기존의 라이브러리에서 찾아볼 수 없는 여러 형태의 차트를 추가해 종합 차트 라이브러리인 Nwagon(http://html.nhncorp.com/nwagon)을 개발했습니다. 그리고 여러 곳에 널리 사용되기를 바라는 마음으로 Nwagon을 NULI 사이트(http://html.nhncorp.com)에 오픈소스로 공개했습니다.

03bc1dc28bbb1da3013d5f722c7577da.png

'Nwagon'이라는 이름은 접근성을 뜻하는 'web accessibility'와 라이브러리 개발의 계기가 된 'polygon'의 'gon'을 조합해 만든 이름입니다. 이름이 뜻하는 대로 추가 작업이 없어도 차트를 볼 수 없는 사용자들에게 동일한 정보를 제공할 수 있도록 접근성을 향상시킨 차트 라이브러리입니다.

 

http://html.nhncorp.com/nwagon

 

 

Introduce

네이버 서비스의 접근성 현황을 표현하기 위한 방법 모색 중, 지침별 수준을 수치화 하는 폴리곤 모양의 레이다 차트 구현의 필요성을 기반으로 nWagon 차트 개발은 시작되었습니다.

개발 전 고려된 무료기반의 라이브러리들은 저희가 필요로 하는 필수 기능들을 표현한 사례가 없었고, 이를 위해 간단하면서도 사용하기 쉬운 자체 차트 라이브러리를 개발하게 되었습니다. 차트의 이름은 차트 개발의 시발점이 된 Web Accessibility의 약자인 WA와 차트의 모티브가 된 폴리곤의 gon을 조합한 wagon으로 네이버의 N과 결합하여 최종 이름을 nWagon으로 명명하였습니다. 더불어, 마차(wagon)을 탄 것과 같이 편한하게 웹 서비스를 이용할 수 있도록 하기 위한 저희 접근성팀의 열정을 담고 있기도 합니다.

Key Points

  • 손쉬운 사용
    JSON 형태로, 라이브러리 사용시 한번의 function call만으로 차트가 완성되는 용이성
  • 간결한 디자인
    컬러와 크기 등 조절의 간편함
  • 빠른 속도
    SVG를 이용하여 랜더링 속도가 빠르며 DOM을 이용한 event나 CSS Selector 적용 가능
  • 크로스브라우징
    IE9를 포함한 주요 브라우저 지원 가능(Chrome, Firefox, Safari, IE since v.9)


 

View Example

 

 

 

반응형
반응형


굿랩스(http://labs.good.is)


인포메이션 그래픽(Information graphics) 또는 인포그래픽(Infographics), 뉴스 그래픽(News graphics)은 정보, 자료 또는 지식의 시각적 표현이다. 정보를 구체적, 표면적, 실용적으로 전달한다는 점에서 일반적인 그림이나 사진 등과는 구별된다. 복잡한 정보를 빠르고 명확하게 설명해야 하는 기호, 지도, 기술 문서 등에서 사용된다. 차트, 사실박스, 지도, 다이어그램, 흐름도, 로고, 달력, 일러스트레이션, 텔레비전 프로그램 편성표 등이 인포그래픽에 포함된다.

3f61ae2d
95a6b237


[출처]

Tech It!

All about IT Trend

http://techit.co.kr/2919

반응형

+ Recent posts