[D3.js] Timer 함수 오늘은 d3.timer()함수에 대해 간단히 실험을 해볼까 합니다. 이 함수는 간단하면서도 데이터 시각화에 유용한 함수입니다. 그러면 어떻게 동작하는지 간단히 알아 봅시다. 1. d3.timer 함수 참조 : d3.timer(callback[, delay[, time]]); 위와 같이 타이머 함수의 기본 구조입니다. 간단히 타이머

[D3.js] Britecharts 사이트 소개 D3.js를 공부하다가 재밌는 사이트를 발견했네요. Britecharts 사이트 인데 D3.js 기반의 라이브러리 API 함수를 제공해주는데 업그레이드 형태의 라이브러리인 것 같아요. 차트 시각화가 좀 더 정교하고 멋진 표현을 쉽게 만들 수 있게 해주는 것 같은데 아직 사용해 보지 않았고 코딩을 봐서는 꽤 깔끔하게

[D3.js] 축(Axis) 함수 차트을 보면 양쪽 사이드에 X축과 Y축을 그리는데 D3.js에서는 이 축을 그리는 함수를 제공해 줍니다. 그래서 오늘은 이 X,Y축을 그려보는 실험을 간단히 해보도록 하겠습니다. 1. 축(Axis) 함수 기본 4개의 함수를 살펴보도록 하죠. d3.axisLeft () - 왼쪽 수직 축을 생성 d3.axisRight () -

[D3.js] Color Scale 함수 참고자료 : (인용) 지난 시간 Color 함수에 대해 살펴 보았습니다. 오늘은 Color에서 더 나아가 Categorical Colors 함수들에 대해 알아보고자 실험을 하였습니다. 1. Categorical Colors 변천 사 Categorical Colors 함수들이 각 버전 v3, v4, v5 별로 어떻게 변경이

[D3.js] Color 함수 참고 : D3.js API - Color 관련 scale 함수들을 다룰까 고민하다가 그냥 D3.js API에 나와 있는 함수들을 간단히 실험 해보겠습니다. 1. rgb(r,g,b) 함수 D3코딩 : ** d3.rgb(r,g,b);** Red, Green, Blue 값으로 RGB Color를 생성합니다. 우리가 잘 아는 기본 rgb()함수로

[D3.js] 추가 Scale 함수 참고 : [D3.js] Scale 함수 사용 [D3.js] ScaleLinear 함수 Scale 관련 함수들을 정리하고 있습니다. 지난시간에 scaleLinear, scalePow, scaleLog 함수에 대해서 간단히 실험 하였고 오늘은 그외 다른 Scale 함수들을 몇개만 더 실험 해볼까 합니다. 과거 제 블로그에 정리하다가

[D3.js] scaleLinear 함수 참고 : [D3.js] Scale 함수 사용 scale 관련 함수들이 D3.js에 보시면 다양한 함수들이 나와 있습니다. 그중에서도 대표적인 함수가 scaleLinear 함수이고 위 참고 링크 예제를 보시면 scaleLinear 함수를 사용하여 Scale를 설정하는 방법이 나와 있습니다. 오늘은 이 scaleLinear

[D3.js] 데이터 배열 다룰 때 유용함 함수 예전에 제 블로그에 정리했던 배열 함수들인데 이번 D3.js를 정리하면서 다시 스팀 블록에 연재해볼까 합니다. 데이터를 다룰 때 사용되는 기본 함수들인데 알아 두시면 나중에 유용하게 쓸 수 있을 거라 생각 됩니다. 지난시간에 max()함수를 이용하여 읽어 온 데이터 중 가장 큰수를 찾아 낼 수 있었습니다. 이렇게

[D3.js] Scale 함수 사용 D3.js 공식 홈페이지 : 참고 : [D3.js] CSV, TSV, JSON, XML 시각화 지난시간에 이여 CSV 데이터 파일을 읽어 Circle 모양으로 시각화 코딩을 했었습니다. 단순히 좌표(X,Y) 데이터 값을 통해 캔버스 위치에 Circle을 그리는 명령만 내렸는데 이제 좀 더 디테일적으로 Circle의 Scale을

[D3.js] 코딩의 가독성 높이기 D3.js 공식 홈페이지 : 참고 : [D3.js] CSV, TSV, JSON, XML 시각화 한번에 쭉 명령어를 나열하는 것보다 함수 단위로 쪼개서 명령 동작을 구분하여 가독성을 높이는 작업을 한번 해볼까 합니다. 오늘 실험하는 코딩법은 그냥 하나의 방법일 뿐 보는 관점에 따라 좋은 방법일 수도 아닐 수도 있습니다. 더

[D3.js] CSV, TSV, JSON, XML 시각화 오늘은 지금까지 CSV, TSV, JSON, XML 데이터 파일을 읽어오는 실험만 하였습니다. 정확히 해당 데이터 값을 콘솔창에서 확인 햇는데 이번에는 특정 이미지화 해서 데이터를 시각화 하는 실험을 하겠습니다. 1. CSV 데이터 파일 시각화 지난시간에 읽은 CSV 데이터 파일을 circle 모양으로

[D3.js] XML 파일 읽는법 지난시간에는 CSV, TSV, JSON 파일을 읽어 보았는데 오늘은 마지막으로 XML 파일을 읽어 보도록 하죠. 실험은 ATOM 편집기에서 이루어 집니다. 웹브라우저 설정이 귀찮아서 그냥 ATOM 편집기로 실험하게 되었네요. 1. XML 실험 데이터 실험 데이터는 간단하게 아래와 같은 데이터를 만들었습니다. [data.xml]

[D3.js] JSON 파일 읽는법 지난시간에는 CSV, TSV 파일을 읽어 보았는데 오늘은 JSON 파일을 읽어 보도록 하죠. 실험은 ATOM 편집기에서 이루어 집니다. 웹브라우저 설정이 귀찮아서 그냥 ATOM 편집기로 실험하게 되었네요. 1. JSON 실험 데이터 실험 데이터는 간단하게 아래와 같은 데이터를 만들었습니다. [data.json] [ {

[D3.js] TSV 파일 읽는법 지난시간에는 CSV 파일을 읽어 보았는데 오늘 TSV 파일을 읽어보는 실험을 하도록 하겠습니다. TSV 파일도 버전 4와 버전 5에서 읽는 법이 CSV 파일을 읽는 방식처럼 변경 되었습니다. 두 가지 방식으로 같이 간단히 어떻게 읽어오는지 살펴보도록 하죠. 1. ATOM 편집기에서 실험 TSV 파일을 읽는 실험은 ATOM 편집기에서

[D3.js] CSV 파일 읽는법 Data 형식이 CSV파일로 되어 있을 때 CSV 파일을 D3.js에서 읽는 실험을 간단히 해보도록 하죠. 엑셀로 DB작업을 했을 때 그 파일을 CSV 파일형식으로 변환을 많이 합니다. CSV 파일 형태로 된 데이터를 많이 다루게 됩니다. D3.js에서 CSV 파일을 어떻게 읽어오는지 알아두시면 좋겠죠. 1. 크롬 웹브라우저에서

[D3.js] 버전에 따른 사라진 함수 복원 예전에 처음 D3.js를 공부할 때 제일 애먹은 부분이 버전 별 함수가 변경 되거나 또는 사리지는 함수들 때문에 유튜브 동영상 강좌를 보면서 현재 버전을 공부할 때 에러와의 싸움에서 무지 답답하고 귀찮았습니다. 오늘 다루는 사라진 함수를 사용하고 싶을 때 복원하는 방법을 다루고자 합니다. 1. d3.svg.diagonal()

[D3.js] HTML의 CSS CSS를 알아두면 D3.js를 사용할 때 편합니다. CSS은 HTML의 각 태그들의 스타일을 지정해 줍니다. 태그의 스타일을 D3.js 함수로 지정하여 멋지게 태그의 스타일을 만들기 때문에 미리 CSS의 개념을 잡아 놓으시면 나중에 D3.js에서 사용하실 때 효율적으로 코딩을 할 수 있습니다. 1. CSS(Cascading Style

[D3.js] HTML의 SVG 태그 D3로 코딩 지난 시간에는 HTML SVG 그리기 태그들을 이용하여 기본 태그와 속성들을 살펴 보았습니다. 이제는 D3.js 함수들을 사용하여 지난 시간의 배운 태그들을 표현을 해보는 시간을 갖도록 하겠습니다. 1. SVG 태그 <svg width="300"

[D3.js] HTML의 SVG 태그 D3.js를 사용하기 위해서는 HTML에서 사용되는 태그들을 기본적으로 알아야 합니다. 그중에서도 SVG 태그는 꼭 숙지해 두셔야 나중에 차트와 같은 데이터 이미지화 할 때 효율적으로 사용할 수 있습니다. 오늘은 간단히 SVG에 자주 사용되는 태그들을 중점적으로 살펴보겠습니다. 1. 태그 SVG를 알자 웹상에서 그림을 그릴

[D3.js] 애니메이션 효과 순환 동작 지난 시간에 post 애니메이션 효과편으로 간단한 동작 실험을 했었죠. 오늘은 순환 호출 함수를 통해 애니메이션 효과 동작을 실행하는 원리를 살펴보고자 합니다. 1. 순환 호출 함수 원리 순환 호출이란 뭘까요. A라는 동작을 수행을 끝내고 난 뒤에 다시 A라는 동작을 호출하여 수행하는 반복 수행을 하는 것을 말합니다.