SVG 그라디언트가있는 차트 D3.js 차트

Sep 16, 2025

어떻게

Nadieh Bremer가있을 것입니다 런던 생성 9 월에, 그녀는 어디에서 가져갈 방법을 보여줄 것입니다. 단순한 모양을 넘어서서 svg 자바 스크립트, CSS 및 D3.js를 사용하여 데이터 시각화를 더욱 재미 있고 흥미롭게 만듭니다. 지금 티켓을 예약하십시오 ...에!

D3.JS는 대화식 데이터 시각화 세계를 통해 차지했습니다. 엄청난 수의 예를 찾을 수 있습니다. 각각은 라이브러리에서 자신의 재미와 유용한 트위스트를 보여줍니다. 당신이 보았습니다, D3은 차트 라이브러리가 아니라 훨씬 더 낫습니다. 데이터 시각화를 작성하는 기본 도구 만 제공하므로 실제로 생각할 수있는 모든 것을 만들 수 있습니다. 어떤 아이디어가 다른 아이디어보다 시간이 걸릴 수도 있지만 결국 거기에 도착할 수 있습니다. 그리고이 자유는 내가 d3에 대해 내가 사랑하는 것입니다.

그 핵심에서 모든 D3 시각은 SVG 요소로부터 구축됩니다. 예를 들어, ScatterPlot 차트에서 각 DataPoint에 대해 막대 차트를 축, 병렬 좌표 또는 슬로프 그래프, 레이블로, 실제로 다른 모든 것에 매우 유용합니다. 또한 SVG는 해상도 독립적이므로 디스플레이 또는 줌 레벨에서 멋지게 보입니다.

SVGS를 셰이프에 사용하더라도 멋진 시각화를 만들 수 있습니다. 그러나 예를 들어 SVG 필터를 훨씬 더 많이 생각할 수 있습니다. 이 튜토리얼에서는 하나의 특정 측면으로 깊이 다이빙을하고 시각화를 밝게하기 위해 적용 할 수있는 몇 가지 방법을 살펴 보겠습니다. SVG 그라디언트에 당신을 소개하겠습니다!

이 자습서에 필요한 모든 파일을 찾으십시오 여기 ...에

선형 그라디언트

때로는 한 줄로 줄 차트를 만들 때 조금 너무 비어 있고 흰색 배경에서 길을 잃을 수 있습니다. 더 많이 돋보이게하려면 D3 's를 사용하여 라이트 그라데이션을 아래에 배치합니다. d3.svg.Area. 기능, SVG 그라디언트로 채워진 (그림 1 참조).

나는 그라디언트가 상단에서 수직으로 (라인과 같은 색이지만 라이터 그늘이있는 곳) 하단 (흰색이거나 투명 해야하는 경우). 이것은 선형 그라디언트로 알려져 있습니다. 직선을 따라 색을 바꾸는 것.

Figure 1: A smooth SVG gradient applied to an area chart that lies below the line chart — 그림 1 : 선형 차트 아래에있는 영역 차트에 적용된 부드러운 SVG 그라디언트

우리는 SVG로 시작합니다. 이것은 우리 선형 차트가 그려지는 캔버스입니다. 우리는 다음을 창조합니다 결함 우리가 A를 추가 할 수있는 요소 LineArgradient. 요소. 그라디언트에게 고유 한 ID를 제공하는 것은 매우 중요합니다. 우리가 나중에이 영역을 채우기 아래에 줄 필요가있을 때 나중에 사용할 것입니다.

 VAR AreaGradient = svg.append ( "defs")
.append ( "lineargradient")
.attr ( "ID", "AreaGradient")
.attr ( "x1", "0 %"). attr ( "y1", "0 %")
.attr ( "x2", "0 %"). attr ( "y2", "100 %");

위의 마지막 코드의 두 줄은 그라디언트가 어떻게 실행되어야하는지 정의합니다. 그것을 보이지 않는 라인으로 생각하십시오. x1. 과 y1. 보이지 않는 라인의 시작 위치와 x2. 과 y2. 그 그라디언트의 방향을 부여하기 위해 그 끝점을 나타냅니다. 정확한 픽셀 위치를 사용할 수는 있지만 백분율로 정의하는 것이 가장 쉽습니다. 기본적으로 위치는 그라디언트가 적용되는 요소의 경계 상자를 참조합니다. 그라디언트가 수직으로 실행되기를 바랍니다 x1. 과 x2. 동일해야합니다 ( 0 % 괜찮습니다), y1. 이어야한다 0 % 과 Y2 100 % ...에

이제 우리는 그라디언트의 색상을 정의 할 수 있습니다. 그라디언트에 적어도 두 가지 색상이 필요하지만 원하는만큼 많이 사용할 수 있습니다. 그라디언트의 각 색상에 대해 추가하십시오 중지 요소. 이 내에서는 그늘을 지정합니다 정지 색상 이 색을 순수하게 (정확한 색상)으로 원하는 위치 (보이지 않는 라인을 따라) 오프셋 ...에

선택적으로, 우리는 또한 각 색상의 불투명도를 설정할 수 있습니다. 정지 불투명도 ...에 여기서 나는 그늘을 상단에 약간 가볍게 만들고 바닥에서 완전히 투명하게하고 있습니다.

areagradient.append ( "stop")
.attr ( "오프셋", "0 %")
.attr ( "stop-color", "# 21825c")
.attr ( "멈춤 - 불투명도", 0.6);
areagradient.append ( "stop")
.attr ( "오프셋", "80 %")
.attr ( "stop-color", "흰색")
.attr ( "멈춤 - 불투명도", 0);

이제 선형 그라디언트가 설정되면 영역 차트를 만들고 그라디언트로 채울 수 있습니다. 이렇게하려면, 사용하십시오 URL (# 그라디언트 ID) 채우기 스타일에서 우리는 이전에 설정 한 고유 ID와 함께

 svg.append ( "경로")
. 스타일 ( "채우기", "URL (#reagegradient)")
.attr ( "D", AreaFunction (Dataset));

그런 다음 뷰어가 그래프에서 결과를 읽을 수 있도록 차트 의이 영역 위에 줄을 그립니다. 내 차트에서는 동그라미를 배치하여 특정 데이터 포인트의 위치를 강조합니다.

Don't miss Nadieh and other top web names at Generate London — Nadieh 및 기타 최고의 웹 이름을 그리워하지 마세요.

부드러운 전설

전설은 데이터 시각화에서 매우 일반적입니다. 색상을 사용하여 데이터의 특정 측면을 나타내는 경우 각 색상이 무엇을 의미하는지 설명해야합니다. 이것은 전설이 들어오는 곳입니다.

일부 차트에서는 색상을 사용하여 이산 사례 (예 : 다른 국가)를 구별 할 것입니다.이 경우 색상은 종종 모두 매우 다릅니다. 그러나 색상을 사용하여 정량적 가치를 나타낼 수도 있습니다.

여기서 우리는 외부의 온도를 표현합니다 (그림 2 참조). 색상은 점차적으로 변화하여 낮은 온도가 낮은 온도를 높게 나타냅니다. 전설에서 이것을 보여주기 위해, 우리는 긴 직사각형을 만들고 왼쪽에서 오른쪽으로가는 그라디언트로 채 웁니다. 우리는 우리가 만든 그라디언트를 우리 라인 차트로 재사용 할 수 있지만 90도 늘어났습니다 (그래서 x2. 이제 실행됩니다 100 % , 그렇다 y2. 짐마자 일반적으로 무지개 팔레트는 데이터 시각화에서 권장되지 않지만 사람들은 다채로운 온도 맵을 보는 데 사용되며,이 예에서는 사용할 9 가지 색상을 선택했습니다.

Figure 2: The gradient of different colours represents the temperature in a location, explained in a legend below — 그림 2 : 다른 색상의 그라디언트는 아래의 범례에서 설명 된 위치의 온도를 나타냅니다.

각각을 쓰는 대신에 중지 추가하려면 데이터 세트에 모든 색상을 넣고 D3의 멋진 샘을 사용할 수 있습니다. 데이터 프로세스를 더 빨리 만드는 단계. D3을 사용하면 익명 함수를 사용하여 후속 체인 단계에서 데이터 집합의 모든 속성에 액세스 할 수 있으므로 단 두 줄로 색상과 오프셋을 설정할 수 있습니다.

 svg.append ( "defs")
.append ( "lineargradient")
.attr ( "ID", "LegendGradientMulti")
.attr ( "x1", "0 %"). attr ( "y1", "0 %")
.attr ( "x2", "100 %") attr ( "y2", "0 %")
.selectall ( "STOP")
.데이터([
{오프셋 : "0 %", 색상 : "# 2c7bb6"},
{오프셋 : "12.5 %", 색상 : "# 00A6CA"},
{오프셋 : "25 %", 색상 : "# 00CCBC"},
{오프셋 : "37.5 %", 색상 : "# 90EB9D"},
{오프셋 : "50 %", 색상 : "# ffff8c"},
{오프셋 : "62.5 %", 색상 : "# f9d057"},
{오프셋 : "75 %", 색상 : "# f29e2e"},
{오프셋 : "87.5 %", 색상 : "# e76818"},
{오프셋 : 100 % ", 색상 :"# D7191C "}))
.enter (). 추가 ( "STOP")
.attr ( "오프셋", 함수 (d) {return d.offset;})
.ATTR ( "멈춤 - 색상", 함수 (d) {return d. color;});

이전처럼 마지막 단계는 렉서 고유 한 그라데이션 ID를 사용 하여이 작업을 작성하십시오.

 svg.append ( "Rect")
.attr ( "x", 0) .attr ( "y", 0)
.ATTR ( "너비", 500) .ATTR ( "Height", 20)
. 스타일 ( "채우기", "URL (#legendgradientmulti)");

이 전설의 차트는 멋진 작업 후에 재창조됩니다. www.weather-radials.com. 2015 년에 뉴욕이나 베이징의 온도를 보여줍니다. 매일 평균 기온은 착색 된 선으로 표시되며,이 라인은 원형 그래프를 형성하도록 배열됩니다. 전설은 각 색상이 무엇을 의미하는지 설명합니다. 하나의 그래프는 한 색에서 다른 색으로 그라디언트를 사용하며 다른 하나는 9 가지 색상을 모두 통해 진행합니다.

데이터 기반 그라디언트

앞의 예와 유사한 방식으로 여러 그래디언트를 만들 수 있습니다. 우리는 데이터의 특정 측면을 기반으로 각 데이터 포인트에 대해 독특한 그라디언트를 만들 수 있습니다. 나는이 접근법을 Ann에서 사용했습니다 Exoplanet 시각화 여기서 각 행성은 별표의 스타 클래스를 기반으로 그라디언트를 주어졌습니다. 나는 미묘한 구형 효과를 사용하여 인상을 각각 중앙에있는 별에 의해 켜졌다.

Figure 3: In this exoplanet visualisation, each planet has its own data-based gradient, creating the look of a sphere — 그림 3 :이 외환 시각화에서 각 행성에는 자체 데이터 기반 그라디언트가 있으며 구의 모양을 만듭니다.

그래서 90 년대로 돌아가서 우리 자신의 태양계의 행성을 표현하는 플랫 서클 모음을 방사형 그라디언트가있는 3D로 보이는 분야로 전환시킵니다 (그림 4). 나는 행성의 이름과 지름이 들어있는 작은 데이터 집합을 만들었습니다. 각각은 하나의 색상으로 일반화 될 것이며, 우리는 각 행성에 대해 독특한 그라디언트를 만드는 데 사용할 것입니다.

 VAR GRADIENTRADIAL = svg.append ( "DEF))
.selectAll ( "radialgradient")
.Data (행성)
.enter (). 추가 ( "radialgradient")
.ATTR ( "ID", 함수 (d) {RETURN "그라디언트 -"+ D.PLANET;})
.attr ( "CX", "15 %")
.attr ( "cy", "50 %")
.attr ( "r", "85 %");

코드는 여기에 약간 다릅니다. 처음에는 그라디언트 요소를 추가하는 대신 이제 즉시 다음을 추가합니다. 행성 데이터 세트 및 그 후에 만 시작하다 우리는 그라디언트 요소를 만듭니다 (이 경우 radialgradient. 짐마자 이렇게하면 DataSet의 각 점에 대해 그라디언트가 생성됩니다. 각 포인트의 ID를 데이터에 기본으로 유지함으로써 고유하게 유지하십시오. 색인 나는 보통 작동하지만 행성 이름은 더 안전합니다. 이렇게하면 나중에 올바른 그라디언트에 액세스 할 수 있습니다.

방사형 그라디언트는 선형 하나와 약간 다릅니다. 우리는 SVG 서클과 비슷한 방식으로 작성합니다. 적용될 오브젝트 경계와 관련하여 그라디언트의 중심을 공급하십시오. Cx. 과 Cy. ...에 이 값은 기본값입니다 50 % , 이것은 객체의 중심입니다.

Figure 4: Each planet's gradient has been set to make it look like a sphere. Here, the four giant planets are clearly visible — 그림 4 : 각 행성의 그라디언트가 구형처럼 보이게 만들기 위해 설정되었습니다. 여기에서 4 개의 거대한 행성이 명확하게 표시됩니다

한면에서 행성에서 빛나는 별 모양을 시뮬레이트하기 위해 그라디언트의 중심을 왼쪽으로 왼쪽으로 움직일 것입니다. Cx. ...에 15 % ...에 그라디언트의 반경 (그라디언트가 멈추는 곳 100 % 끝내야 함) 아르 자형 ...에 또한 기본값입니다 50 % ,하지만 우리 때문이야 Cx. 오프셋, 이것은 지금입니다 85 % 그래서 그것은 전체 원을 채 웁니다.

우리는 행성 데이터를 사용하여 색상 정지를 추가 할 수 있습니다. 빛나는 영역의 모양을 만들려면 0 % 가볍게해야합니다. 사용하여 d3.rgb (). 밝은 (k) D3이 저에게 해당 계산을 수행 할 수 있으므로 별도의 색상을 지정할 필요가 없습니다. 가치 케이 색이 색깔을 원하는 가벼운 양을 정의합니다. 쯤 50 % 나는 데이터 집합의 실제 색을 설정합니다. 가장자리에서 나는 약간 더 어두운 색상을 원해, 그늘의 모습을주고 싶습니다. 논리적으로, 또한 A가 있습니다 d3.rgb (). 어두운 (k) 우리가 사용할 수있는 것.

 GRADIENTRADIAL.APPEND ( "STOP")
.attr ( "오프셋", "0 %")
.attr ( "stop-color", 함수 (d) {
반환 D3.RGB (D.Color). 뇌관관 (1); });
GradientRadial.Append ( "STOP")
.attr ( "오프셋", "50 %")
.ATTR ( "STOP-COLOR", 함수 (D) {return d. color;});
GradientRadial.Append ( "STOP")
.attr ( "오프셋", "100 %")
.attr ( "stop-color", 함수 (d) {
반환 D3.RGB (D.Color) .Darker (2.5); });

이 작업을 수행 한 후 HTML을 검사 해야하는 경우 8 개의 다른 방사형 그라디언트가 있습니다. 마지막으로, 우리는 8 개의 서클을 만들고, 데이터에 의해 정의 된 반지름을주고 올바른 그라디언트로 채 웁니다.

 svg.selectAll ( ". 행성")
.Data (행성)
.enter (). 추가 ( "원")
/ * 클래스, 위치 및 RADIUS 속성을 설정 ... * /
. 스타일 ( "채우기", 기능 (d) {
"URL (# 그라디언트 -"+ D.Planet + ")"를 반환합니다. });

나는 또한 자신의 방사형 그라디언트가있는 태양을 추가했지만, 나는 떠났다. Cx. , Cy. 과 아르 자형 의 기본 설정으로 50 % 태양이 중앙에서 바깥쪽으로 빛나는 것처럼 보이게합니다.

면책 조항 : 모든 구체의 직경이 서로에 대해 정확하지만, 거리는 물론 완전히 가짜입니다. 그리고 토성이 반지가 없다는 것을 유감스럽게 생각합니다

방향으로 노는

우리는 이제 데이터를 기반으로 색상 측면을 설정하는 방법을 조사했지만 더 많은 가능성이 있습니다. 우리는 각 그래디언트의 방향조차도 데이터를 기반으로 모든 것을 실질적으로 설정할 수 있습니다.

이것을 시도하려면 Marvel Cinematic Universe의 복수 자 간의 협력을 보여주는 D3 코드 다이어그램을 만들어 봅시다 (그림 5). 6 명의 승수원간에 운영하는 코드는 둘 다 나타나는 영화의 수에 따라 크기가 조정됩니다. 우리는이 코드를 간단한 선형 그라디언트로 채우고 한 복수 자의 색상에서 다른 복수의 색으로 변화합니다.

코드는 일반적으로 정확하게 가로 또는 수직이 아닙니다. 그래서 우리는 x1을 설정해야합니다. x2. , y1. 과 y2. 각 복수 자의 외부 아크의 위치를 기반으로하는 값. 이 데이터는 원래 데이터 집합이 아니지만 D3 's에 제공 한 후에 d3.layout.Cord. 기능, 각 아크의 시작 및 끝 각도가 포함 된 새로운 데이터 세트를 다시 가져올 것입니다 ( d.Source.startangle 과 d.target.endangle 짐마자 이것은 그라디언트를 만드는 동안 우리가 공급하는 데이터 세트입니다.

Figure 5 Each chord has its own unique gradient, where the orientations (and colour) are defined by the data — 그림 5 각 코드에는 고유 한 고유 한 그라데이션이 있으며 방향 (및 색상)이 데이터에 의해 정의됩니다.

우리는 코드의 한쪽 끝에서 다른 한쪽 끝에서 실행되는 보이지 않는 라인의 픽셀 위치를 다른 것으로 알아야합니다. 그런 다음 이들은 다음을주기 위해 사용됩니다 x1, .., y2. 각 그라데이션의 속성. 우리는 코드 다이어그램 반경과 각 복수 자 호를 따라 중간에 위치하여 이러한 위치를 되돌릴 수 있습니다. 전체 삼각법 수식은 다음 코드에서 제거되었지만 이 문서에 수반되는 Github Repo ...에

각 코드에 대해 고유 한 ID를 만들려면 코드의 각 끝에있는 Avenger의 색인 값의 문자열 조합을 만듭니다. D3의 d3.layout.Cord. 항상 하나 (복수 자)를 설정하십시오 출처 그리고 다른 것 표적 독특한 쌍을 만듭니다. 나중에 코드를 그릴 때 같은 기술을 사용하여 올바른 그라데이션을 호출 할 수 있습니다.

 var grads = svg.append ( "defs")를 선택하십시오. selectAll ( "lineargradient")
.data (Chord.Chords ())
.enter (). 추가 ( "lineargramient")
.attr ( "ID", 함수 (d) {반환 "그라디언트 -"+ d.Source.
색인 + "-"+ d.target.Index; })
.ATTR ( "그라데이션", "UsersPaceOnuse")
// 코드의 한쪽 끝의 픽셀 위치
.attr ( "x1", 함수 (D, I) {return / * ... trigonometry를 기반으로
d.Source 값 ... * /; })
.attr ( "y1", 함수 (d, i) {return / * ... * /})
// 화음의 다른 쪽 끝의 픽셀 위치
.attr ( "x2", 함수 (d, i) {return / * ... * /})
.attr ( "y2", 함수 (d, i) {return / * ... * /});

각 복수자가 자체 색인 번호로 정의되기 때문에 색상 기능을 만들 수 있습니다. 그림 물감 , 그것은 인덱스 값당 각 복수 자의 색상을 반환합니다. 이렇게하면 두 가지 색상이 멈 춥니다면 올바른 색을 쉽게 참조 할 수 있습니다.

 GRADS.APPEND ( "STOP")
.attr ( "오프셋", "0 %")
.ATTR ( "STOP-COLOR", 함수 (D) {반환 색상 (DSOURCE.INDEX);
});
GRADS.APPEND ( "STOP")
.attr ( "오프셋", "100 %")
.ATTR ( "STOP-COLOR", 함수 (D) {반환 색상 (D.TARGET.INDEX);
});

남은 모든 것은 코드의 채우기 스타일을 설정하면서 올바른 그라디언트 ID를 호출하는 것입니다 (그라디언트 ID를 설정하는 데 사용한 것과 동일한 함수로 동일한 함수).

반올림

이 튜토리얼에서는 데이터 시각화에서 SVG 그라디언트를 사용하는 4 가지 방법을 살펴 보았지만 항상 할 수있는 일이 항상 있습니다. 그라디언트 애니메이션을 사용하면 예를 들어 데이터 시각화의 한 부분에서 다른 부분으로의 흐름을 시뮬레이션 할 수 있습니다.

따라서 다음에 데이터 시각화를 디자인 할 때 창의력을 무료로 실행하십시오. d3.js를 사용하면 도구의 한계라고 생각하는 것에 의해 제한 될 필요가 없습니다. 사고가 아닌 사고와 노력으로 가장 놀라운 일을 할 수 있습니다.

Nadieh의 세션을 놓치지 마십시오. SVG는 단순한 모양을 넘어 런던을 창출하며 9 월 21 일 ~ 21 일. 지금 예약 ...에!

이 기사는 원래 나타났습니다 그물 잡지 문제 280; 여기 그것을 구입하십시오 ...에!

SVG 그라디언트가있는 차트 D3.js 차트

선형 그라디언트

부드러운 전설

데이터 기반 그라디언트

방향으로 노는

반올림

어떻게 - 가장 인기있는 기사

사진 및 이미지 용 클라우드 스토리지 : 작업을위한 최고의 구름을 선택하는 방법

예술에서의 foresortening의 필수 가이드

Framer X를 사용하여 대화 형 프로토 타입을 구축

현지 개발 환경을 설정하는 방법

Photoshop에서 현실적인 파도를 페인트하는 방법

Zbrushcore에서 디지털 방식으로 조각하는 방법

Angular에서 전체 페이지 웹 사이트를 만드는 방법

Zbrush에서 만화 머리를 조각하고 포즈하는 방법

카테고리