D3.jsを使ってユーザーがサイト内の各ページを遷移している様子をアクセスログから可視化してみました。
データの可視化に使えるD3.jsでユーザーのページ遷移を表現してみた | PLAID engineer blog
D3.jsを使ってユーザーがサイト内の各ページを遷移している様子をアクセスログから可視化してみました。
jQueryの後に学びたい最新JSフレームワークまとめ
jQueryを「卒業」して次へ進みたいWeb制作者のために、Vue.js、Chart.js、D3.js、Reactなどの最新フレームワークについての記事を「WPJ」の記事の中から紹介します。 1.シンプルで触りやすい、Vue.jsから始めるアプリ開発 『jQueryはもうしんどい…フレームワーク初心者ならVue.jsから始めてみたら？』（WPJ） jQueryは超便利。でも、ちょっとアプリっぽいものを作るには見通しも悪いし、後々のメンテナンスも大変…。Angunlar.jsやReact.jsよりもシンプルで触りやすい、Vue.jsから始めてみてはいかが？ 2.シンプルグラフならChat.jsにおまかせ 『カッコいいグラフがむちゃくちゃ簡単に描ける！Chart.js 2.0がスゴい』（WPJ） データビジュアライゼーション系のライブラリーといえば、D3.jsが有名。でも、シンプルなグラフをW
ReactとD3.jsの組み合わせで変わる！JavaScriptアニメーション開発
人気のデータビジュアライゼーションライブラリー「D3.js」をもっと使いやすく、便利にするために。Reactを使ったコンポーネント化に取り組み、リアルタイムで描画されるアニメーションを作ります。 D3は最高です。Webのデータビジュアライゼーション分野におけるjQueryのように、考えられるあらゆることが実現できます。 オンラインで見られる最良のWebのデータビジュアライゼーションの多くがD3を使用しています。D3は素晴らしいライブラリーですが、最近のv4のアップデートで従来よりさらに安定性が増しました。 Reactと一緒に使えば、D3はさらに便利になります。 ちょうどjQueryのように、D3は高性能ですが課題もあります。データビジュアライゼーションが大規模になればなるほど、用いるコードは複雑になり、バグを修正したりアイデアを絞り出したりするのにさらに時間がかかるようになります。 しかし
jQueryの次に学びたい！D3.jsはWebデザイナーの最高の武器になる
え、「D3ってグラフ描くライブラリーでしょ？」ですって？ それだけではありません。あらゆるデータを魅力的に見せる「データビジュアライゼーション」は、Webデザイナーの表現の幅をさらに広げてくれそうです。 本記事はMichaela Lehr、Tim Severienが査読を担当しています。最高のコンテンツに仕上げるために尽力してくれたSitePointの査読担当者のみなさんに感謝します。 D3.jsはデータに基づいてドキュメントを操作するJavaScriptライブラリです。D3.jsはHTML、SVG、CSSを使ってデータを活用します。 私がおすすめする、Web制作者が学ぶべきJavaScriptライブラリーは、jQuery、Underscore.js、そしてD3.jsの3つだけです。この3つのライブラリーは、新しい方法でコードを考えることができます。jQueryを使うと少ないコードでDOM
Amazon Kinesis + socket.io + D3.jsを使った webブラウザで行うリアルタイム可視化の仕組み/inovationegg-8
Amazon Kinesis + socket.io + D3.jsを使った webブラウザで行うリアルタイム可視化の仕組み/inovationegg-8
Agata's Blog
D3で「つまづきの石」になりがちなのが、地図の描画とフォースレイアウトです。そこで今回は、そんなD3の難関のひとつである地図を作成してみます。 大まかな手順は以下の通りです。 Step.1 GeoJSON 又は TopoJSON 形式の地図データを準備する Step.2 d3.json メソッドで、準備したJSONデータを読み込む Step.3 d3.geoPath メソッドで、SVGのPath要素として地図を描画する いろいろな本やサイトを見ていると、インターネットで公開されている地図データを GeoJSON/TopoJSON に変換する方法が紹介されていたりします。でも今回は、まずはD3で地図を作成する基本的な手順を知ってもらうために、既に GeoJSON ファイルが準備できているものとして、Step.2 から進めます。 下記のサンプルコードは、公開されている GeoJSON フ
JavaScript で始めるデータ ビジュアライゼーション –D3 連携編–
ArcGIS API for JavaScript を用いてデータ ビジュアライゼーションの手法とそれを実現する機能についてご紹介していく「JavaScript で始めるデータ ビジュアライゼーション」シリーズの第６弾です。 これまで紹介したサンプル コードとデモを確認したい方は GitHub リポジトリをご覧ください。 第１弾から様々な表現手法をお伝えしてきましたが、今回は少し趣向を変えて、データ ビジュアライゼーションを強みとするオープンソース JavaScript ライブラリである D3.js との連携例をご紹介します。 D3.js とは？ データ ドリブン ドキュメント（Data Driven Document）を略して「D3」と呼ばれている通り、データを操作し、可視化することに優れたライブラリです。Web サイトや Web アプリで採用される 2D ベクター グラフィックの標準形
D3.js on AngularJSの実装パターン比較 - Qiita
はじめに 以前, AngularJSでD3.jsをラップしてみようのエントリで, 「いかにしてAngularJSとD3.jsを統合するか」を記載した. その後, 自分で幾つかAngularJSとD3.js両方を使ったApplicationを作ったり, http://alexandros.resin.io/angular-d3-svg/ のブログを読んだりした上で, 双方のライブラリ両方を使う際の知見が増えたので, これを機にもう一度整理してみようかと. ライブラリとしての比較 AngularJSとD3.js, 双方を触ってみて思うのは, 特にコアな部分について, 備えている機能が重複していたり, 同等機能への実装アプローチが異なるなぁ、ということ. # 比較項目 Angular's way D3's way
D3.js – 折れ線グラフと棒グラフのポイント | DevelopersIO
はじめに 前回に引き続き、D3.jsについて学習しているt-hondaです。 D3.jsは「データ・ドリブン」でドキュメントを生成するため できることが多いことや、ソース上で行うことが多い傾向があり 取っ付き難い点もあるかと思います。 今回は折れ線グラフと棒グラフを表示する上で共通となるポイントについて取り上げ 次にそれらのポイントを踏まえて公式サイトのサンプルソースを解析してみたいと思います。 ポイントについて 各ポイントについては、以下のサイトに分かりやすい説明が書かれているので 引用しながら説明していきたいと思います。 D3 入門 : スケール - スコット・マレイ スケール D3.jsでのスケールとは、入力した値を適切な(見やすい)値に変換するモノ(関数)だと言えると思います。 上記のサイトでは データを視覚化した場合、必ずしも元の値がうまくデータ表示領域に収まるとは限りません。そ
D3.js – 円グラフのポイント | DevelopersIO
はじめに 前回に引き続き、今回はD3.jsで円グラフを表示する上でポイントとなる点を取り上げ また公式サイトのサンプルソースを解析してみたいと思います。 ポイントについて D3.jsで円グラフを描くには ・データ一つ一つを表すパイ(扇)を設定する ・各パイに円弧を指定して円グラフとする という手順となります。 それらパイ(扇)、円弧を描くのが、D3.jsの以下の関数となります。 ・d3.layout.pie パイを作成します。 ・d3.svg.arc arc(円弧)を作成します。 詳細については、公式サイトのAPI Referenceを参考にしてください。 API Reference · mbostock/d3 Wiki · GitHub サンプルソース 上記のポイントを踏まえ、公式サイトに乗せられている Pie Chart を解析し、コメントを追加しました。 <!DOCTYPE html
D3.js入門 – 「データ・ドリブン」という特徴について | DevelopersIO
はじめに D3.jsについて調べ始めた、t-hondaです。 前回はいきなりD3.jsとRuby on Railsを組み合わせてグラフを表示してみましたが 今回はD3.jsの入門編として、特徴と、簡単なソースの書き方について サンプルを挙げて書いていきたいと思います。 D3.jsの特徴 以下の弊社のブログ(※1)でも取り上げられていますが、D3.jsは 「データ・ドリブン・ドキュメント」 の略であり 「データに基づいてドキュメントを操作するための JavaScript ライブラリ」 であると定義されています。 D3.js - 日本語ドキュメントより(太字は著者追記) この「データ・ドリブン」であり、「データに基づいてドキュメントを操作する」という特徴について 以下のサンプルで解説していきたいと思います。 ※1 弊社ブログ [HTML5] D3を利用してデータを可視化してビジネスに活かす D
D3.jsとRuby on Railsで棒グラフを表示してみる | DevelopersIO
はじめに タイトル通り、D3.jsとRuby on Railsを使い 棒グラフを表示する簡単なサンプルアプリケーションを作成してみました。 D3.jsについては、弊社の以下のブログ等を参考にしてください。 D3.jsで始めるData-Drivenなページ作成 アプリケーションの構成は、上記の弊社ブログ記事内の「Bar Chart」をサンプルとして ・サーバ側(Railsのコントローラ)は、JSON形式でデータをクライアントに渡す ・クライアント側(D3.js)は、受け取ったJSONを棒グラフとして表示する という形としました。 以下に、実装する上でのポイントとなる箇所を記述していきます。 尚、ソースコードは以下のGitHubに置いてあるので、全ソースを見たい方は参考にしてください。 d3_barchart_sample 実装について 1.ルーティング 今回は「Frequency」コントロー
可視化ライブラリD3.jsの設計が素晴らしすぎる。 | 三度の飯とエレクトロン
最近名前を聞くことが多くなってきたD3.jsを試してみています。 まだ使い始めたばかりですが、D3.jsの設計の素晴らしさに感動しています。 データを与えればグラフが表示されるというような単純なものではないので、敷居が高く感じていましたが、設計を知るほどによく出来ていて驚きます。 D3.jsとは何か？ そもそも、D3.jsとはなんでしょう？ D3.js – Data-Driven Documents D3.jsは、データをブラウザで可視化するためのライブラリです。 単なるグラフライブラリではなく、もっと抽象的な「可視化」を扱うのが特徴です。 抽象的なレイヤーを扱うので、ライブラリと言っても機能より設計が重要で、D3.jsが支持されている理由はその設計の素晴らしさにあります。実際に描画しながら、その設計の違いについて考えていきます。 企業の時価総額と営業利益の関係をプロット 例題として、企業
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超初心者向け ①→②を表現してみる - Qiita
d3.js凄そうなんですけど、ちょっと応用しようとすると途端に表示されなくなったりとか、意図と違ったりとかで、挫折する気がします。 そんな超初心者向けのtipsです。 この記事で行うこと d3.jsで丸を描く d3.jsで線を引く d3.jsで矢印を描く svgの要素を知る 環境 Mac OS X(10.9.1) + Google Chrome(2014/2/26現在 最新) で確認しています。 準備 コピペして試せるように準備しておきます。 htmlとjavascriptファイルを分けて、javascriptファイル側だけ編集すればいいようにしておきます。 何度もリロードすることになると思うので、d3.jsのファイルはローカルに保存しておいたほうがさくさく進めます。 <!DOCTYPE html> <head> <meta charset="utf-8"> <script src="d3
「D3.js」を使ったデータビジュアライゼーション
Webやスマートデバイス、センサーなどあらゆるものから情報を収集出来るようになり、世の中には膨大なデータが溢れかえっています。また、ビッグデータやデータサイエンティストといったキーワードに注目が集まり、データ活用への期待が高まっています。しかし、単純に収集したデータはそのままでは見づらく、そこから意味を汲み取ることは困難です。そこで、データの見せ方や伝え方が重要になってきます。 D3.jsとは D3.jsは、Mike Bostock（mbostock）が作成したデータ可視化用途で人気のJavaScriptライブラリで、データをDOMと結びつけ、データ駆動によりグラフを作成することができます。ソースコードはGithubで公開されており、人気を表すStarの数がGithubに公開されているリポジトリ全体で6番目に多いことからも、注目の高さが伺えます（2013/10現在）。ライセンスは修正BSD
Google の R コーディングスタイル - RjpWiki
RjpWiki はオープンソースの統計解析システム R に関する情報交換を目的とした Wiki です2013-10-19 Ｑ＆Ａ (初級者コース)/15 Google の R コーディングスタイル 2013-10-18 R掲示板 2013-10-17 Rでデータマイニング R史 Python で R 2013-10-16 R本リスト RとHTML5 2013-10-14 Shiny 2013-10-13 R のインストール 2013-10-11 追加パッケージをなんでもかんでも追加する 2013-10-10 Rで複雑系 2013-10-06 The MakeR Way 2013-10-05 R でエンタメ R で３Dプリンター出力 2013-09-29 RExcel 2013-09-27 Rシラバス R と Big Data 処理 2013-09-26 トップ頁へのコメント リンク集 20
D3.jsをつかってData-Drivenにリッチなグラフやチャートを作成しよう - Tech-Sketch
Webやスマートデバイス、センサーなどあらゆるものから情報を収集出来るようになり、世の中には膨大なデータが溢れかえっています。 また、ビッグデータやデータサイエンティストといったキーワードに注目が集まり、データ活用への期待が高まっています。しかし、単純に収集したデータはそのままでは見づらく、そこから意味を汲み取るのは困難です。 そこで、データの見せ方や伝え方が重要になってきます。 インフォグラフィックスやデータビジュアライゼーションといったキーワードにも注目が集まりつつありますね。 本記事ではD3.jsというJavaScriptのライブラリを利用し、このブログ(Teck-Sketch)のはてなブックマーク数や、世界の国別の人口の比較を視覚的に分かりやすく表現していきたいと思います。 インフォグラフィックス？データビジュアライゼーション？ キーワードとしてインフォグラフィックスとデータビ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Html5j data visualization_and_d3
IDEA * IDEA