D3 입문.회사 명

강력한 D3 데이터 시각화를 소개합니다.js.

본 강좌에서 우리는 다음과 같은 내용을 배울 것이다.

D3란 무엇입니까?

은 왜 D3를 사용합니까?

D3의 모양, 보조 객체 및 비율

에서 산점도 만들기

1.D3가 뭐예요?

데이터 구동 문서(또는 D3)는 강력한 자바스크립트 라이브러리로 흔히 볼 수 있는 웹 표준(예를 들어 HTML, Canvas, SVG)을 사용하여 데이터 시각화를 구축하는 데 사용된다.D3를 사용하면 DOM에 데이터를 바인딩한 다음 CSS 속성 및 SVG와 같은 문서에 데이터 구동 변환을 적용할 수 있습니다.
D3.js는 Mike Bostock, 와디엄 오지비츠키와 제프 힐이 2011년 초에 창립했다.Mike Bostock이 GitHub에서 적극적으로 관리하는 거대한 자바스크립트 라이브러리입니다.

2、D3를 사용하는 이유는 무엇입니까?

1. 데이터 구동의 결정을 내린다
시각화는 기업이 소음을 필터하고 데이터의 추세를 보는 데 도움이 된다.D3.js는 차트 라이브러리가 아니라 정적, 상호작용 도구를 포함하여 원하는 방식으로 데이터를 볼 수 있는 다양한 시각화 도구를 제공합니다.
둘째,동적 및 데이터 바인딩
D3를 사용하면 DOM에 데이터를 바인딩할 수 있으므로 데이터에 따라 시각적 효과가 달라집니다.
3. SVG 조작
D3 시각화는 XML 기반 텍스트 형식으로 이미지를 표시하는 방법을 설명하는 SVG 기반입니다.
SVG의 선, 원 및 사각형은 다음과 같습니다.

<svg>
<line x1="40" y1="20" x2="40" y2="160" style="stroke-width: 1; stroke: black;"/>
<circle cx="100" cy="80" r="20" fill="green" />
<rect x="140" y="25" width="30" height="200" fill="red" />
</svg>

SVG는 벡터 기반이므로 질량이나 픽셀 손실 없이 크기를 조정할 수 있습니다.기타 SVG 요소에 대한 자세한 내용은 here을 참조하십시오.
많은 예
D3에는 간단한 스트라이프부터 복잡한 Voronoi도까지 수천 개의 예가 있습니다.

출처: http://christophermanning.org/gists/1734663/
더 많은 예는 D3 gallery에서 볼 수 있습니다.
다섯, 개원!
D3는 GitHub에서 찾을 수 있는 소스 라이브러리입니다.그것은 GitHub에서 가장 환영받고 가장 갈라진 환매 협의 중의 하나로 수백 명의 개발상들이 출자한다.다른 개발자가 구축한 React와 slaple 같은 다른javascript 라이브러리 패키지도 지원합니다.

3. D3의 모양, 보조 객체 및 배율

모양
위에서 보듯이 하나의 모양을 만드는 것은 상당히 번거롭다.수백 개의 점으로 산점도를 그려서 축에 맞추는 것을 상상해 보세요!D3는 기본적인 드로잉 작업을 담당하므로 실제 시각화에 집중할 수 있습니다.산점도에 들어가기 전에 D3에서 모양을 다시 만듭니다.
먼저 SVG 요소를 정의합니다. 이 요소는 우리의 모양을 포함합니다.SVG 요소는 DOM의 모든 요소에 첨부할 수 있습니다.다음은 원, 직사각형, 선을 추가합니다.

<!DOCTYPE html>
<html>
    <head>
        <title>Shapes in D3</title>
        <script src="https://d3js.org/d3.v4.min.js"></script>
    </head>
    <body>
    <div id="canvas"></div>
    <script>
    var canvas = d3.select("#canvas") // D3 uses a jQuery like selector
            .append("svg")
            .attr("height", 500)
            .attr("width", 500);
    var circle = canvas.append("circle") // Appending shape elements to the SVG element
            .attr("cx", 250)
            .attr("cy", 250)
            .attr("r", 100)
            .attr("fill", "red");
    var rectangle = canvas.append("rect")
            .attr("height", 500).attr("width", 100)
            .attr("fill", "blue")
            .attr("stroke", "blue")
            .attr("stroke-width", 2);
    var line = canvas.append("line")
            .attr("x1", 500).attr("y1", 0)
            .attr("x2", 500).attr("y2", 500)
            .attr("stroke-width", 2)
            .attr("stroke", "black");
    </script>
    </body>
</html>

위의 렌더링된 SVG를 확대 또는 축소하려고 하면 이미지의 품질에 영향을 주지 않습니다.
둘째,조수
D3에는 일련의 보조 함수가 포함되어 있으므로 Lodash 또는 Underscore을 로드할 필요가 없습니다.

const data = [1, 2, 3, 4, 5];
const moreData = [[5, 20], [480, 90], [250, 50], [100, 33], [330, 95]];

d3.min(data); // 1

d3.max(moreData, function(d) { return d[0]; }); // 480

d3.max(moreData, function(d) { return d[1]; }); // 95

d3.extent(data); // [1, 5]

3. 천평
척도는 모든 시각화의 중요한 구성 부분으로 D3는 각종 척도(선형, 대수, 서수와 기타)를 첨부한다.D3 축척은 데이터 공간(도메인)을 픽셀 공간(범위)에 매핑하고 축을 그리는 데 많이 사용됩니다.
우리의 형상과 보조 대상의 예시로 돌아가서, 만약 우리가 moreData 요소에 canvas의 산점도를 가시화하고 싶다면, 우리는 다음과 같이 비례를 설명할 수 있다.

var xScale = d3.scaleLinear()
    .domain([0, d3.max(moreData, function(d) { return d[0]; })])
    .range([0, 500])

var yScale = d3.scaleLinear()
    .domain([0, d3.max(moreData, function(d) { return d[1]; })])
    .range([500, 0]) // SVG is y-down

우리의 양표를 시험해 봅시다.

console.log(xScale(0)); // 0
console.log(xScale(480)); // 500

console.log(yScale(0)); // 0
console.log(yScale(95)); // 500

// The intermediate values are mapped linearly between 0 and 500.

축을 생성하려면 적절한 축 함수에 비례를 전달하기만 하면 됩니다.

var xAxis = d3.axisBottom(xScale);

D3 눈금자에 대한 자세한 내용은 here을 참조하십시오.

4. D3에서 산점도 생성

우리는 지금 첫 번째 (또는 100번째) 산점도를 만들 준비를 하고 있다.먼저 SVG 그림을 포함하는 div 요소를 만듭니다.

<div id="plot"></div>

이제 SVG 요소를 만듭니다.

var w = 500, h = 500, pad = 50; // defining width and height of the SVG element; and a little padding for the plot

var svg = d3.select("#plot") // Select the plot element from the DOM
    .append("svg") // Append an SVG element to it
    .attr("height", h)
    .attr("width", w);

그릴 데이터들

// [x-coordinate, y-coordinate, radius]
const dataset = [[5, 20, 30], [480, 90, 20], [250, 50, 100], [100, 33, 40], [330, 85, 60]];

축척 및 축을 생성합니다.

// Scales
var xScale = d3.scaleLinear() // For the X axis
    .domain([0, d3.max(dataset, function(d) { return d[0]; })])
    .range([pad, w - pad]);

var yScale = d3.scaleLinear() // For the Y axis
    .domain([0, d3.max(dataset, function(d) { return d[1]; })])
    .range([h - pad, pad]);

var rScale = d3.scaleLinear() // Custom scale for the radii
    .domain([0, d3.max(dataset, function(d) { return d[2]; })])
    .range([1, 30]); // Custom range, change it to see the effects!

// Axes
var xAxis = d3.axisBottom(xScale); // handy axes for any orientation
var yAxis = d3.axisLeft(yScale);

데이터를 그립니다.

var circ = svg.selectAll("circle") // Returns ALL matching elements
    .data(dataset) // Bind data to DOM
    .enter() // Add one circle per such data point
    .append("circle")
    .attr("cx", function(d) { return xScale(d[0]); })
    .attr("cy", function(d) { return yScale(d[1]); })
    .attr("r", function(d) { return rScale(d[2]); })
    .attr("fill", "blue").attr("opacity", 0.5);

위의 블록에는 D3의 핵심이 포함되어 있습니다.우리 그것을 분해합시다.
우리는 산점도가 기본적으로 한 조의 원이라는 것을 안다.그것들의 위치와 반경은 위에서 정의한 dataset에 달려 있다.그래서 우리는 데이터마다 원을 하나 찍어야 한다.D3는 다음 세 단계를 통해 이 목표를 실현합니다.svg.selectAll("circle"): 생성되지 않았더라도 일치하는 모든 요소를 되돌려줍니다..data(dataset): 각 원을 위에서 하나의 데이터 지점으로 바인딩합니다(DOM-데이터 바인딩)..enter(): 각 데이터 포인트에 원을 추가합니다.
다행이다. 이제 축을 추가해서 이 모든 것을 완성하자.

//X axis
svg.append("g") // Creates a group
    .attr("class", "axis") // adding a CSS class for styling
    .attr("transform", "translate(0," + (h - pad) + ")") 
    .call(xAxis);

//Y axis    
svg.append("g")
    .attr("class", "axis")
    .attr("transform", "translate(" + pad +", 0)")
    .call(yAxis);

상술한 변환은 축을 원점으로 평평하게 이동하기 위한 것이다.이것은 완전한 코드입니다.

<!DOCTYPE html>
<html>
    <head>
        <title>Scatter Plot</title>
    <script src="https://d3js.org/d3.v4.min.js"></script>
        <style>
        .axis {
                fill: none;
                stroke: black;
                shape-rendering: crispEdges;
        }
        </style>
    </head>
    <body>
        <div id="plot"></div>

        <script>

        var dataset = [[5, 20, 30], [480, 90, 20], [250, 50, 100], [100, 33, 40], [330, 85, 60]];


        var w = 500, h = 500, pad = 50;

        var svg = d3.select("#plot")
            .append("svg")
        .attr("height", h)
        .attr("width", w);

        var xScale = d3.scaleLinear()
        .domain([0, d3.max(dataset, function(d) { return d[0]; })])
        .range([pad, w - pad]);

        var yScale = d3.scaleLinear()
            .domain([0, d3.max(dataset, function(d) { return d[1]; })])
            .range([h - pad, pad]);

        var rScale = d3.scaleLinear()
            .domain([0, d3.max(dataset, function(d) { return d[2]; })])
            .range([1, 30]);

        var xAxis = d3.axisBottom(xScale);
        var yAxis = d3.axisLeft(yScale);

        var circ = svg.selectAll("circle")
            .data(dataset)
            .enter()
            .append("circle")
                .attr("cx", function(d) { return xScale(d[0]); })
                .attr("cy", function(d) { return yScale(d[1]); })
                .attr("r", function(d) { return rScale(d[2]); })
                .attr("fill", "blue").attr("opacity", 0.5);

        svg.append("g")
            .attr("class", "axis")
            .attr("transform", "translate(0," + (h - pad) + ")")
            .call(xAxis);

        svg.append("g")
            .attr("class", "axis")
            .attr("transform", "translate(" + pad +", 0)")
            .call(yAxis);
        </script>
    </body>
</html>