【D3.js + node.js】 ブログのデータをGithub風のカレンダーに表示する
example WordPressもくもく勉強会@群馬 #1で作成したものです。 サンプルコードが公開されているのでそれを元に作成しました。 Githubのカレンダー表示機能はD3.jsで作成されているのですが、そのBlog版のようなものです。 ↓これ 色がついているセルが記事を描いた日、同じ日に書いた記事が多いほど濃い緑色で表示されるようになってます。 セルにマウスオーバーすると記事のタイトルが表示されクリックするとその日のブログ記事へ飛びます。 カレンダーにしてみると、ブログ記事を頑張って書いた月とそうでもない月が一瞥できてなかなか面白いですね。 データセットの作成 WordPressのダッシュボードから「ツール→エクスポート」を選択し、投稿記事をエクスポートします。 エクスポートしたxmlファイルをnode.jsを使ってjsonに変換しました。 変換スクリプトは、以前RSSリーダーを
D3.jsで再利用可能なコードの書き方を教えてくれる参考書
Developing a D3.js Edge D3.jsを取り扱った参考書としては、「Getting Started with D3（D3をはじめよう）」や「Interactive Data Visualization for the Web」、「D3 Tips and Tricks」などがありますが、「Developing a D3.js Edge」は、一連の参考書より深く踏み込んだ内容となっています。 本書の概要は以下となります。 再利用可能なD3プラグインの作成 Jasmineを用いてのユニットテストやTDD/BDD Crossfilter.jsとD3.jsの連動 アプリケーションへブラッシングを組み込む 地図APIの作成 最終的に以下のような、円形のヒストグラム図と地図が連動するビジュアライゼーションを再利用可能なプラグイン(オリジナルなグラフレイアウト)として作成します。 現時
可視化周辺の進化がヤヴァイ～rChartsを中心として～
Rの関数をC++で記述することを可能にするパッケージRcppの使い方の紹介です。 第10回 Kashiwa.R で発表させて頂いた時の資料
NVD3
This project is an attempt to build re-usable charts and chart components for d3.js without taking away the power that d3.js gives you. This is a very young collection of components, with the goal of keeping these components very customizable, staying away from your standard cookie cutter solutions. View more examples » GitHub Repo Download d3.v3.js. This is the only required library for NVD3. Dow
D3をはじめよう
データ可視化のために作成されたJavaScriptベースのツールキット、「D3.js」の概説書です。D3の基礎となる、データセットの文脈によってコンテンツの要素を取扱う方法を学びます。ニューヨーク都市交通公社（MTA）の公開している実データに基づいて、HTML、Canvas、SVGを使った、豊富でグラフィカルなビジュアライゼーションの方法を知ることができるでしょう。なお本書はEbookのみの販売となります。 まえがき 1章 はじめに D3 基本設定 ニューヨーク都市交通公社のデータセット 2章 Enterセレクション シンプルな地下鉄路線状況表示盤を作成する プラザの1日平均交通量のグラフを作成する 3章 スケールと座標軸と折れ線グラフ バスの故障、衝突や人身事故 回転式ゲートの交通量をグラフ化する 4章 インタラクションとトランザクション 地下鉄の定時運行率の評価UIその1――インタラク
Tributary
What is this? Tributary is an experimental environment for rapidly prototyping visualization code. The environment provides several libraries useful for this kind of coding, as well as a simple interface for live code editing. Some of these images take you to galleries of Tributary examples, don't be afraid to click on images which take you to the actual live tributaries! Who is involved? Tributar
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
D3.js と SVG によるデータビジュアライゼーション
Silk – Interactive Generative Art
http://ja.d3js.node.ws/