D3.js 3.5の新機能、Rounded ArcでApple Watch的UI

d3.js Advent Calendar 2014の20日目です。（だいぶ遅くなってすみません、Better late than neverということで‥）

少し前に D3.js v3.5がリリースされましたね。いくつかの新featureがありましたが、個人的にはarcで角丸が出来るようになったのが目を引きました。D3.jsは基本的にプリミティブな形を使ってビジュアライズしますが、そうするとどうしても「D3.js」感が強すぎてしまい、個性を出すのが難しいこともあります。そういった意味でこういった細かい見た目が調節できるようになるというのはうれしい機能です。

実装的には

arcのgemeratorを作るときに以下のように

var arc = d3.svg.arc()
  .cornerRadius(20)
  .innerRadius(100)
  .outerRadius(120);

cornerRadiusという関数を呼ぶだけです。

どういったものかはオフィシャルのデモ見たいただければ一目瞭然です。

Arc Corners

http://bl.ocks.org/mbostock/aff9e559c5c9968b7ac6

Arc Corners II

http://bl.ocks.org/mbostock/f8f88029f3a5fde00407

今回はこのcornerRadiusを使って、Apple Watch的UIをd3.jsで作ってみたいと思います。

これはarcの角丸が指定できることで表現しやすくなったデザインだと思います。

1.まずは早速cornerRadiusを使って、サークル状のarcを作ります。

2.次は背景をつけます。だいぶそれっぽくなって来ましたね。

3.ただ、角丸にすることで開始点は0にも関わらず、少し進んで（ずれて）見えてしまいますね。ちょっといけてないので、角丸の分だけ前後に開始点、終点をずらします。 これでたいぶ自然に見えるようになったのではないでしょうか？

4.次にアニメーションとアイコンをつけて完成です。

実際のiWatchのデモはもっと細かいアニメーションしてますが、ひとまずそれっぽいものはできたと思います。

iconのパスデータはIllustratorでつくってsvgで出力して作ってます。

このようにcornerRadiusを使うことで表現に幅が出来、いままでとは違ったデザインが出来るようになります、ぜひどんどん使っていきましょう。

Enjoy cornerRadius and Have a Happy holiday!