profile
Front-end 개발 공부일지
post-thumbnail

[ Data Visualizing - D3.js ] Tree Chart 만들기

기본구조 나의 스킬 스택을 Data로 활용해 Tree 구조의 차트로 만들어 보자 image.png Meterialize를 사용해 기본적인 앱의 틀을 잡아주고 모달을 띄워 데이터를 추가할 수 있게 한다. Firebase Data Firebase에 데이터를 저장해 실시간으로 반영하려고 한다. HTML에 input과 firebase를 연결해주고 그래프를 그...

2019년 10월 22일
·
0개의 댓글
post-thumbnail

[ Data Visualizing - D3.js ] Interactive Line Chart 만들기

기본 셋팅 각각의 버튼을 클릭하면 해당하는 데이터에 따라 다른 차트를 보여주려고 한다. html에는 버튼과 데이터를 추가할 input, 차트가 그려지는 canvas로 구성했고, 기본적인 레이아웃은 meterialize로 스타일링을 해줬다. Firebase 연동 html 파일에 firebase를 연결해준다. 그리고 Form을 제출하면 firebase에...

2019년 10월 21일
·
2개의 댓글

[ Data Visualizing - D3.js ] Data Hierarchy

데이터 계층구조 image.png >Data 계급 부모 관계를 포함하는 구조화된 데이터 다른 말로 하면 서열이 되는 것. image.png 데이터에서 이와 같은 계층 구조를 가질 때, 구조에서 다른 것들을 노드라고 부른다. 맨 위에 있는 것은 루트 노드라고 불린다. Data structure consideration 데이터 구조 고려사항 D3의 ...

2019년 10월 18일
·
0개의 댓글
post-thumbnail

[ Data Visualizing - D3.js ] Interactive Pie Chart 만들기

Pie Chart image.png Firebase에 데이터를 저장해서 실시간으로 차트에 반영되는 Pie 차트를 만들어 보자. html 파일에 input 을 data와 연결해준다. index.js submit을 통해 입력한 값이 firebase에 잘 저장이 된다. 이제 data를 사용해 pie 차트를 만들어 보자 graph.js image.png...

2019년 10월 17일
·
0개의 댓글

[ Data Visualizing - D3.js ] Bar chart 만들기

Barchart image.png Json Data barchart.js 차트에 적용한 Data menu.json image.png Firebase Data Json data를 사용해서 만들었던 Barchart를 Firebase db에 연동해서 같은 차트를 만들어 보자. image.png Firebase에 데이터베이스를 생성해주고 스

2019년 10월 16일
·
0개의 댓글

[ Data Visualizing ] - D3.js 란?

D3.js Data - Driven Documents. JavaScript 데이터 중심의 문서 (Data - Driven Documents)의 약자로 자바스크립트 기반의 라이브러리 언어이다. 사용자가 입력한 시각화 규칙을 바탕으로 데이터를 반영해 시각화 결과물을 생성한다. 데이터 시각화 프레임워크로 잘 알려져 있고 HTML5의 SVG(Scalable V...

2019년 10월 12일
·
0개의 댓글