지역 사회
배우다
도구 라이브러리
AI 도구
여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > 실제 사용 중인 Ds: 고급 데이터 시각화 기술 및 예

실제 사용 중인 Ds: 고급 데이터 시각화 기술 및 예

Linda Hamilton
풀어 주다： 2024-12-30 07:11:09
원래의
980명이 탐색했습니다.

Ds in action: advanced data visualization techniques and examples

기초

먼저 D3.js 라이브러리를 가져오고 차트를 배치할 캔버스를 준비하려면 HTML 파일이 필요합니다.

1

2

3

4

5

6

7

8

9

10

11

12

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Getting Started with D3.js Example</title>

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

</head>

<body>

  <svg width="500" height="500"></svg>

</body>

</html>

로그인 후 복사

간단한 선 그래프 만들기

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

// Assume we have the following data

var data = [4, 8, 15, 16, 23, 42];

 

// Create an SVG canvas

var svg = d3.select("svg"),

    margin = {top: 20, right: 20, bottom: 30, left: 50},

    width = +svg.attr("width") - margin.left - margin.right,

    height = +svg.attr("height") - margin.top - margin.bottom;

 

// Create x and y scales

var x = d3.scaleLinear()

    .domain(d3.extent(data, d => d))

    .range([0, width]);

 

var y = d3.scaleLinear()

    .domain([0, d3.max(data)])

    .range([height, 0]);

 

// Create the x and y axes

var xAxis = d3.axisBottom(x),

    yAxis = d3.axisLeft(y);

 

// Add axis

svg.append("g")

    .attr("transform", "translate(0," + height + ")")

    .call(xAxis);

 

svg.append("g")

    .call(yAxis);

 

// Draw the polyline

var line = d3.line()

    .x(d => x(d))

    .y(d => y(d));

 

svg.append("path")

    .datum(data)

    .attr("class", "line")

    .attr("d", line);

로그인 후 복사

막대 차트 만들기

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

// Suppose we have the following data

var data = [4, 8, 15, 16, 23, 42];

 

// Creating the SVG canvas and scale

var svg = d3.select("svg").attr("width", 500).attr("height", 500);

var margin = {top: 20, right: 20, bottom: 30, left: 40};

var width = +svg.attr("width") - margin.left - margin.right;

var height = +svg.attr("height") - margin.top - margin.bottom;

var x = d3.scaleBand().rangeRound([0, width]).padding(0.1);

var y = d3.scaleLinear().rangeRound([height, 0]);

 

// Mapping data to scale

x.domain(data.map(function(d) { return d; }));

y.domain([0, d3.max(data)]);

 

// Creating an SVG g Element

var g = svg.append("g")

    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

 

// Adding x and y axes

g.append("g")

    .attr("transform", "translate(0," + height + ")")

    .call(d3.axisBottom(x));

 

g.append("g")

    .call(d3.axisLeft(y));

 

// Draw a bar chart

g.selectAll(".bar")

    .data(data)

    .enter().append("rect")

    .attr("class", "bar")

    .attr("x", function(d) { return x(d); })

    .attr("y", function(d) { return y(d); })

    .attr("width", x.bandwidth())

    .attr("height", function(d) { return height - y(d); });

로그인 후 복사

원형 차트 만들기

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

// Suppose we have the following data

var data = [4, 8, 15, 16, 23, 42];

 

// Creating the SVG canvas and scale

var svg = d3.select("svg").attr("width", 500).attr("height", 500);

var radius = Math.min(svg.attr("width"), svg.attr("height")) / 2;

 

// Creating an arc scale

var arc = d3.arc().outerRadius(radius).innerRadius(0);

var pie = d3.pie().value(function(d) { return d; });

 

// Draw a pie chart

var g = svg.append("g")

    .attr("transform", "translate(" + radius + "," + radius + ")");

 

var arcs = g.selectAll("arc")

    .data(pie(data))

    .enter().append("g")

    .attr("class", "arc");

 

arcs.append("path")

    .attr("d", arc)

    .attr("fill", function(d, i) { return d3.schemeCategory10[i]; });

 

arcs.append("text")

    .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })

    .attr("dy", ".35em")

    .text(function(d) { return d.data; });

로그인 후 복사

상호 작용 및 애니메이션

상호작용 예시: 막대 차트에 호버 효과 추가

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

// Assuming that the bar chart base code already exists

// ...

 

// Add hover effects

g.selectAll(".bar")

    .on("mouseover", function(event, d) {

        d3.select(this)

            .transition()

            .duration(200)

            .attr("fill", "orange"); // Mouseover color change

 

        // Show Data Tips

        var tooltip = g.append("text")

            .attr("class", "tooltip")

            .attr("x", x(d) + x.bandwidth() / 2)

            .attr("y", y(d) - 10)

            .text(d);

    })

    .on("mouseout", function(event, d) {

        d3.select(this)

            .transition()

            .duration(200)

            .attr("fill", "steelblue"); // Restore original color

 

        // Remove data tips

        g.selectAll(".tooltip").remove();

    });

로그인 후 복사

애니메이션 예시: 부드러운 전환 선 차트 데이터 업데이트

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

// Assume that there is already a line chart basic code

// ...

 

// Update data

var newData = [8, 15, 16, 23, 42, 45];

 

// Update scale domain

x.domain(d3.extent(newData));

y.domain([0, d3.max(newData)]);

 

// Update axis

g.select(".axis--x").transition().duration(750).call(xAxis);

g.select(".axis--y").transition().duration(750).call(yAxis);

 

// Update path

var path = g.select(".line");

path.datum(newData).transition().duration(750).attr("d", line);

로그인 후 복사

복잡한 그래프: 힘 방향 그래프

강제 방향 그래프는 노드와 에지 간의 관계를 보여주기 때문에 네트워크, 소셜 그래프 등의 데이터를 시각화하는 데 매우 적합합니다.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

// Assume we have data on nodes and edges

var nodes = [{id: "A"}, {id: "B"}, {id: "C"}];

var links = [{source: nodes[0], target: nodes[1]}, {source: nodes[1], target: nodes[2]}];

 

// Creating the SVG Canvas

var svg = d3.select("svg"),

    width = +svg.attr("width"),

    height = +svg.attr("height");

 

// Creating a Force Simulation

var simulation = d3.forceSimulation(nodes)

    .force("link", d3.forceLink(links).id(function(d) { return d.id; }))

    .force("charge", d3.forceManyBody())

    .force("center", d3.forceCenter(width / 2, height / 2));

 

// Creating links and nodes

var link = svg.append("g")

    .attr("stroke", "#999")

    .attr("stroke-opacity", 0.6)

  .selectAll("line")

  .data(links)

  .join("line")

    .attr("stroke-width", 2);

 

var node = svg.append("g")

    .attr("stroke", "#fff")

    .attr("stroke-width", 1.5)

  .selectAll("circle")

  .data(nodes)

  .join("circle")

    .attr("r", 5)

    .call(d3.drag()

        .on("start", dragstarted)

        .on("drag", dragged)

        .on("end", dragended));

 

node.append("title")

    .text(function(d) { return d.id; });

 

simulation.on("tick", ticked);

 

function ticked() {

  link

      .attr("x1", function(d) { return d.source.x; })

      .attr("y1", function(d) { return d.source.y; })

      .attr("x2", function(d) { return d.target.x; })

      .attr("y2", function(d) { return d.target.y; });

 

  node

      .attr("cx", function(d) { return d.x; })

      .attr("cy", function(d) { return d.y; });

}

 

// Drag event handling function

function dragstarted(event, d) {

  if (!event.active) simulation.alphaTarget(0.3).restart();

  d.fx = d.x;

  d.fy = d.y;

}

 

function dragged(event, d) {

  d.fx = event.x;

  d.fy = event.y;

}

 

function dragended(event, d) {

  if (!event.active) simulation.alphaTarget(0);

  d.fx = null;

  d.fy = null;

}

로그인 후 복사

지도 시각화

D3.js는 GeoJSON과 같은 지리 데이터 형식과 함께 작동하여 대화형 지도를 만들 수 있습니다. 여기에는 국가, 주, 도시 경계 등이 포함됩니다.

기본 단계:

  • 지도 데이터 로드: D3의 d3.json 또는 d3.geoJson을 사용하여 GeoJSON 데이터를 로드합니다.

  • 규모 생성: Mercator 또는 Albers USA와 같은 지리적 투영 및 규모를 정의합니다.

  • 데이터 바인딩 및 그리기: GeoJSON 데이터를 SVG 경로 요소에 바인딩하고 투영을 적용합니다.

  • 호버 효과, 클릭 이벤트 등 상호작용 추가

1

2

3

4

5

6

7

8

9

10

11

12

d3.json("world.geojson").then(function(geoData) {

  var svg = d3.select("svg"),

      projection = d3.geoMercator().scale(130).translate([400, 250]),

      path = d3.geoPath().projection(projection);

 

  svg.selectAll("path")

    .data(geoData.features)

    .enter().append("path")

    .attr("d", path)

    .attr("fill", "#ccc")

    .attr("stroke", "#fff");

});

로그인 후 복사

데이터 바인딩 및 동적 업데이트

기본 단계:

  • 데이터 바인딩 초기화: data() 메서드를 사용하여 데이터를 DOM 요소에 바인딩합니다.

  • 입력, 업데이트, 종료 모드: 새 데이터를 처리하고, 기존 데이터를 업데이트하고, 쓸모 없는 데이터를 제거합니다.

  • 동적 업데이트: 데이터 변경 사항을 모니터링하고 바인딩 및 렌더링 프로세스를 다시 실행합니다.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

var svg = d3.select("svg"),

    data = [4, 8, 15, 16, 23, 42];

 

// Initialize the bar chart

var bars = svg.selectAll("rect").data(data);

 

bars.enter().append("rect")

    .attr("x", function(d, i) { return i * 50; })

    .attr("y", function(d) { return 300 - d; })

    .attr("width", 40)

    .attr("height", function(d) { return d; });

 

// Dynamic Updates

setInterval(function() {

  data = data.map(function(d) { return Math.max(0, Math.random() * 50); });

 

  bars.data(data)

    .transition()

    .duration(500)

    .attr("y", function(d) { return 300 - d; })

    .attr("height", function(d) { return d; });

}, 2000);

로그인 후 복사

복잡한 차트와 고급 기술

고급 기술:

  • D3 구성 요소 라이브러리 사용: D3fc와 같은 라이브러리는 복잡한 차트 생성을 단순화하는 고급 차트 구성 요소를 제공합니다.

  • 애니메이션 및 전환: 부드러운 애니메이션 효과를 만들려면 전환() 메서드를 사용하세요.

  • 상호작용성: 클릭 및 호버 이벤트를 추가하고 브러시 및 확대/축소 기능을 사용하여 사용자 경험을 향상합니다.

  • 성능 최적화: selectAll(), data(), enter(), exit()를 합리적으로 사용하여 DOM 작업을 줄이고 requestAnimationFrame()을 사용하여 애니메이션 성능을 최적화합니다.

위 내용은 실제 사용 중인 Ds: 고급 데이터 시각화 기술 및 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

이전 기사：JavaScript 배열에서 요소 발생을 효율적으로 계산하려면 어떻게 해야 합니까? 다음 기사：Node.js를 사용하여 삭제 프로세스를 예약하는 한 가지 방법
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿