Interactive Charts with D3.jsby Amelia Wattenberger on June 4th, 2019 Learn how to visualize data with Fullstack D3 and Data Visualization You did it! You grabbed a data set and visualized it, right here in the browser. Congratulations, that is no easy feat!
ツイートに収まる文字数のソースコードだけで幾何学模様が動く「t.d3fc.io」がおもしろすぎ
コンピューターに指令を与えるプログラムを書くと聞くと膨大な量の文字列を書いて……と思わず連想してしまいますが、「t.d3fc.io」はなんとTwitterのツイート1回分の文字数で完結するソースコードが集められたサイトで、実際にソースコードによって描かれる幾何学模様を楽しめるうえに、自分で書いた自作コードを投稿できるようにもなっています。 t.d3fc.io https://t.d3fc.io/ サイトを開くと目に入るのが「A collection of tweet-sized d3 creations(ツイートサイズのd3作品のコレクション)」というキャッチコピー。JavaScriptのライブラリ「D3.js」を使ったソースコードが集められています。なお、「ツイート1回分」とは言っても、Twitterの文字数制限である140文字ではなく、実際には116文字＋ヘルパーという上限になっている
簡単にリッチなチャートが作れるC3.jsを使ってみた - undefined
C3.jsとは? C3.js | D3-based reusable chart library C3 はチャートに特化したビジュアライゼーションライブラリです。D3 のラッパーライブラリで、D3 の見た目の美しさやインタラクション性などの特徴を残しながら、チャートライブラリとして分かりやすいインターフェースを提供するという方針で開発を進めています。 http://blog.xica-inc.com/about-xica/member-12/ これはまではhighchart.jsを使っていましたが、商用利用は有償だったりするので今回C3.jsをいじってみます。 サンプル どんなチャートが作れるか以下のサンプルを見れば分かります。 C3.js | D3-based reusable chart library 使ってみる 音ゲーなどではゲーム終了時にスコアの軌跡がグラフとして描画されたりしま
D3.jsにあてはまらないこと | POSTD
最近D3.jsをかなりいじってみました。APIをあれこれ調べ、すこし複雑なチャートを構築した後、長い間D3を誤解していたことに気づきました。それは私だけではありません。友達と話してみると、彼らもD3について勘違いをしています。そこで、よくある誤解のいくつかをはっきりとさせるために、この記事を書く事にしました。 D3はチャート・ライブラリではありません D3のホームページに行くと、たくさんの素晴らしいチャートとビジュアライゼーションを見ることができます。しかし、D3は、 Highcharts や Chart.js あるいは Google Charts のようなチャート・ライブラリではありません。ただ単に、データセットを受け渡すことや、必要なチャートのタイプ指定、凝ったチャートを入手することはできません。D3はそれよりもずっと低レベルなのです。D3上に構築されたチャート・ライブラリでは、たとえ
【D3.js】ドロネー三角分割図を作成してみた
example ボロノイ図と対になるドロネー図をGoogle Map上に表示してみました。 D3がドローネ図を描画するために必要な座標の計算を行ってくれるので、簡単に表示することができます。 【参考】 ドローネ図 サンプル ドローネ図を描いている部分だけ。 //ボロノイ変換関数 var voronoi = d3.geom.voronoi() .x(function(d){ return d.x } ) .y(function(d){ return d.y } ); //ドロネー座標データ取得 var delaunay = voronoi.triangles(positions); //ドロネー図パス描画 var du = svgoverlay.selectAll(".du") .data(delaunay) .enter() .append("path") .attr("class", "
ボロノイ図を使ってラベルの重なり合いを解消する
画像をクリックすると、デモページに飛びます。 見づらいラベル 地図上に沢山のラベルを並べると、位置によっては重なり合ってとても見ずらくなります。 このラベルの配置位置をボロノイ図を利用して重なり合わないように配置してみます。 母点から中心点へ まず、ポイントを母点としたボロノイ図を描きます。 各ボロノイのセル（ボロノイ領域）の中心点を求め、母点から中心点へのラインを引きました。 ボロノイ領域の中心点は、母点から見て空きスペースの方角となります。 この角度を利用してラベルを配置します。 中心点に向けてラベルを配置 単純にラインに沿う角度でテキストを回転(rotate)させました。 重なり合いは解消されましたが、必ずしも見やすくはありません。 （これはこれで活用方法がありそうですが） ラベル開始位置をずらす 母点からボロノイ領域の中心点の方角へ、ラベルの開始位置を少しずらして配置した例です。
Trianglify
About My name is Quinn Rohlf, and I'm a roaming engineer/designer based in the western United States. Trianglify is an open-source library I wrote to generate low-poly style patterns by combining a Delaunay triangulation with some nice colors. It was originally released in April of 2014. It has a sibling project, Trianglify.io, that provides a user-friendly GUI for the library and helps fund libra
「エンジニアのためのデータ可視化 実践入門」を読みました - from scratch
エンジニアのための データ可視化[実践]入門 ~D3.jsによるWebの可視化 (Software Design plus) 作者: 森藤大地,あんちべ出版社/メーカー: 技術評論社発売日: 2014/02/20メディア: 単行本（ソフトカバー）この商品を含むブログ (4件) を見る 読みきりました。はぁー学生の時にこの本読みたかった... この本には以下の3点の要素があります。 データ可視化に関しての入門 D3.jsの入門 D3.jsによる可視化の実践 これらのどれかに興味があれば読んだほうがいいです。それぞれ紹介していきます。 データ可視化に関しての入門 可視化は表現方法の一つであり、コミュニケーションを円滑にするためのツールです。そして各グラフ一つとっても本来の使い方があり、間違った使い方をすると円滑になりにくいです。 一つ僕が大学生時代に誤用していたグラフの例を紹介します。 pre
BirdWatch·TwitterストリーミングAPIを使ったキーワード解析ツール MOONGIFT
Twitterにはリアルタイムに大量のメッセージが送られています。大多数は取り立てて意味のないデータかも知れませんが、その中から役立つデータをピックアップするのは大変なことです。分析している間に次のデータがきてしまい、すぐにトレンドが変化してしまいます。 そんなリアルタイムのTwitterトレンドビジュアル化をしてくれるソフトウェアがBirdWatchです。 BirdWatchの使い方 例えばJavaによる検索結果。グラフやワードリスト、ツイートが一覧になって表示されています。 下の方には一緒に出てくることの多いキーワードが並んでいます。 BirdWatchはTwitterのストリーミングAPIからデータを受信し、それをElasticSearchへ放り込んでインデックス化しています。そしてそれを検索してグラフを生成しています。ライブラリとしてAngularJS、D3.jsなどを使い、フレー
触れる可視化--データビジュアライゼーションとは何か（後編）
印刷する メールで送る テキスト HTML 電子書籍 PDF ダウンロード テキスト 電子書籍 PDF クリップした記事をMyページから読むことができます 前編では、データビジュアライゼーションが必要になった背景やその定義を解説しました。後編では、データビジュアライゼーションを取り巻く最新技術や事例を紹介します。 「D3」で変わるデータビジュアライゼーション 最近はデータビジュアライゼーションがブラウザ上で実装可能になってきました。たまにブログ記事などでブラウザでの機能対応が劣化版かのように取り上げられることがありますが、それは「D3」の登場に代表される最近のライブラリの充実により、過去の認識になるでしょう。 D3というのはJavaScriptとSVG（Scalable Vector Graphics）というウェブ標準機能に準拠したライブラリで、統計チャートの表示を支援する機能や、地理、地
d3.unconfレポート[後篇] | Visualizing.JP
参加者がディスカッションの議題を持ち寄りunconferenceがスタートしました。実際のタイムテーブルはこのような感じです。 * http://visfest.com/d3unconf/ せっかくなので私も一つ提案してみました。Network visualizations; d3 + sigma + Cytoscape etc.と言うのが私の提案したセッションです。 実際のディスカッション 普通のカンファレンスとは異なり当日にテーマを決めるため、誰かがスライドを使って話すと言う事は無く、イーゼルパッドとペン、そしてラップトップを持ち寄り、そのテーマについて皆で話し合います。当然全て英語ですので、日本からも参加してみたいと言う方はここで尻込みしてしまうかもしれませんが、基本的に話を聞くだけのカンファレンスとはまた違った面白さもありますので、機会があればぜひ挑戦してみてください。各トラックは
![d3.unconfレポート[後篇] | Visualizing.JP](https://cdn-ak-scissors.b.st-hatena.com/image/square/b3238d5087ee0f54859b5e2d763b443cdd73e37d/height=288;version=1;width=512/https%3A%2F%2Fvisualizing.jp%2Fassets%2Ffi_D3Conf2014-2.png)
d3.unconfレポート[前篇] | Visualizing.JP
Keiichiro Ono UC, San Diego School of Medicine Cytoscape Consortium はじめに まず自己紹介をさせていただきます。私はアメリカ西海岸、カリフォルニア州の最南端に位置するサンディエゴ在住のソフトウェア開発者です。カリフォルニア大学サンディエゴ校(UCSD)と言う大学の医学部で、生物学者や医師に混じって彼らが研究で必要とする各種ツールを開発しております。分野としてはbioinformaticsと呼ばれるものです。 先週の土曜日(3/29/2014)、サンフランシスコにあるGitHub本社にて行われたd3.unconfというD3.jsや可視化周辺の実務的な話題を扱う会議がありました。Cesar Chavez Dayで三連休だと言うこともあり1、私にとってはちょうどいいタイミングでしたので、久しぶりにサンフランシスコまで足を伸ばして
![d3.unconfレポート[前篇] | Visualizing.JP](https://cdn-ak-scissors.b.st-hatena.com/image/square/68922726f2804a41fcb86e25b0ee9b98cbbc7428/height=288;version=1;width=512/https%3A%2F%2Fvisualizing.jp%2Fassets%2Ffi_D3Conf2014-1.png)
Explain Git with D3
We are going to skip instructing you on how to add your files for commit in this explanation. Let's assume you already know how to do that. If you don't, go read some other tutorials. Pretend that you already have your files staged for commit and enter git commit as many times as you like in the terminal box. git branch name will create a new branch named "name". Creating branches just creates a n
Objective-Cのクラスの依存関係を「D3.js」でビジュアライズするライブラリ - Over&Out その後
Objc-dependency-visualizerというOSSツールを使うと、アプリ内で使用している Objective-C クラスの依存関係をビジュアライズしてくれます。 試しに "iOS7 Sampler" でやってみると、こんな感じのを生成してくれました。 実行するのはrubyスクリプトで、依存関係だけが記述されているだけのシンプルなjsファイルが生成されます。 で、閲覧時にはリポジトリに同梱されている index.html 内のJavaScriptから、生成したjsファイルとビジュアライゼーション用 JavaScript ライブラリ「D3.js」を使用してビジュアライズされます。 そんなわけで、引っ張ったり特定の箇所にフォーカスしたり表示をいろいろカスタマイズしたりできます。 （SVProgressHUDにフォーカスした図） 使い方 GitHubからcloneしてきます。 git
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の可視化」を執筆しました - PolyPeaceLight
僕のような人間が書いていいのか、とは執筆前・執筆中・そして執筆が終わった今もずっと思っていますが、兎にも角にも書き終わりました。 エンジニアのための データ可視化[実践]入門 ~D3.jsによるWebの可視化 (Software Design plus) 作者: 森藤大地,あんちべ出版社/メーカー: 技術評論社発売日: 2014/02/20メディア: 単行本（ソフトカバー）この商品を含むブログを見る 2月20日に書店に並ぶそうです。 内容について うまく伝えられているかはわからないですが下記のようなことを意識して書きました データ可視化は情報との対話であり、「データに存在する事実を掬い上げやすく加工する」「データに存在する事実を効率的に伝える」作業そのものである データ可視化はデータ処理(収集・保持・分析・解析)と企画者(施策・経営)のコミュニケーションを円滑にするものである 上記を実現す
![「エンジニアのためのデータ可視化[実践]入門 ~D3.jsによるWebの可視化」を執筆しました - PolyPeaceLight](https://cdn-ak-scissors.b.st-hatena.com/image/square/e6a8a762f50a4289ebcd4492c54e687513556e4e/height=288;version=1;width=512/http%3A%2F%2Fecx.images-amazon.com%2Fimages%2FI%2F51PyKbKHGoL.jpg)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Maze Tree
Home
http://www.delimited.io/blog/2014/2/20/fractal-ferns-in-d3
http://sathomas.me/jsdataviz/