Boost D3.js biểu đồ với độ dốc SVG

Nadieh BREMER sẽ ở Tạo ra London. vào tháng 9, nơi cô ấy sẽ thể hiện cách lấy Svg ngoài hình dạng đơn thuần , Sử dụng JavaScript, CSS và D3.JS để tạo hình ảnh dữ liệu thậm chí còn thú vị và thú vị hơn. Đặt vé của bạn ngay bây giờ !

D3.js đã chiếm lĩnh thế giới của trực quan hóa dữ liệu tương tác. Một số lượng lớn các ví dụ có thể được tìm thấy, mỗi ví dụ thể hiện sự vui chơi và xoắn hữu ích của riêng mình trên thư viện. Bạn thấy đấy, D3 không phải là một thư viện biểu đồ, nhưng một cái gì đó tốt hơn nhiều. Nó chỉ cung cấp cho bạn các công cụ cơ bản để tạo hình ảnh trực quan dữ liệu và thực hiện để cho phép bạn tạo ra bất cứ điều gì bạn có thể nghĩ về. Mặc dù một số ý tưởng có thể mất nhiều thời gian hơn những ý tưởng khác, cuối cùng bạn sẽ đến đó. Và sự tự do này là chính xác những gì tôi yêu thích về D3.

Ở lõi của nó, mỗi hình ảnh D3 được xây dựng từ các yếu tố SVG. Ví dụ: đối với mỗi datapoint trong biểu đồ phân tán, để tạo biểu đồ thanh, dưới dạng trục, tọa độ song song hoặc biểu đồ dốc, như nhãn và cực kỳ hữu ích cho mọi thứ khác. Hơn nữa, SVGS độc lập với độ phân giải, do đó trông tuyệt vời trên bất kỳ mức độ hiển thị hoặc mức thu phóng.

Ngay cả khi bạn chỉ sử dụng SVGS cho các hình dạng của chúng, bạn có thể tạo các hình ảnh tuyệt vời. Tuy nhiên, họ có thể làm nhiều hơn nữa - ví dụ, hãy nghĩ về các bộ lọc SVG. Trong hướng dẫn này, chúng ta sẽ có một sự lặn sâu vào một khía cạnh cụ thể và xem xét một vài cách khác nhau mà nó có thể được áp dụng để làm sáng lên một hình ảnh trực quan. Hãy để tôi giới thiệu bạn với độ dốc SVG!

Tìm tất cả các tập tin bạn cần cho hướng dẫn này đây .

Độ dốc tuyến tính

Đôi khi khi tôi tạo một biểu đồ dòng với một dòng duy nhất, nó chỉ cảm thấy hơi trống và có thể bị lạc trên nền trắng. Để làm cho nó nổi bật hơn, tôi đặt một gradient ánh sáng bên dưới nó bằng cách sử dụng D3 d3.svg.area. Chức năng, chứa đầy một gradient SVG (xem Hình 1).

Tôi muốn gradient chạy theo chiều dọc từ trên cùng (nơi nó có cùng màu với dòng nhưng một sắc thái sáng hơn) ở phía dưới (nơi nó sẽ trở thành màu trắng hoặc trong suốt). Đây là những gì được gọi là một gradient tuyến tính; một cái gì đó thay đổi màu sắc dọc theo một đường thẳng.

Chúng tôi bắt đầu với một SVG. Đây là bức tranh trên đó biểu đồ đường dây của chúng tôi sẽ được rút ra. Sau đó chúng tôi tạo ra một defs. yếu tố trên đó chúng ta có thể nối thêm một lineargradient. thành phần. Điều rất quan trọng là cung cấp cho Gradient một ID duy nhất - chúng tôi sẽ sử dụng điều này sau này khi chúng tôi cần cung cấp cho khu vực bên dưới dòng điền của nó.

 var areaGradient = svg.append ("defs")
.append ("lineargient")
.attr ("id", "Khu vựcGradient")
.attr ("x1", "0%"). Ống dẫn ("Y1", "0%")
.attr ("x2", "0%"). Ống dẫn ("Y2", "100%"); 

Hai dòng cuối cùng của mã trên xác định cách gradient nên chạy. Hãy nghĩ về nó như một dòng vô hình: x1. và Y1. là các vị trí bắt đầu của dòng vô hình và x2. và Y2. Cho biết điểm kết thúc của nó, để đưa ra hướng của gradient. Nó thường dễ nhất để xác định đây theo tỷ lệ phần trăm, mặc dù có thể sử dụng các vị trí pixel chính xác. Theo mặc định, các vị trí đề cập đến hộp giới hạn của phần tử trên đó gradient được áp dụng. Chúng tôi muốn gradient chạy theo chiều dọc, vì vậy x1. và x2. nên giống nhau ( 0% Ổn), Y1. phải là 0% và Y2 100% .

Bây giờ chúng ta có thể xác định màu sắc của gradient. Ít nhất hai màu là cần thiết cho một gradient, nhưng bạn có thể sử dụng nhiều như bạn muốn. Đối với mỗi màu trong gradient bạn thêm một dừng lại thành phần. Trong đó, bạn chỉ định bóng râm với Dừng lại , và vị trí (dọc theo dòng vô hình) nơi bạn muốn màu này tinh khiết (màu chính xác) với bù lại .

Tùy chọn, chúng ta cũng có thể đặt độ mờ đục của mỗi màu với Dừng Opacity. . Ở đây tôi đang làm cho bóng râm nhẹ hơn ở trên cùng và hoàn toàn trong suốt ở phía dưới.

Khu vựcGradient.append ("Dừng")
.attr ("offset", "0%")
.attr ("Dừng màu", "# 21825c")
.attr ("dừng chân", 0,6);
Khu vựcGradient.append ("Dừng")
.attr ("offset", "80%")
.attr ("Dừng màu", "Trắng")
.attr ("dừng chân", 0); 

Bây giờ gradient tuyến tính được thiết lập, chúng ta có thể tạo biểu đồ khu vực và tô nó bằng gradient. Để làm điều này, sử dụng URL (# gradient-id) Trong phong cách điền, cùng với ID duy nhất, chúng tôi đã đặt trước đó.

 svg.append ("Path")
.style ("điền", "url (#areagradient)")
.attr ("d", chức năng (tập dữ liệu)); 

Sau đó, vẽ dòng trên cùng của khu vực này của biểu đồ để người xem có thể đọc kết quả khỏi biểu đồ của bạn. Trong biểu đồ của tôi, tôi cũng đã đặt các vòng tròn để nhấn mạnh các vị trí của các điểm dữ liệu cụ thể.

Một huyền thoại mượt mà

Legends rất phổ biến trong hình ảnh dữ liệu. Khi bạn đang sử dụng màu sắc để thể hiện một khía cạnh cụ thể của dữ liệu của bạn, bạn cần phải giải thích mọi màu có nghĩa là gì. Đây là nơi một huyền thoại đến.

Trong một số biểu đồ, bạn sẽ sử dụng màu sắc để phân biệt giữa các trường hợp rời rạc (ví dụ: các quốc gia khác nhau), trong trường hợp màu sắc thường là tất cả đều rất khác nhau. Tuy nhiên, bạn cũng có thể sử dụng màu để chỉ ra một giá trị định lượng.

Ở đây chúng tôi đại diện cho nhiệt độ bên ngoài (xem hình 2). Màu sắc thay đổi dần dần để chỉ ra nhiệt độ đi từ thấp đến cao. Để thể hiện điều này trong một huyền thoại, chúng ta sẽ tạo ra một hình chữ nhật dài và lấp đầy nó với một gradient đi từ trái sang phải. Chúng tôi có thể sử dụng lại độ dốc mà chúng tôi đã tạo cho biểu đồ dòng của chúng tôi, nhưng đã lật 90 độ (vì vậy x2. Bây giờ chạy đến 100% , hơn là Y2. ). Mặc dù nhìn chung, một bảng màu cầu vồng không được khuyến nghị trong trực quan dữ liệu, mọi người được sử dụng để nhìn thấy các bản đồ nhiệt độ đầy màu sắc và tôi đã chọn chín màu để sử dụng trong ví dụ của chúng tôi.

Thay vì viết ra từng dừng lại Để nối thêm, chúng ta có thể đặt tất cả các màu trong một bộ dữ liệu và sử dụng tiện lợi của D3 dữ liệu bước để làm cho quá trình nhanh hơn. Với D3 có thể truy cập bất kỳ thuộc tính nào của bộ dữ liệu trong các bước chuỗi tiếp theo bằng cách sử dụng hàm ẩn danh, do đó cho phép chúng ta đặt màu và bù trong chỉ hai dòng.

 svg.append ("defs")
.append ("lineargient")
.attr ("id", "Legendgradientmulti")
.attr ("x1", "0%"). Ống dẫn ("Y1", "0%")
.attr ("x2", "100%"). Ống dẫn ("Y2", "0%")
.selectall ("Dừng")
.dữ liệu([
{Offset: "0%", màu: "# 2c7bb6"},
{offset: "12,5%", màu sắc: "# 00a6ca"},
{offset: "25%", màu: "# 00ccbc"},
{offset: "37,5%", màu sắc: "# 90eb9d"},
{offset: "50%", màu: "# ffff8c"},
{offset: "62,5%", màu: "# f9d057"},
{offset: "75%", màu: "# f29e2e"},
{Offset: "87,5%", màu sắc: "# E76818"},
{offset: "100%", màu: "# d7191c"}]
.enter (). Nối ("Dừng")
.attr ("offset", hàm (d) {return d.offset;})
.attr ("dừng màu", chức năng (d) {return d.color;}); 

Như trước, bước cuối cùng là tạo ra một TRỰC TIẾP. và điền vào đây bằng cách sử dụng id gradient độc đáo.

 svg.append ("ort")
.attr ("x", 0) .attr ("y", 0)
.attr ("chiều rộng", 500) .attr ("chiều cao", 20)
.style ("điền", "url (#legendgradientmulti)"); 

Các biểu đồ những huyền thoại này diễn ra được tái tạo sau công việc tuyệt vời của www.weather-radials.com. Hiển thị nhiệt độ ở New York hoặc Bắc Kinh vào năm 2015. Nhiệt độ trung bình mỗi ngày được biểu thị bằng một đường màu và các dòng này được sắp xếp để tạo thành một biểu đồ tròn. Truyền thuyết dưới đây giải thích những gì mỗi màu có nghĩa là. Một biểu đồ sử dụng một gradient từ màu này sang màu khác và các tiến triển khác thông qua tất cả chín màu.

Độ dốc dựa trên dữ liệu

Theo cách tương tự như ví dụ trước, chúng ta cũng có thể tạo nhiều độ dốc. Chúng tôi có thể tạo một gradient độc đáo cho từng điểm dữ liệu, dựa trên một khía cạnh cụ thể của dữ liệu. Tôi đã sử dụng phương pháp này trong một Trực quan của Exopranan. , nơi mỗi hành tinh được trao một gradient dựa trên lớp Stellar của ngôi sao CNTT. Tôi đã sử dụng một hiệu ứng hình cầu tinh tế để tạo ấn tượng mỗi ngôi sao được thắp sáng bởi ngôi sao ở trung tâm.

Vì vậy, hãy quay trở lại thập niên 90 và biến một bộ sưu tập các vòng tròn phẳng đại diện cho các hành tinh trong hệ mặt trời của chúng ta thành các quả cầu trông 3d với độ dốc xuyên tâm (Hình 4). Tôi đã tạo một bộ dữ liệu nhỏ chứa tên và đường kính của hành tinh. Mỗi người sẽ được khái quát bởi một màu, chúng ta sẽ sử dụng để tạo một gradient độc đáo cho mỗi hành tinh.

 var gradientradial = svg.append ("defs")
.selectall ("Radialgradient")
.data (hành tinh)
.enter (). Nối ("RadialGradient")
.attr ("id", hàm (d) {return "gradient-" + d.planet;})
.attr ("cx", "15%")
.attr ("cy", "50%")
.attr ("r", "85%"); 

Mã này hơi khác ở đây: Thay vì đầu tiên nối thêm một yếu tố gradient, giờ chúng tôi ngay lập tức nối thêm những hành tinh tập dữ liệu và chỉ sau đi vào Chúng ta có tạo một yếu tố gradient (trong trường hợp này RadialGradient. ). Bằng cách này, một gradient được tạo ra cho mỗi điểm trong bộ dữ liệu. Giữ ID duy nhất của mỗi điểm bằng cách dựa vào dữ liệu. Chỉ số Tôi Thường hoạt động, nhưng ở đây tên hành tinh an toàn hơn. Điều này đảm bảo chúng ta có thể truy cập gradient chính xác sau này.

Một gradient xuyên tâm hơi khác với một tuyến tính. Chúng tôi tạo nó theo cách tương tự với một vòng tròn SVG: Cung cấp trung tâm của độ dốc đối với các đối tượng giới hạn mà nó sẽ được áp dụng, sử dụng cx. và C y . Những giá trị mặc định là 50% , đó là trung tâm của đối tượng.

Để mô phỏng sự xuất hiện của một ngôi sao tỏa sáng trên các hành tinh từ một bên, chúng ta sẽ di chuyển trung tâm của gradient sang trái bằng cách thiết lập cx. đến 15% . Bán kính của gradient (nơi một điểm dừng gradient của 100% nên kết thúc) được chỉ định bởi ở r . Nó cũng mặc định là 50% , nhưng do chúng ta cx. Offset, đây là bây giờ 85% Vì vậy, nó lấp đầy toàn bộ vòng tròn.

Chúng ta có thể sử dụng dữ liệu hành tinh để nối các điểm dừng màu. Để tạo ra sự xuất hiện của một quả cầu đang được chiếu vào, màu sắc tại 0% nên nhẹ hơn. Bằng cách sử dụng d3.rgb (). Sáng hơn (k) Tôi không phải chỉ định một màu riêng biệt, vì D3 sẽ thực hiện tính toán đó cho tôi. Giá trị K. Xác định mức độ sáng hơn tôi muốn màu sắc trở thành. Ở xung quanh 50% Tôi đặt màu thật trong bộ dữ liệu. Ở rìa tôi muốn một màu hơi tối hơn, tạo sự xuất hiện của bóng râm. Logic, cũng có một d3.rgb (). Darker (K) mà chúng ta có thể sử dụng.

 GradientRadial.append ("Dừng")
.attr ("offset", "0%")
.attr ("dừng màu", chức năng (d) {
trả về d3.rgb (d.color) .Brates (1); });
GradientRadial.append ("Dừng")
.attr ("offset", "50%")
.attr ("dừng màu", hàm (d) {return d.color;});
GradientRadial.append ("Dừng")
.attr ("offset", "100%")
.attr ("dừng màu", chức năng (d) {
trả về d3.rgb (d.color) .darker (2.5); }); 

Nếu bạn đang kiểm tra HTML sau khi chạy điều này, sẽ có tám độ dốc xuyên tâm khác nhau có mặt. Cuối cùng, chúng ta cần tạo tám vòng tròn, cung cấp cho chúng một bán kính như được xác định bởi dữ liệu và điền chúng bằng gradient chính xác.

 svg.selectall (". Hành tinh")
.data (hành tinh)
.enter (). Nối ("vòng tròn")
/ * Đặt thuộc tính lớp, vị trí và bán kính ... * /
.style ("điền", chức năng (d) {
Trả về "url (# gradient-" + d.planet + ")"; }); 

Tôi cũng đã thêm mặt trời, có độ dốc xuyên tâm riêng, nhưng tôi đã rời đi cx. Cái gì C y và ở r với cài đặt mặc định của 50% Để làm cho nó trông giống như mặt trời đang phát sáng từ trung tâm bên ngoài.

Tuyên bố miễn trừ trách nhiệm: Mặc dù đường kính của tất cả các quả cầu là chính xác so với nhau, khoảng cách tất nhiên là hoàn toàn không có thật. Và tôi xin lỗi vì Sao Thổ không có nhẫn

Chơi với định hướng

Bây giờ chúng tôi đã khám phá cách đặt các khía cạnh màu dựa trên dữ liệu, nhưng có nhiều khả năng hơn. Chúng ta có thể đặt thực tế mọi thứ dựa trên dữ liệu - ngay cả các định hướng của mỗi gradient.

Để thử điều này, hãy tạo một sơ đồ hợp âm D3 cho thấy sự hợp tác giữa Avengers trong vũ trụ điện ảnh Marvel (Hình 5). Các hợp âm chạy giữa sáu Avengers có kích thước theo số lượng phim mà cả hai xuất hiện. Chúng ta sẽ lấp đầy các hợp âm này bằng một gradient tuyến tính đơn giản, thay đổi từ màu của Avenger sang màu khác.

Một hợp âm thường không chính xác ngang hoặc dọc. Vì vậy, chúng ta sẽ phải đặt X1, x2. Cái gì Y1. và Y2. các giá trị dựa trên các vị trí của vòng cung bên ngoài của Avenger. Dữ liệu này không nằm trong bộ dữ liệu ban đầu của chúng tôi, nhưng sau khi chúng tôi đã cung cấp cho D3 d3.layout.chord. Chức năng, chúng tôi sẽ lấy lại một bộ dữ liệu mới chứa các góc bắt đầu và kết thúc của mỗi vòng cung (như d.source.startangle. và d.target.endangle. ). Đây là bộ dữ liệu chúng tôi cung cấp trong khi tạo độ dốc.

Chúng ta cần biết các vị trí pixel của dòng vô hình chạy từ một đầu hợp âm cho người kia. Những điều này sau đó được sử dụng để cung cấp x1, .., y2 thuộc tính của từng gradient. Chúng ta có thể áp dụng một số lượng giác bằng bán kính của sơ đồ hợp âm và vị trí nửa chừng dọc theo vòng cung của mỗi Avenger để lấy lại các vị trí này. Công thức lượng giác đầy đủ đã bị xóa khỏi đoạn mã sau, nhưng bạn sẽ tìm thấy nó trong repo github đi kèm với bài viết này .

Để tạo một ID duy nhất cho mỗi hợp âm, chúng tôi tạo một sự kết hợp chuỗi của giá trị chỉ mục của Avenger ở mỗi đầu của hợp âm. D3's. d3.layout.chord. luôn luôn đặt một (của Avengers) để nguồn. và cái còn lại với Mục tiêu , làm cho một cặp duy nhất. Sau đó, khi vẽ các hợp âm, chúng ta có thể sử dụng cùng một kỹ thuật để gọi gradient chính xác.

 var grads = svg.append ("defs"). ChọnAll ("lineargradient")
.data (hợp âm.chords ())
.enter (). Nối ("lineargient")
.attr ("id", chức năng (d) {return "gradientchord-" + d.source.
Chỉ số + "-" + d.target.index; })
.attr ("GradientUnits", "UserSpaceOnuse")
// Vị trí pixel của một đầu hợp âm
.attr ("x1", chức năng (d, i) {return / * ... lượng giác dựa trên
D.Source giá trị ... * /; })
.attr ("y1", chức năng (d, i) {return / * ... * /})
// Vị trí pixel của đầu kia của hợp âm
.attr ("x2", hàm (d, i) {return / * ... * /})
.attr ("Y2", chức năng (d, i) {return / * ... * /}); 

Vì mỗi Avenger được xác định bởi số chỉ mục của chính nó, chúng ta có thể tạo một hàm màu, màu sắc , trả về mỗi màu Avenger trên mỗi giá trị chỉ mục. Điều này giúp bạn dễ dàng tham khảo màu phù hợp trong khi nối thêm hai điểm dừng màu.

 Grads.append ("Dừng")
.attr ("offset", "0%")
.attr ("dừng màu", hàm (d) {màu trở lại (d.source.index);
});
Grads.append ("Dừng")
.attr ("offset", "100%")
.attr ("dừng màu", chức năng (d) {màu trở lại (d.target.index);
}); 

Tất cả những thứ còn lại là gọi đúng gradient id trong khi đặt kiểu điền của các hợp âm (có cùng chức năng như chúng ta đã sử dụng để đặt id gradient).

Tập trung

Trong hướng dẫn này, chúng tôi đã xem xét bốn cách khác nhau để sử dụng độ dốc SVG trong hình ảnh dữ liệu, nhưng luôn có nhiều thứ bạn có thể làm. Với hoạt hình Gradient, bạn có thể mô phỏng một luồng từ một phần của trực quan hóa dữ liệu sang một phần khác.

Vì vậy, lần tới khi bạn thiết kế một trực quan dữ liệu, hãy để sự sáng tạo của bạn chạy miễn phí. Với D3.js, bạn không phải bị hạn chế bởi những gì bạn nghĩ là giới hạn của công cụ. Với một chút suy nghĩ và nỗ lực ngoài hộp, bạn có thể tạo ra những điều tuyệt vời nhất.

Đừng bỏ lỡ phiên của Nadieh, SVG ngoài các hình dạng đơn thuần, tại Generate London, 21-23 tháng 9. Đặt bây giờ !

Bài viết này ban đầu xuất hiện trong Tạp chí Net. vấn đề 280; Mua nó ở đây !