D3.js를 사용하여 PHP에서 아름다운 데이터 시각화 만들기

인터넷 시대의 도래와 함께 데이터는 우리 삶과 업무에 없어서는 안 될 부분이 되었습니다. 데이터 시각화는 데이터를 처리하고 분석하는 과정에서 매우 인기 있는 기술이 되었습니다. 데이터 시각화를 통해 우리는 데이터를 더 잘 이해하고, 데이터의 패턴과 추세를 발견하며, 데이터 분석 결과를 다른 사람에게 더 잘 보여줄 수 있습니다. 이 기사에서는 D3.js를 사용하여 PHP에서 아름다운 데이터 시각화를 만드는 방법을 소개합니다.

1. D3.js란

D3.js(Data-Driven Documents)는 유연한 데이터 바인딩과 우아한 변환을 통해 데이터와 문서를 결합하여 대화형 데이터 시각화를 만드는 웹 표준 기반의 데이터 시각화 라이브러리입니다. D3.js를 사용하면 선형 차트, 막대 차트, 산점도, 원형 차트 등을 포함한 다양한 유형의 데이터 시각화를 만들 수 있습니다.

2. 간단한 히스토그램 만들기

먼저 D3.js 라이브러리 파일을 소개해야 합니다. D3.js 공식 웹사이트에서 최신 버전을 다운로드할 수 있습니다. HTML 파일에서 다음 문을 사용하여 D3.js 라이브러리를 가져옵니다.

<script src="https://d3js.org/d3.v5.min.js"></script>

이 예에서는 2010년부터 2019년까지 특정 도시의 인구를 보여주는 간단한 막대 차트를 만듭니다.

먼저 차트를 보관할 div를 만들어야 합니다. HTML 파일에 다음 코드를 추가합니다.

<div id="chart"></div>

그런 다음 JavaScript 파일에서 다음과 같이 일부 데이터를 정의할 수 있습니다.

var data = [
  { year: 2010, population: 10500000 },
  { year: 2011, population: 10800000 },
  { year: 2012, population: 11200000 },
  { year: 2013, population: 11500000 },
  { year: 2014, population: 12000000 },
  { year: 2015, population: 12400000 },
  { year: 2016, population: 12800000 },
  { year: 2017, population: 13200000 },
  { year: 2018, population: 13600000 },
  { year: 2019, population: 14000000 }
];

다음으로 D3.js를 사용하여 SVG 요소를 생성할 수 있으며 이 요소는 Where 도표가 그려질 것입니다. JavaScript 파일에 다음 코드를 추가합니다.

var svg = d3.select("#chart")
  .append("svg")
  .attr("width", 500)
  .attr("height", 400);

그런 다음 데이터 값을 실제 픽셀 값에 매핑하는 척도를 만들 수 있습니다. JavaScript 파일에 다음 코드를 추가합니다.

var y = d3.scaleLinear()
  .domain([0, d3.max(data, function(d) { return d.population; })])
  .range([400, 0]);

이 코드에서는 d3.scaleLinear() 함수를 사용하여 선형 눈금을 만듭니다. domain() 함수는 데이터의 범위를 정의하는 데 사용되고, range() 함수는 매핑되는 실제 값의 범위를 정의하는 데 사용됩니다.

다음으로 축을 생성하여 SVG 요소에 추가할 수 있습니다. JavaScript 파일에 다음 코드를 추가합니다.

var yAxis = d3.axisLeft(y);
svg.append("g")
  .attr("transform", "translate(50,0)")
  .call(yAxis);

이 코드에서는 d3.axisLeft() 함수를 사용하여 왼쪽 좌표축을 생성합니다. 그런 다음 이 축을append() 함수를 사용하여 SVG 요소에 추가합니다. 마지막으로 call() 함수를 사용하여 방금 생성한 축을 적용합니다.

이제 막대 차트를 그릴 준비가 되었습니다. JavaScript 파일에 다음 코드를 추가합니다.

svg.selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("x", function(d) { return 50 + (d.year - 2010) * 45; })
  .attr("y", function(d){ return y(d.population); })
  .attr("width", 40)
  .attr("height", function(d){ return 400 - y(d.population); })
  .attr("fill", "steelblue");

이 코드에서는 selectAll() 함수를 사용하여 SVG 요소의 모든 직사각형을 선택한 다음 data() 함수를 사용하여 데이터를 직사각형에 바인딩합니다. enter() 함수는 D3.js에 새 데이터가 있는 경우 수행할 작업을 알려줍니다. 이 예에서는 10개의 막대를 표시하므로 10개의 데이터 개체를 사용합니다. 그런 다음, 직사각형 요소를 추가하기 위해append() 함수를 사용합니다. 다음으로 attr() 함수를 사용하여 직사각형의 위치, 너비, 높이, 색상을 설정합니다. 마지막으로 2010년부터 2019년까지 특정 도시의 인구를 보여주는 멋진 막대 차트가 있습니다.

3. 대화형 데이터 시각화 만들기

이제 간단한 히스토그램을 만들었습니다. 그러나 데이터 시각화를 더욱 흥미롭게 만들려면 몇 가지 대화형 기능을 추가해야 합니다. 다음으로, 사용자가 막대 차트 위로 마우스를 이동할 때 변경되는 대화형 데이터 시각화를 만드는 방법을 보여 드리겠습니다.

먼저 앞서 만든 SVG 요소를 수정해야 합니다. JavaScript 파일에 다음 코드를 추가합니다.

var svg = d3.select("#chart")
  .append("svg")
  .attr("width", 500)
  .attr("height", 400)
  .on("mousemove", onMouseMove);

이 코드에서는 SVG 요소에 이벤트를 추가합니다. 마우스가 SVG 요소 위로 이동하면 onMouseMove() 함수가 트리거됩니다.

다음으로 onMouseMove() 함수를 작성해야 합니다. JavaScript 파일에 다음 코드를 추가합니다.

function onMouseMove() {
  var mouseX = d3.mouse(this)[0];
  var year = Math.round((mouseX - 50) / 45) + 2010;
  var index = year - 2010;

  var rect = svg.selectAll("rect")._groups[0][index];
  var oldColor = d3.select(rect).attr("fill");
  d3.select(rect).attr("fill", "blue");

  setTimeout(function(){ 
      d3.select(rect).attr("fill", oldColor);
  }, 500);
}

이 코드에서는 d3.mouse() 함수를 사용하여 SVG 요소에서 마우스 좌표를 얻습니다. 그런 다음 마우스 위치를 기준으로 연도를 계산하여 작업하려는 데이터 개체를 찾습니다. 이 데이터에 해당하는 직사각형 요소를 선택하면 직사각형 요소의 색상을 파란색으로 변경할 수 있습니다. setTimeout() 함수를 사용하여 500밀리초 후에 직사각형 요소의 색상을 원래 색상으로 다시 변경합니다.

이제 대화형 데이터 시각화가 완성되었습니다. 사용자가 히스토그램 위로 마우스를 이동하면 히스토그램이 파란색으로 바뀌었다가 원래 색상으로 돌아갑니다. 이 예를 통해 우리는 D3.js의 강력함과 유연성을 확인할 수 있습니다.

4. 요약

이 기사에서는 PHP에서 D3.js를 사용하여 아름다운 데이터 시각화를 만드는 방법을 소개했습니다. 간단한 막대 차트를 만들고 대화형 기능을 추가하여 데이터 시각화를 더욱 흥미롭게 만드는 방법을 시연했습니다. D3.js는 다양한 유형의 데이터 시각화를 쉽게 만들 수 있는 풍부한 API와 기능을 제공합니다. D3.js의 사용법과 기술에 대해 더 자세히 알고 싶다면 D3.js의 공식 문서나 훌륭한 D3.js 튜토리얼을 참조하세요.

위 내용은 D3.js를 사용하여 PHP에서 아름다운 데이터 시각화 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!