SVGを画像みたいに保存できるD3 Plugin作った - Qiita
D3.jsなどのライブラリの普及によってWebでデータビジュアライゼーションをするということが流行りつつあります。 さて、D3.jsでは主にSVGとして画を描くことになるんですが、書き出されたSVGを簡単に保存して他のドキュメントに貼付けるといった手段がないので困ることがあります。 せっかくSVGで描かれた画をスクリーンショットで保存するのはイマイチですよね。 というわけで、img要素の画像のように右クリックをして保存ができるようなD3 Plugin、d3-downloadableを作ってみました。 インストール bowerにパッケージを登録してあります。 npmも対応しました。(2015/05/12) 使い方 script、cssを読み込んで、svg要素のselectionに対して、downloadable()をcallするだけ。 svg要素を右クリックするとメニューが表示され、SVG、
2時間縛りでd3.js挑戦してみた - mizchi's blog
何この記事 あんちべという人から無茶ぶりがきたので対応した mizchi、d3ブログ書いてくれた呑む— 3D円グラフ皆殺し (@AntiBayesian) 2014, 3月 2 @AntiBayesian D3まだ極めてないです— 高意識エネルギー (@mizchi) 2014, 3月 2 @mizchi 2時間やろう、早く極めたまえ— 3D円グラフ皆殺し (@AntiBayesian) 2014, 3月 2 @AntiBayesian おっしゃ待ってろ— 高意識エネルギー (@mizchi) 2014, 3月 2 前提 よく誤解されるんですが、D3.jsはグラフ描画ツールではなく、JavaScriptでSVGを生成するためのjQuery風DSLで、DSLとはいえかなりローレベルなライブラリです。SVGはベクタグラフィックスを生成する規格。ブラウザ上のSVGは、図形を書けるDOMであり、他
「エンジニアのための データ可視化[実践]入門 ~D3.jsによるWebの可視化」感想
データの可視化とは、「データに含まれる事実・示唆を効率よく発見する技術」、「データから発見した事実・示唆を明確に伝える技術」ということができます。本書では、データ可視化の基本に始まり、何を可視化すべきで、誤った考え方は何かなどを解き明かしたあと、JavaScriptライブラリD3.jsの使い方、D3.jsによるWebの可視化のさまざまなケーススタディまで、エンジニアの方がさまざまな業務の現場で直面するであろうデータ可視化の考え方と手法をわかりやすく解説します。 @AntiBayesianさんより献本をいただきました。 ありがとうございます。 オーライリーから出版されたD3本と発売日が近かったこともあって、「D3本」としての印象が強いようですが、本書は「データ可視化」に関する入門書です。 「データの中から重要な事実・示唆を見つけ出す」「見つけた情報を正しくわかりやすく伝える」といったデータビ
![「エンジニアのための データ可視化[実践]入門 ~D3.jsによるWebの可視化」感想](https://cdn-ak-scissors.b.st-hatena.com/image/square/f7cc07f2bc834e0079b4e8b12b2c8dca05f1fd0c/height=288;version=1;width=512/https%3A%2F%2Fgunmagisgeek.com%2Fblog%2Fwp-content%2Fuploads%2F2014%2F02%2F5163XBvWrkL._SL160_.jpg)
エンジニアのためのデータ可視化実践入門という本を書いた - あんちべ！
2014/10/14 追記 本書87ページに「母数」という単語が複数回出てきますが、 これは全て「分母」とすべきでした。*1 通常、統計学の文脈では、母数は各確率分布を特徴付ける変数を指す単語であり、 例えば正規分布は平均と分散という二つの母数によって形状が決定されます。 決して母数と分母（あるいは全数）と誤解してはなりません。 しかし母数と分母を混同することは本当によくあることで、 本書はこのような頻出する誤解を訂正し、 皆様が統計を用いる際の失敗を一つでも減らす という目的で執筆に至ったにも拘らず、 まさか本書でこのような重大な失敗をしてしまったことに対し 心からお詫び申し上げ訂正させて頂きます。 なお、問題個所の記述は共著者の森藤氏ではなく 私が記述したものであり、全責任は私にあります。 本を書くに当たり、誤字脱字や言い回しの不備は出来る限り無くすべきですが、 人間であるためミスをす
TypeScriptとd3.jsでグラフを描こうぞ 2 - かずきのBlog@hatena
下の続き。 TypeScriptとd3.jsでグラフ描こうぞ - かずきのBlog@hatena y方向の値の調整 パソコンとかの描画関係のAPIの座標系は左上が0,0なのが一般的です。svgも例にもれず。でも、グラフの座標は左下が0,0だったりしますよね。ということで、y座標のスケールのrangeを逆転させると、いい感じになります。 // yの最小値とyの最大値を500～0の間にスケーリングするryを作成 var ry = d3.scale .linear() .domain([d3.min(datas, a => a.y), d3.max(datas, a => a.y)]) .range([500, 0]); // ここを0, 500だったのを500, 0にする これでデータの出力が逆になるので、いい感じに左下が小さい値になります。d3.jsのチュートリアルにもある通りですね。 軸の
Cloud FormerのJSONを可視化するツールを作ってみた - Qiita
こんにちは。 もともとGoogle好きなWeb屋なのに、お仕事的にAWSでインフラっぽいお仕事をしているサントリーこと大橋です。 今日はCloud FormerのJSONを可視化する「Cloud Former Visualizer」ってのを作ったぜという話です。 Cloud Former Visualizer ※なおこのページの使い方は下の方に書いてあります。 ※ご利用は自己責任でお願いします。 コードはここ 技術的な話をキボンヌの場合はストック数が多くなったら書きます。 バグとか要望はgithubのissueにぶっこんで下さい。 導入 皆さんCloud Formationはお好きでしょうか？ 個人的にはシステム構成をテキスト(JSON)として扱え、テンプレート化できて非常に素敵ですし、また現状のAWSの構成をJSONで吐き出すことが可能なCloud Formerはとても素敵なツールだと思
D3 データ視覚化 | 黒くないすべてのものはカラスではない
Mike Bostock 氏による JavaSctip データ視覚化ライブラリ D3.js の文書（各種チュートリアル、API) の日本語化を行うプロジェクトです。あわせて関連技術の TopoJSON も扱います。 ◆ d3js.org 日本語化プロジェクト プロジェクトの進捗状況、および翻訳済ページの一覧を掲載します。 ◆ d3: データ・ドリブン・ドキュメント D3.js のトップページの翻訳です。D3.js がどのようなライブラリなのか、簡潔に解説と使用方法の説明を行います。 ◆ おもな翻訳済ページ 三つの小円 セレクションとその操作について、D3.js のコアとなる概念についてわかりやすく解説します。 D3.js バージョン3の機能の紹介 2012年末に公開されたバージョン3では、地図視覚化機能が強化され、さまざまな投影法プラグインが追加されました。 D3.jsとTopoJSO
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Circle Packing, Bubble Chart