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
Qiitaの投稿アクティビティをGitHubのように表示するヤツ - Qiita
Qiita API 使ってみたかったので作ってみました。 デモ こんな感じで表示されます。 ソースコード 久しぶりにjs書いた。あまり綺麗に書けなくてモヤモヤする。 ※要 jQuery, D3.js ※手抜きで直近の100件しか取得していないので、投稿が年間100件超える場合は全て表示しきれません。 /* フォームの入力内容を元にAPIに問い合わせ */ $("#form").on("submit", function(e) { $("#btn-submit").prop("disabled", true); var user_id = $("#user_id").val() $.ajax({ type: "GET", url: "http://qiita.com/api/v2/users/" + user_id + "/items?page=1&per_page=100", succes
【D3.js + node.js】 ブログのデータをGithub風のカレンダーに表示する
example WordPressもくもく勉強会@群馬 #1で作成したものです。 サンプルコードが公開されているのでそれを元に作成しました。 Githubのカレンダー表示機能はD3.jsで作成されているのですが、そのBlog版のようなものです。 ↓これ 色がついているセルが記事を描いた日、同じ日に書いた記事が多いほど濃い緑色で表示されるようになってます。 セルにマウスオーバーすると記事のタイトルが表示されクリックするとその日のブログ記事へ飛びます。 カレンダーにしてみると、ブログ記事を頑張って書いた月とそうでもない月が一瞥できてなかなか面白いですね。 データセットの作成 WordPressのダッシュボードから「ツール→エクスポート」を選択し、投稿記事をエクスポートします。 エクスポートしたxmlファイルをnode.jsを使ってjsonに変換しました。 変換スクリプトは、以前RSSリーダーを
iris.csvの棒グラフを作ってみよう
README.md サーバの立ち上げ方 python: python -m SimpleHTTPServer 5000 perl: plackup -MPlack::App::Directory -e 'Plack::App::Directory->new(root => ".")->to_app ruby: ruby -rwebrick -e 'WEBrick::HTTPServer.new(:Port => 5000, :DocumentRoot => ".").start' php: php -S 0.0.0.0:5000 iris.csv �� ]�U � ]�U id Sepal.Length Sepal.Width Petal.Length Petal.Width Species 1 5.1 3.5 1.4 0.2 setosa 2 4.9 3 1.4 0.2 setosa
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であり、他
advent calendar 24日目 selectAll(), data(), enter(), append()に翻弄されるひとたちに - PolyPeaceLight
ようやくボクのクリスマスが終わります。 d3は可愛いんですが「selectAll() -> data() -> enter() -> append()」は経験から学ぶのが最も早い、としか答えられません。 クリスマスプレゼントとして、そんな方々のためにUnderstanding selectAll, data, enter, append sequence in D3.jsというエントリが2012/1に出ております。 理解の一助となればと訳しておきました！これほんとに理解できる記事です！ D3.js始めたばっかりの諸君らが、Webで例を見ながら学習するときに、ぶっちゃけ「selectAll(), data(), enter(), append()」という一連の処理はイミフだと思う。そう、これらの関数は、なにをしてるのかわかりづらい。少なくともこれらの機能を理解するのは簡単じゃないと思う。よく
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
How to recreate GitHub’s contribution graph – Hacker Noon
Github contributions graph
Github-like contribution graph