Data Visualizing

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

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

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

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

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

마케팅의 경우 사용자의 반응을 즉각적으로 확인하고, 그에 따른 적절한 행동을 취할 때 마케팅 효율을 높일 수 있습니다. 시각화는 이런 통찰을 가능하게 합니다. 통찰은 단순한 과정이 아니라 내부 요인 간의 관계를 통해 대상들 사이에 숨겨진 관계를 찾는 것을 의미합니다. 이 관계를 찾으면 과거를 알 수 있고, 현재가 보이며, 미래에 대해 짐작할 수 있습니다. ...

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