VX 및 D3를 사용한 데이터 시각화 소개

24502 단어 reactbeginnersvisualizationjavascript

소개



심미적이고 사용자 상호 작용에 반응하는 방식으로 데이터를 표현하고 표시할 수 있어야 합니다. D3은 지난 몇 년 동안 JavaScript에서 데이터 시각화를 위한 필수 요소였습니다. VX은 D3를 활용하고 이를 기반으로 하는 라이브러리입니다. 오늘은 간단한 막대 그래프를 만드는 방법을 살펴본 다음 레이어드 파이 차트와 비슷하지만 사용자의 마우스 호버에 반응하는 '선버스트'라는 조금 더 발전된 것을 추구합니다.

VX를 사용한 기본 막대 그래프



먼저 VX's Getting Started Tutorial의 BarGraph를 사용해 보겠습니다.

import React from 'react';
import { letterFrequency } from '@visx/mock-data';
import { Group } from '@visx/group';
import { Bar } from '@visx/shape';
import { scaleLinear, scaleBand } from '@visx/scale';

const data = letterFrequency;

const width = 500;
const height = 500;
const margin = { top: 20, bottom: 20, left: 20, right: 20 };

const xMax = width - margin.left - margin.right;
const yMax = height - margin.top - margin.bottom;

// We'll make some helpers to get at the data we want
const x = (d) => d.letter;
const y = (d) => +d.frequency * 100;

// And then scale the graph by our data
const xScale = scaleBand({
  range: [0, xMax],
  round: true,
  domain: data.map(x),
  padding: 0.4,
});
const yScale = scaleLinear({
  range: [yMax, 0],
  round: true,
  domain: [0, Math.max(...data.map(y))],
});

// Compose together the scale and accessor functions to get point functions
const compose = (scale, accessor) => (data) => scale(accessor(data));
const xPoint = compose(xScale, x);
const yPoint = compose(yScale, y);

// Finally we'll embed it all in an SVG
export default function BarGraph(props) {
  return (
    <svg width={width} height={height}>
      {data.map((d, i) => {
        const barHeight = yMax - yPoint(d);
        return (
          <Group key={`bar-${i}`}>
            <Bar
              x={xPoint(d)}
              y={yMax - barHeight}
              height={barHeight}
              width={xScale.bandwidth()}
              fill="#fc2e1c"
            />
          </Group>
        );
      })}
    </svg>
  );
}


다음과 같습니다.


매우 기본적이지만 빠르게 로드되고 꽤 깨끗해 보입니다!

D3 베이직 선버스트



D3 Sunburst Component의 파일과 함께 아래 코드를 사용하십시오.
여기에서 loadDataAsArray.html 예를 보여 드리겠습니다.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Sequences sunburst</title>
        <link rel="stylesheet" type="text/css" href="../sunburst.css"/>
        <link rel="stylesheet" type="text/css" href="./examples.css"/>
        <script src="../node_modules/d3/d3.min.js" type="text/javascript"></script>
        <script src="../sunburst.js" type="text/javascript"></script>
    </head>
    <body>
        <div id="main">
            <div id="sunburst-breadcrumbs"></div>
            <div id="sunburst-chart">
                <div id="sunburst-description"></div>
            </div>
        </div>
        <div id="sidebar">
            <input type="checkbox" id="togglelegend"> Legend<br/>
            <div id="sunburst-legend" style="visibility: hidden;"></div>
        </div>

        <script type="text/javascript">
            (function() {
                var sunburst = new Sunburst({
                    colors: {
                        "home": "#5687d1",
                        "product": "#7b615c",
                        "search": "#de783b",
                        "account": "#6ab975",
                        "other": "#a173d1",
                        "end": "#bbbbbb"
                    }
                });
                sunburst.setData([
                    ["account-account-account",22781],
                    ["account-account-end",3311],
                    ["account-account-home",906],
                    ["account-account-other",1156],
                    ["account-account-product",5969],
                    ["account-account-search",692],
                    ["account-end",7059],
                    ["account-home-account",396],
                    ["account-home-end",316],
                    ["account-home-home",226],
                    ["account-home-other",87],
                    ["account-home-product",613],
                    ["account-home-search",245],
                    ["account-other-account",446],
                    ["account-other-end",229],
                    ["account-other-home",91],
                    ["account-other-other",804],
                    ["account-other-product",776],
                    ["account-other-search",48],
                    ["account-product-account",3892],
                    ["account-product-end",3250],
                    ["account-product-home",531],
                    ["account-product-other",252],
                    ["account-product-product",4876],
                    ["account-product-search",476],
                    ["account-search-account",521],
                    ["account-search-end",39],
                    ["account-search-home",7],
                    ["account-search-other",8],
                    ["account-search-product",536],
                    ["account-search-search",219]
                ]);
            })();
        </script>

    </body>
</html>



마우스 오버 없음


중앙에 마우스


중간 레이어의 마우스


가장 바깥쪽 레이어의 마우스

결론



짧고 간단하지만 아이디어를 얻습니다. D3 및 VX를 사용하면 즉시 데이터 시각화를 시작하고 실행할 수 있습니다! 자세한 내용은 FreeCodeCamp's Getting Started with D3 and React Tutorial을 확인하는 것이 좋습니다. 그 후, 그리고 빅리그에 갈 준비가 되었다고 생각한다면 Amelia Wattenberger's React and D3 walkthrough은 정말 훌륭합니다. 적극 추천합니다. 마지막으로 D3가 제공해야 하는 폭과 깊이에 대한 더 나은 아이디어는 D3's Example Gallery on ObservableHQ을 확인하십시오.
bumblebee on ubuntu13.04 도형 장치의 해결 방법이 검출되지 않았습니다. [더블 그래픽 카드 동일]
MacBookPro 2015에서 2018까지의 마이그레이션 및 성능 비교

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage