📈 js 그래픽/react + d3.js 검색 결과

해당 글 5건

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

React + D3.js (1) D3 소개와 React와 접목

모든 Docs는 github wiki에 정리되어 있다. 웹 상에서의 시각화는 D3가 거의 표준처럼 여겨져서 이번 프로젝트에 사용하기 위해 배워본다. D3는 '저수준 라이브러리'다. 그래서 chart.js 처럼 뚝딱 차트를 만들어주는 것과 같은 일을 하지 않는다. 차트 외에 svg, canvas를 다루기 위해 d3.js를 사용할 때도 많습니다. 예를 들어 svg 수작업으로 로고를 넣을 때, 로딩 인디케이터를 css가 아니라 svg로 그릴 때 등 d3.js를 사용한 사례도 많습니다. github.com/d3/d3/wiki d3/d3 Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada: - d3/d3 g..
📈 js 그래픽/react + d3.js 2021. 1. 17. 06:19