728x90 Programming/D3.js 썸네일형 리스트형 [01. D3.js] 003. D3-Axis 차트의 scale을 정했다면 axis로 그려 차트를 보기 편하게 하자. 선형 scale로 위와 같이 코드를 짠다. 이제 축을 원하는 방향에 그리면 된다. axisTop(scale)축을 아래에 그리고 스케일을 축 위에 그린다. const gx = svg.append("g") .attr("transform", `translate(10,${height - margin.bottom})`) .call(d3.axisTop(x)); axisRight(scale)축을 왼쪽에 그리고 스케일을 축 오른쪽에 그린다. const gx = svg.append("g") .attr("transform", `translate(10,${margin.bottom})`) .call(d3.axisRi.. 더보기 [01. D3.js] 002. D3-Scale D3.js의 기본 목적은 데이터를 시각화하는 것인데, D3-Scale은 이 과정에서 데이터 값을 적절한 범위로 변환하는 중요한 역할을 한다. 1~10,000 범위의 데이터를 크기가 100인 차트에 표시하기 위해 scale을 조정한다고 생각하면 이해하기 쉽다. 다양한 방식으로 데이터를 scale할 수 있다. html파일에 위 코드 하나만 추가하면 d3js를 온라인으로 사용할 수 있게 된다. Linear scales선형 scale이다. 예를 들면 1~100의 데이터를 1~5,000 또는 100~1,000 등의 범위로 변환시켜준다. x(100)은 domain 100이 range 500에 해당되는 값이라고 알려주고 invert를 사용하면 range에서 domain값을 구할 수 있다. clamp(true).. 더보기 [01. D3.js] 001. D3.js란 D3.js(데이터 기반 문서)는 데이터를 기반으로 동적인 시각화를 웹에서 구현하기 위해 사용되는 JavaScript 라이브러리이다. D3.js는 Data-Driven Documents의 약자이며, 데이터를 HTML, SVG, CSS와 같은 문서 형식으로 변환하여 시각적으로 표현할 수 있게 한다. D3.js의 주요 특징과 기능은 다음과 같다. 1. 데이터 구속 바인딩(Data Binding)D3.js는 데이터를 DOM(Document Object Model) 요소에 바인딩하여, 데이터의 변화에 따라 DOM 요소를 동적으로 업데이트한다. 이를 통해 데이터와 시각화가 항상 일치한다. 2. 조작(Manipulation)D3.js는 DOM을 조작하는 데 필요한 강력한 도구를 제공하며, 이를 통해 데이터를 기반으로.. 더보기 이전 1 다음
YOne Labs
