📈 js 그래픽 검색 결과

해당 글 15건

WebGL이란 무엇인가?

WebGL은 3D를 그리기 위한 도구가 아니다. WebGL이란 벡터 객체를 개별 픽셀값으로 raterization하는 라이브러리이다. raterization라 함은 포토샵에서 많이 들어보았겠지만, 연속적인 값을 밭갈퀴로 긁듯이 픽셀로 만드는 것을 의미한다. 우리가 흔히 말하는 '화질구지'도 연속적인 벡터값을 raterization한 후 크게 확대해서 발생하는 일이다. WebGL의 표준 관리는 Khronos Group에서 하고 있어서 webgl 스펙을 다음 링크에서 확인할 수 있다. webgl 스펙 : https://www.khronos.org/registry/webgl/specs/ webgl과 별개로 opengl 관련 위키도 제공하고 있어 명확한 개념 이해에 유용한 정보가 많다. https://www.k..
📈 js 그래픽/WebGL과 three.js 2021. 11. 15. 16:54

브라우저에 적합한 애니메이션 구동하기 : requestAnimationFrame

딱히 canvas에서만 사용되지는 않는데, canvas에서 애니메이션을 그릴 때 주로 사용되긴 한다. 아래는 MDN에서 가져온 코드인데, timestamp가 찍힐 때마다 progress를 증가시키는 애니메이션이라 가정할 때, 분명 매우 많은 수의 이벤트가 일어날 것이다. 많은 수의 이벤트가 발생하는 경우에 취하는 일반적인 조치에선 (소켓, 리사이징, 폴링 이벤트 같은 경우가 있겠다) 의도에 따라 debounceTime, thrtottlingTime 등을 지정해주면 되는데 애니메이션의 경우 이런 식의 핸들링을 할 경우 '부드러움'이 부족하다. var start = null; var element = document.getElementById('SomeElementYouWantToAnimate'); elem..
📈 js 그래픽/🎨 Canvas 2021. 5. 20. 00:34

웹 시각화 라이브러리 모음집

chart | visx | victory | apexChart | etc js 말고 css로 그리는 차트 툴이 있다. 신박함. chartscss.org/docs/ Introduction Introduction Charts.css is a new open source framework for data visualization. It replaces traditional JS charting libraries with a CSS framework. Data visualization can improve user experience as graphical representation of data is usually easier to under chartscss.org React에서 사용하기 좋은, airbnb..
📈 js 그래픽/차트 2021. 4. 8. 01:43

React + chart.js

chart.js도 편리하지만 React와 함께 사용하면 state와 함께 좀 더 동적인 차트를 그릴 수 있습니다. 솔직히 편리하게 Reactive한 구성을 할 수 있기 때문에 React 쓰는 거죠. yarn add chart.js yarn add @types/chart.js // definitely type 존재. ts 사용하면 추가 설치 권장 여기서도 D3.js, quill.js에서 사용했던 것과 같은 문제에 봉착해야 합니다. 직접 Dom을 다뤄야 하는 거죠. 이럴 때 쓰라고 있는게 useRef이니 다음과 같이 사용해주면 됩니다. 한번 렌더 된 후에 context를 잡아줘야 하니 useEffect 문 내에서 그래프를 그려주면 되겠습니다. import React, { useRef, useEffect } ..
📈 js 그래픽/차트 2021. 1. 18. 08:44

chart.js 소개 및 간단한 사용법

chart.js www.chartjs.org/ Chart.js | Open source HTML5 Charts for your website New in 2.0 New chart axis types Plot complex, sparse datasets on date time, logarithmic or even entirely custom scales with ease. www.chartjs.org d3.js는 단순히 차트만 그리는 것이 아니라 svg, canvas를 data와 다루기 쉽게 만들어주는 저수준의 라이브러리이다. 반면 chart.js는 웹 상에 차트를 그리는데 특화된 라이브러리로, 일반적으론 d3.js보다 러닝 커브가 낮다고 알려져 있다. 이 외에도 jqPolot, hightcharts(상업..
📈 js 그래픽/차트 2021. 1. 18. 05:37

React + D3.js (5) Animation

아래 bar 그래프에 grow하는 듯한 애니메이션을 추가하겠습니다. 1. transform으로 원하는 애니메이션을 적용하고 transition으로 애니메이션을 구동하면 됩니다. svg .selectAll(".bar") .data(data) .join("rect") .attr("class", "bar") .attr("x", (value, index) => xScale(index)) .attr("y", -150) // 뒤집었으므로 svg viewBox의 height 만큼 빼워야 함 .attr("width", xScale.bandwidth()) .style("transform", "scale(1, -1)") // upside-down 뒤집기 .transition() // 애니메이션 적용 .attr("heigh..
📈 js 그래픽/react + d3.js 2021. 1. 18. 03:33

React + D3.js (4) Bar Chart

scaleBand scaleLinear는 선형적으로 매핑합니다. scaleBand는 명시적인 값의 범위(Band)에 값을 매핑합니다. github.com/d3/d3-scale/blob/v3.2.2/README.md#band-scales Band scales are like ordinal scales except the output range is continuous and numeric. Discrete output values are automatically computed by the scale by dividing the continuous range into uniform bands. Band scales are typically used for bar charts with an ordinal o..
📈 js 그래픽/react + d3.js 2021. 1. 18. 03:00

React + D3.js (3) Axes and Scales

Axis(축)와 Scale(데이터 스케일링) 전에 그려본 curved line graph에 axis를 그려주고, Scale을 통해 데이터 스케일링도 진행하여 더욱 가독성 있게 만들어 봅시다. 여기서 이해하고 넘어가야할 것이 axis, scale관련 메서드와 입니다. axis : github.com/d3/d3/blob/master/API.md#axes-d3-axis scale : github.com/d3/d3/blob/master/API.md#scales-d3-scale * 데이터 스케일링 d3 공식 문서에 따르면 scale이란 Encodings that map abstract data to visual representation. 입니다. 시각화를 위해 데이터를 추상적인 데이터 변환하는 과정입니다. 고등..
📈 js 그래픽/react + d3.js 2021. 1. 17. 17:19

React + D3.js (2) Line graph, Curved Line graph, Spline

svg path에 대해 어느 정도 알아둬야 합니다. darrengwon.tistory.com/1144 svg element : 기본 모양들 developer.mozilla.org/ko/docs/Web/SVG/Element SVG element reference - SVG | MDN developer.mozilla.org 기본 모양들 아래 외에 storke 등의 스타일링을 추가해줄 수 있습니다. path를 잘 쓰는 방법은 d 속성.. darrengwon.tistory.com Line graph line 객체를 들어서 path attr의 d로 넣어주면 됩니다. 아래 코드의 경우 (0, 24) (50, 30) (100, 45) (150, 70) (200, 26) 을 line으로 연결한 결과를 그리겠군요. im..
📈 js 그래픽/react + d3.js 2021. 1. 17. 13:04