데이터 시각화 설계: 기본 차트에서 전문가 수준으로 나아가는 원칙과 기법
1. 시각적 설계의 본질
데이터 시각화를 처음 접할 때 대부분은 라이브러리의 기본 설정으로 그래프를 생성한다. 데이터는 정확하고 결론도 명확하지만, 뭔가 전하다. Matplotlib의 기본 스타일로 그린 선형 차트—일정한 선 두께, Tableau 10 순환 색상, 우측 상단의 정돈된 범례. 기능적으로는 완벽하지만 시각적으로는 평범하다. 이것이 "작동하는" 차트다. 반면 "설 ...
9월 16일 13:10에 게시됨
Vue 3 Composition API로 ECharts 차트 컴포넌트 재사용성 높이기
데이터 시각화 프로젝트나 대시보드를 구축할 때, 유사한 형태의 차트를 반복해서 구현하는 것은 비효율적입니다. Vue 3의 Composition API와 ECharts를 결합하여 재사용 가능한 차트 컴포넌트를 캡슐화하는 방법을 살펴보겠습니다.
부모 컴포넌트에서의 활용
캡슐화된 차트 컴포넌트를 부모 컴포넌트에서 호출할 때는 필요한 데이터와 스타일 속성을 Props로 전달합니다. ...
7월 9일 17:55에 게시됨
ECharts에서 데이터 표시 문제 해결하기
최근 ECharts를 사용하여 차트를 구현하는 과정에서 특정 설정을 변경하면 막대 그래프가 표시되지 않는 문제가 발생했습니다. 특히, X축의 글꼴 색상을 수정한 후에 이 문제가 나타났으며, 이를 해결하기 위해 여러 시도를 거쳤습니다.
이 문제는 pnpm install echarts 명령어로 라이브러리를 설치한 이후에 발생했으며, 일부 코드를 추가하거나 수정할 때 특정 임포트 문 ...
6월 26일 19:50에 게시됨
웹 기반 데이터 시각화 기초: Canvas, SVG 및 ECharts 활용
Canvas를 사용한 그래픽 그리기
HTML5의 <canvas> 요소는 자바스크립트를 통해 그래픽을 동적으로 생성할 수 있는 도구입니다. 기본 크기는 300×150픽셀이며, 스타일 속성이 아닌 width와 height 속성으로 크기를 지정해야 합니다. 캔버스 내부에 텍스트나 HTML 요소를 직접 삽입해도 렌더링되지 않으며, 모든 그리기는 JavaScript를 통해 수행되어야 합니다.
<c ...
6월 22일 01:21에 게시됨
Flask 기반 재난 구호 물자 관리 시스템 개발
시스템 아키텍처 구성
백엔드는 Flask 프레임워크를 기반으로 하며, 데이터베이스 연동에는 SQLAlchemy를 사용한다. 프론트엔드는 Bootstrap 또는 Vue.js로 구현되며, 전체 시스템은 물자 관리, 구조팀 정보, 피해 지역, 배분 이력이라는 네 가지 주요 모듈로 구성된다. RESTful API를 통해 프론트와 백엔드를 분리하고, JWT 토큰을 이용한 인증 방식을 적용한다.
데이터 ...
5월 25일 22:12에 게시됨