Front-End/d3.js

D3.js SVG: 2차원 벡터 그래픽을 표현하는 XML 기반 마크업 언어

SVG SVG(Scalable Vector Graphics)란 XML 기반의 벡터 그래픽 형식으로, 웹 페이지와 어플리케이션에서 벡터 기반의 그래픽을 표현하기 위해 사용됩니다. HTML이 헤더, 표와 같은 요소를 제공하는 거처럼 SVG는 원, 사각형, 곡선 등을 그릴 수 있는 요소를 제공합니다. SVG 장점 SVG는 이미지가 아니기 때문에 크기를 조절하여도 이미지가 깨지지 않습니다. 또한 간단한 이미지 같은 경우 JPG나 PNG 같은 비트맵 파일에 비해 크기가 작습니다. 이러한 이유로 아이콘이나 로고에 많이 쓰입니다. 이미지 뿐만 아니라 JS와 CSS와 결합하여 애니메이션을 만들 수 있고, 차트와 그래프를 표현하여 데이터도 시각화할 수 있습니다. SVG 사용법 SVG 시작 태그를 먼저 작성해줍니다. 속성..

D3.js 데이터 시각화를 구현하기 위한 자바스크립트 라이브러리

D3.js D3.js는 "Data-Driven Documents"의 약어로, 데이터 시각화를 위한 무료 오픈 소스 JavaScript 라이브러리입니다. D3.js는 데이터를 가져와 이를 시각화 시켜주는 도구로써 그래프, 차트, 지도 대시보드 등 다양한 형태의 데이터 시각화를 구현하는데 도움이 됩니다. D3.js는 HTML 문서의 DOM 요소를 선택하고 조작하여 데이터를 시각화합니다. 또한 SVG를 사용하여 그래프, 차트 등의 요소를 그립니다. SVG란? SVG(Scalable Vector Graphics)란 XML 기반의 벡터 그래픽 형식으로, 웹 페이지와 어플리케이션에서 벡터 기반의 그래픽을 표현하기 위해 사용됩니다. HTML이 헤더, 표와 같은 요소를 제공하는 거처럼 SVG는 원, 사각형, 곡선 등을..