# visx
[실용적인 데이터 시각화 for FE] - 2. 라인/파이/바 차트
본 시리즈는 프론트엔드 엔지니어로서 데이터 시각화에 대한 실용적이고 실무적인 내용을 다룬 글로 개인 경험을 토대로 작성되어 다소 주관적인 내용을 내포하고 있습니다. !codesandbox[2-chart-examples-pm1l8o?fontsize=14&hidenavigation=1&theme=dark] 기본 개념 바 차트 (Bar chart) 바 차트는 여러 항목이 존재할 때 그 수량을 한 눈에 비교하는데 특화되어있습니다. 사람은 높이 차이에 민감해 최고 최저에 대한 강조함에 있어 적합합니다. 라인 차트 (Line chart) 데이터의 변화를 직관적으로 파악하는데 강점이 있는 차트입니다. 최대, 최소보다는 증가, 감소에 초점이 맞춰져있습니다. 보편적으로 x축에는 시간과 관련된 dimension들이 들어가게됩니다. 파이 차트 (Pie chart) 비례 관계를 표현하는데 적합합니다. 공간이 한정적인만큼 사용에 주의가 필요합니다. 흔히 6가지 이상의
20210630 - visx, react
https://github.com/airbnb/visx/discussions/1147 visx 작업 중 scaleLinear를 이용한 yScale의 최소값이 0으로만 지정되는 오류가 생겼다.. 아무리 domain을 0과 데이터의 최대값으로 설정해봐도 0이 사라지질 않아서 찾다보니 이미 깃헙에 이슈가 파져있더라 scaleLinear 메서드는 기본값으로 zero:true가 돼있어 최소값은 늘 0이다.
20210202 - react, firebase, visx
https://velog.io/@ceres/React-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%97%85%EB%A1%9C%EB%93%9C-axios-%EC%82%AC%EC%9A%A9 [React] 이미지 업로드 기능 (axios 사용) https://www.educative.io/edpresso/file-upload-in-react File upload in React https://negabaro.github.io/archive/react-file-upload react에서 파일업로드|image preview만들기|기존에 등록된 이미지 우선표시 https://velog.io/@syj9484/React-axios%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%B4-%EB%8C%93%EA%B8%80%EC%97%90-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%97%85%EB%A1%9C%EB%93%9C-%ED%95%B4%EB%B3%B
차트 라이브러리 리뷰 (visx, victory, chart.js)
최근에 어쩌다보니 다양한 곳에서 차트를 그릴 일들이 빈번하게 발생해 다양한 차트 라이브러리를 사용하게 되었습니다. > 본 글은 이 라이브러리는 내부적으로 구조가 이래서 이게 좋아! 가 아닌 한 명의 평범한 유저 입장에서(소비자에 가까운 느낌으로) 이런 경험들을 했고 어떤 장단점이 있었는지 주관적으로 기록해보고자 합니다. Victory 가장 먼저 빅토리입니다. >Victory is an opinionated, but fully overridable, ecosystem of composable React components for building interactive data visualizations. The following tutorial explains how to set up a b
visx react를 위한 차트 라이브러리
visx a collection of expressive, low-level visualization primitives for React visx는 airbnb 팀이 D3.js와 react를 사용해 만든 라이브러리다. 기본적으로 러닝커브가 높은 d3.js보다 훨씬 쉽고, 잘 만들어진 sample들이 많아 활용하기 쉽다. 이번 프로젝트에서 차트가 필요한 부분들이 여럿 있었고, visx를 사용해보기로 결정했다. visx의 장점 번들 사이즈로 나눠진 패키지. 작은 규모의 프로젝트로 시작할 수 있고, 내가 원하는대로 커스터마이징 할 수 있다. CSS-in-JS, 상태 관리 시스템, 애니매에션 라이브러리 등 여러가지를 추가해서 사용할 수 있다. 단순한 차트 라이브러리가 아니다. 자유도가 높아 나만의 케이스로 작업하고, 컨트롤 할 수 있다. react 친화적이다. ![](https://images.velog.io/images/badbeoti/post/ad