ReactとD3.jsの組み合わせで変わる！JavaScriptアニメーション開発
人気のデータビジュアライゼーションライブラリー「D3.js」をもっと使いやすく、便利にするために。Reactを使ったコンポーネント化に取り組み、リアルタイムで描画されるアニメーションを作ります。 D3は最高です。Webのデータビジュアライゼーション分野におけるjQueryのように、考えられるあらゆることが実現できます。 オンラインで見られる最良のWebのデータビジュアライゼーションの多くがD3を使用しています。D3は素晴らしいライブラリーですが、最近のv4のアップデートで従来よりさらに安定性が増しました。 Reactと一緒に使えば、D3はさらに便利になります。 ちょうどjQueryのように、D3は高性能ですが課題もあります。データビジュアライゼーションが大規模になればなるほど、用いるコードは複雑になり、バグを修正したりアイデアを絞り出したりするのにさらに時間がかかるようになります。 しかし
【D3.js】「全ツイート履歴」からWord cloudを作ってみた。
嗜好がバレる。 自分のすべてのツイートをダウンロードできるようにしました 日本の皆さんにも「全ツイート履歴」が使えるようになりました 全ツイートのダウンロードが可能になっていたので、ダウンロードしたtweets.csvを使ってワードクラウドを作成してみました。 example データセット作成 過去の全ツイートから固有名詞を抜き出して出現回数順にランキングにしたデータを作成します。 2007年から使っているわりに、累計ツイート数が10,939件と少ないのでテキスト処理系コマンドとExcelを使って行いました。ツイート数が多い場合は、以下の方法では難しいかもしれません。 まず、Windowsで処理しやすいようにS-JISに変換します。
【D3.js】水平パンニング
example データを表示する領域を制限して、ドラッグした際に続きのデータを見せる方法。 参考にしたサイトでは、この表示方法を「horizontal panning behavior」と呼んでいたので「水平パンニング」としました。 コードのコメントに書いた以上の説明が出来ないので、詳しく知りたい方は下記のリンク先を参照してください。 参考 Bounded Panning in D3 サンプル //データセットの作成 const dataSet = d3.range(1000).map( (d, i) => { return {x: (i * 10), y: ~~(Math.random()*100)} }) //svg ステージ設置 const width = 980; const maxWisth = width*4; const thresholdWisth = maxWisth -
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://ja.d3js.info/alignedleft/tutorials/d3/
