SVGとD3.jsの入門まとめ - Qiita
最近勉強し始めたので、備忘録も兼ねてSVGやD3.jsなどの全体的且つ基本的なところを浅く広く触れます。 SVGとは Scalable Vector Graphicsの略。普通のビットマップ画像と比べて、拡大しても荒れたりしません。 その代わりに小さい画像で凄い複雑な構造になっていると、負荷が高くなったりします。 IE9以前だとSVG自体やフィルターなどの機能が使えなかったりするので、どうしても古いブラウザまでサポートしないといけない場合は諦めて普通にビットマップ画像を利用します。 D3.jsとは SVG含めたHTML上でのビジュアライズやインタラクティブな処理・アニメーションが色々できるjsのライブラリ。 シンプルな記述で凝った表現のものが作れます。インタラクティブなグラフ（プロット）を作ったりなどに使われます。 2019年1月現在、githubのリポジトリにおけるスター数が8万を超えて
d3-graphvizを使ってブラウザ上にフローチャート図を表示しよう - はるなぴログ
d3-graphvizを使用してブラウザ上にフローチャート図を表示する方法について説明します。 D3.jsとGraphvizを使用して動的グラフをブラウザで表示してみましょう。 いちいち画像ファイルを出力しなくともDOT言語で記述したグラフをブラウザに表示することができ大変便利です！ d3-graphvizとは ウェブブラウザにフローチャート図を表示する d3-Graphvizの使い方 はてなブログで使う方法 d3-graphvizとは d3-graphvizとはDOT言語で書かれたファイルをGraphvizを用いてブラウザ上に表示させるオープンソース・ソフトウェアです。 Githubにソースがあります。 github.com D3.jsとはブラウザ上で動的にコンテンツを扱うJavaScriptライブラリです。 公式サイトはこちらをご参照ください。 d3js.org d3-graphviz
Google Apps Scriptを使ってスプレッドシートをD3.jsで可視化する | DevelopersIO
データアナリティクス事業本部、池田です。 設計作業の中で、各処理の関連性（先行・後続、依存関係など）を有向グラフとして可視化することがありました。 始めは PlantUMLのオブジェクト図 で作図をしていたのですが、 表示する要素やそれらをつなぐ線の数が多くなると見づらくなってしまいました。 そこで、 D3.js を使用して情報の可視化 を試みました。 加えて、情報の更新を容易にするため、Google スプレッドシートを併用することにしました。 （細かいGoogle Apps Scriptの操作説明は省略しておりますので、 弊社の他のブログ などを参考にして下さい。 また、本文では以降それぞれ、GAS・スプレッドシート・d3と表記致します。） 作成結果 ブラウザ上で、3ファイル作るだけ で可視化できました。 こんなの（PlantUML）が ↓ こうなる（d3） スクリーンショットにしてしま
D3.jsを使ってかっこいい相関図を書きたい - Qiita
自分用にまとめてた記事を公開します。 D3.jsを勉強中です。 D3.jsを使ってかっこいい相関図を書きたいなぁと思っていろいろ試行錯誤しています。 試行錯誤の元は、D3js.orgのExamplesの中にあったこれです。 (いつのまにやらv4系にアップデートされてますね) 基本的なお話 相関図のようなグラフの場合、上の画像の●をnode、引かれている線をlinkと呼びます。 あと、基本的にブラウザはChrome推奨です。 D3.jsで書いたけど、実際svgはどうかかれてるんだろうって思ったときは、svg領域上右クリックから開くことができるChromeの検証画面で確認しましょう。 データを表示しようとしたら[object Object]と出てこまったら、以下のコマンドを差し込んで、データの中身をコンソールに表示させましょう。（dは適宜変更して･･･） 余談ですが、レ・ミゼラブルは、ヒュー・
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
