D3.js 튜토리얼: 첫 번째 줄무늬 그림 만들기

9363 단어 html d3js javascript javascriptlibrary

D3.js는 웹 브라우저에서 동적 데이터 시각화를 만들 수 있는 자바스크립트 라이브러리입니다.그것은 전문적으로 이해할 수 있고 상호작용적인 방식으로 대형 데이터 집합을 시각화한다.D3.js라이브러리는 핵심 기능(예를 들어 DOM 조작, 동적 속성과 애니메이션)으로 인해 전방 개발자에게 가장 좋은 데이터 시각화 도구 중 하나가 되었다.
오늘 D3를 사용하여 첫 번째 막대 그래프를 작성하는 방법을 보여 드리겠습니다.js.우리 시작합시다!
다음과 같은 내용을 설명합니다.

Project overview

Initial setup

Create your dataset

Set dimensions and margins

Append SVG element

Gather and format data

Add bars

Next steps

프로젝트 개요

오늘은 D3를 사용하여 막대 그래프를 구성합니다.js.이것은 D3를 연습할 수 있기 때문에 아주 좋은 종목이다.실용적인 js 데이터 시각화 기술.
스트라이프는 서로 다른 그룹 간의 데이터를 비교하는 유용하고 효과적인 방법이다.그것들은 가독성을 높여 데이터의 패턴이나 추세를 쉽게 식별할 수 있도록 한다.
D3.js는 데이터의 시각화에 매우 적합하다. 원인은 매우 많다. 예를 들어 다음과 같다.

비주얼: HTML, CSS 및 SVG와 함께 사용하기 때문에 새로운 도구가 필요하지 않음

애니메이션:페이지 요소에 대한 애니메이션을 설정 및 수정할 수 있음

모든 주요 브라우저에서 지원: 네트워크에서 작업하여 시각적 효과를 쉽게 공유하고 발표할 수 있음

유연성: 기존 웹 기술과 잘 맞아 DOM의 모든 부분을 조작할 수 있다

확장성: 빅데이터 세트용

초기 설정

막대 그래프를 만들기 전에 다음 세 가지를 수행해야 합니다.

문서의 제목 및 본문 설정

CSS 설정

d3을 로드합니다.js도서관

다음 코드를 사용하여 이러한 작업을 수행할 수 있습니다.

<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */

.bar { fill: steelblue; }

</style>
<body>

<!-- load the d3.js library -->     
<script src="https://d3js.org/d3.v6.min.js"></script>
<script>

코드의 <style> 부분에서 우리는 색깔의 스타일을 설정했다.코드의 시작 부분에 스타일을 두는 것은 선택할 수 있지만, 미리 이렇게 하는 것은 매우 편리하다.

데이터 세트 만들기

막대그래프를 만들기 전에 데이터가 필요합니다.이 강좌에서 amounts.csv 라는 허구 외부 CSV 파일의 예시 데이터를 사용할 것입니다.
파일은 다음과 같은 이름과 금액으로 구성됩니다.

name,amounts
Foo, 33
Rishab, 12
Alexis, 41
Tom, 16
Courtney, 59
Christina, 38
Jack, 21
Mickey, 25
Paul, 30

우리는 이 데이터를 사용하여 금액의 값을 저장하기 위해 수직 스트라이프를 만들 것이다.

치수 및 여백 설정하기

차트와 여백에 사용할 영역의 크기를 설정합니다.

// Set graph margins and dimensions
var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

이제 x 및 y 도메인의 범위를 결정합니다.

// Set ranges
var x = d3.scaleBand()
          .range([0, width])
          .padding(0.1);
var y = d3.scaleLinear()
          .range([height, 0]);

SVG 요소 추가

다음 코드는 웹 페이지의 body를 선택하고 SVG 대상을 추가합니다.SVG 객체의 크기는 저희가 설정한 width, height 및 margin에 따라 결정됩니다.

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", 
          "translate(" + margin.left + "," + margin.top + ")")

데이터 수집 및 포맷

스크립트 주체에 데이터를 불러올 때가 되었습니다.CSV 파일을 로드한 다음 모든 데이터가 올바르게 인식되도록 순환합니다.

// Get data
d3.csv("amounts.csv").then(function(data) {

  // Format
  data.forEach(function(d) {
    d.amounts = +d.amounts;
  });

도메인 배율 조정

막대 그래프를 추가하기 전에 x와 y 데이터가 설정된 도메인으로 확장되었는지 확인합니다.

// Scale the range of the data in the domains
  x.domain(data.map(function(d) { return d.name; }));
  y.domain([0, d3.max(data, function(d) { return d.amounts; })]);

막대 추가

술집에 가입할 때가 됐어!우리가 작성한 코드는 이 줄을 만들고 데이터 집합과 연결합니다.

 // Append rectangles for bar chart
  svg.selectAll(".bar")
      .data(data)
    .enter().append("rect")
      .attr("class", "bar")
      .attr("x", function(d) { return x(d.name); })
      .attr("width", x.bandwidth())
      .attr("y", function(d) { return y(d.amounts); })
      .attr("height", function(d) { return height - y(d.amounts); });

우리가 해야 할 마지막 일은 부가축이다. 그리고 우리는 완성된 결과를 검사할 수 있다.

 // Add x axis
  svg.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x));

  // Add y axis
  svg.append("g")
      .call(d3.axisLeft(y));

이것이 바로 우리 코드의 전체적인 외관이다.

<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */

.bar { fill: steelblue; }

</style>
<body>

<!-- load the d3.js library -->     
<script src="https://d3js.org/d3.v6.min.js"></script>
<script>

// Set graph margins and dimensions
var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

// Set ranges
var x = d3.scaleBand()
          .range([0, width])
          .padding(0.1);
var y = d3.scaleLinear()
          .range([height, 0]);
var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", 
          "translate(" + margin.left + "," + margin.top + ")");

// Get data
d3.csv("amounts.csv").then(function(data) {

  // Format data
  data.forEach(function(d) {
    d.amounts = +d.amounts;
  });

  // Scale the range of the data in the domains
  x.domain(data.map(function(d) { return d.name; }));
  y.domain([0, d3.max(data, function(d) { return d.amounts; })]);

  // Append rectangles for bar chart
  svg.selectAll(".bar")
      .data(data)
    .enter().append("rect")
      .attr("class", "bar")
      .attr("x", function(d) { return x(d.name); })
      .attr("width", x.bandwidth())
      .attr("y", function(d) { return y(d.amounts); })
      .attr("height", function(d) { return height - y(d.amounts); });

  // Add x axis
  svg.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x));

  // Add y axis
  svg.append("g")
      .call(d3.axisLeft(y));

});

</script>
</body>

이것은 우리가 완성한 스트라이프 그림이다.

다음 단계

D3에서 첫발을 내디딘 것을 축하합니다.js 데이터 시각화!조형도는 이해할 수 있고 시각적으로 매력적인 방식으로 대형 데이터 집합을 시각화하는 좋은 방법이다.D3에 관해서는 아직 알아야 할 점이 많다.js 라이브러리(예:

트리 그래프

산키 그래프

매핑

및 그 이상

이러한 개념을 이해하고 D3의 막대 그래프에 대한 더 많은 정보를 얻을 수 있습니다.js, 교육과정D3 Tips and Tricks: Interactive Data Visualization을 보세요.이 과정에서는 D3을 탐색합니다.js, 간단한 선도에서 시작하여 직사각형도와 그림 그리기 요소 등 더 높은 개념으로 진입한다.마지막으로 D3로 훌륭한 데이터를 시각화할 수 있습니다.
즐겁게 공부하세요!