タグ

JavascriptとVisualizationに関するclavierのブックマーク (15)

  • Algorithm Visualizer

    This page has moved to algorithm-visualizer.org.

  • JavaScriptのコードを分解してよく使われてる機能を分析する

    今年のOSS活動振り返り @ 2015 | Web ScratchJavaScript/ECMAScriptを改めてどう学べばいいのか考える azu/how-to-learn-es6とか#thinking_in_es6で考えてるやつ というのを今年考える事としてあげていました。 それを考えるために、既存のコードがどうなってるかを見てみるという話です。 具体的には既存のコードを見て、そこでどういう機能/構文が多く使われているのかが分かれば、どこを中心的に学ぶと結果が出やすくなるのではという感じです。 それを分析するためにazu/es-usage-rateというツールを書いた。 Installation 使い方 例えば、es-usage-rate自体がどういう構文を使って書かれてるかを見てみてます。 es-usage-rateは他のCLIと組み合わせて使う事を前提としてるので、 デフォルト

    JavaScriptのコードを分解してよく使われてる機能を分析する
  • C3.js | D3-based reusable chart library

    Comfortable C3 makes it easy to generate D3-based charts by wrapping the code required to construct the entire chart. We don't need to write D3 code any more. Customizable C3 gives some classes to each element when generating, so you can define a custom style by the class and it's possible to extend the structure directly by D3. Controllable C3 provides a variety of APIs and callbacks to access th

  • RとJavaScript Visualizationを俯瞰しよう

    7. R言語とJavaScript比較 library(Wordcloud)を使用 library("wordcount") wordcloud( + data$Term, data$Freq, + scale=c(5,2), + max.words=Inf, + random.order=T, + random.color=T) 変化があまり見れないのはこ のとき使ったデータが悪かっ たので・・・ 8. R言語とJavaScript比較 D3.js+d3-cloud d3.csv('resources/data/out.csv', function(data){ var h = 600; var w = 800; var random = d3.random.irwinHall(2) var countMax = d3.max(data, function(d){ return d.Fr

    RとJavaScript Visualizationを俯瞰しよう
  • D3で切り開くジオ・データ・ビジュアライゼーションの可能性

    D3で切り開く ジオ・データ・ビジュアライゼーション の可能性 第12回 ジオメディアサミット〜ジオデータビジュライズの世界〜 Yuichi Yazaki / visualizing.jp / toy-by-algorithm.com 自己紹介 矢崎裕一 インターフェイス・デザイナー/コーダー/トイ・コンサルタント インフォグラフィック vs データ・ビジュアライゼーション インフォグラフィック 人が手作業かグラフィックアプリで描いている。 手元にあるデータの特性を作者が理解し、その特徴を最大化するために表現が選ばれる。 そのため、別のデータを使用して再作成するのが容易ではない。 表示についてのルールとその例外処理について作者以外の外部からすべてを推測することが難しい。 参照したデータとの関連性の証明が難しい。 インタラクションが(ほぼ)ない。 あるデータセットが、予め用意されたアルゴリズ

  • jQuery Mapael·jQuery x Raphaëlな地図描画ライブラリ MOONGIFT

    JavaScriptと連携できる地図が欲しかった方は要チェック! Web上でSVGを扱う際に使われるライブラリで有名なのがRaphaëlです。そんなRaphaëlをjQueryベースで使えるようにしたプラグインがjQuery Mapaelになります。地図に限定されますが、SVGで描かれた地図に様々な情報を付与したりJavaScriptと連携させることができるようになっています。 実際の例としてはフランスの地図を扱ったものが多くなっています。 マウスオーバーでハイライトされます。 さらにズームもできるタイプもあります。この辺りはSVGならではと言えるでしょう。 JavaScriptと連携させることでクリックイベントをキャッチできるようになっています。 人口の多い町や都市を描いています。こういった外部データとの連携も容易です。 最後はフランスではなく世界地図のデモです。 国ごとにデータを色分け

    jQuery Mapael·jQuery x Raphaëlな地図描画ライブラリ MOONGIFT
  • / - 海豹日記

    {今年|今月|今週|今日}も何%過ぎました ゆく河の流れは絶えずして、しかももとの水にあらず (鴨長明:荘子) FESTINA LENTE ゆっくり急げ (ローマ帝国初代皇帝 アウグストゥス) 立派にできたのであれば、それは十分早くできたことになる (ローマ帝国初代皇帝 アウグストゥス) 海豹日記 へようこそ このサイトは、個人的な覚書を残しておくサイトです 自分は、よくこんなことをします 何かの困りごとや興味の赴くままに、いろいろ調べる 数か月後に、そのことを忘れてしまって、同じことについていろいろ調べる。しかし、そのうち、数か月前の自分が、同じことを同じように調べていたことに気づく それは不毛なので、覚書を残しておこうというわけです (主人公のアリスに掴まれて、チェス盤のはるかかなたまで持ち上げられたことのあるチェスの王さまが、当時のこと思い出し) 王さま「あの瞬間の恐怖といったら、わ

  • D3.jsをつかってData-Drivenにリッチなグラフやチャートを作成しよう - Tech-Sketch

    Webやスマートデバイス、センサーなどあらゆるものから情報を収集出来るようになり、世の中には膨大なデータが溢れかえっています。 また、ビッグデータやデータサイエンティストといったキーワードに注目が集まり、データ活用への期待が高まっています。しかし、単純に収集したデータはそのままでは見づらく、そこから意味を汲み取るのは困難です。 そこで、データの見せ方や伝え方が重要になってきます。 インフォグラフィックスやデータビジュアライゼーションといったキーワードにも注目が集まりつつありますね。 記事ではD3.jsというJavaScriptのライブラリを利用し、このブログ(Teck-Sketch)のはてなブックマーク数や、世界の国別の人口の比較を視覚的に分かりやすく表現していきたいと思います。 インフォグラフィックス?データビジュアライゼーション? キーワードとしてインフォグラフィックスとデータビ

  • D3.js と SVG によるデータビジュアライゼーション

    D3.jsによるグラフィックスにAngularJSで
アプリとしての肉付けをしてみる。実例を通じて、AngularJSアプリへの
非AngularJSライブラリの組み込み、
アプリのモジュール化方法を紹介。

    D3.js と SVG によるデータビジュアライゼーション
  • Server Sideで作るVisualization - PolyPeaceLight

    東京Node学園祭2012 アドベントカレンダーの10日目の記事です。 他の方のように、ベンチマークやコアっぽいところばかりなのですが、僕は少し軽めで最近調べているd3周りについてちょっと便利なツールを作ってみました。 d3jsは非常に優れたvisualizationツールで、モダンなブラウザでは実装されているSVGを使うことで、美しく、インタラクティブなvisualizationを作成することができます。 ところが、「モダン」なブラウザとある通り、IEは9以上が必要になります(幾つかのJSライブラリでコアに関しては8でも動くようですが試していません)。 d3jsが使いたいんだけど、上司から「IE6がまだしっかり生きているんだから対応しないと査定さがるよ」とか言われた時のための逃げ道としてd3rendererを作りました。 d3jsでhtmlを作って、phantomjsで書きだして、画像を

    Server Sideで作るVisualization - PolyPeaceLight
  • データマイニングとビジュアライゼーション

    【6月27日 データをわかりやすく可視化する「データビジュアライゼーション」勉強会 矢崎裕一さんプレゼン資料】 https://www.facebook.com/events/645728912170926/ オープンデータやビックデータなどの言葉を最近目に、耳にする機会が増えました。 LOCAL GOOD YOKOHAMAでは「データを公開する・つかう・つくる」など私たちの身の回りにあふれてきた、そしてこれからもっと近くにやってくるだろう「データ」と、組織や個人としてどのように付き合っていくか考えていきたいとおもいます。 今回は、LOCAL GOOD YOKOHAMAのサイト内「データを見る」でコンテンツのひとつともなっている『データをわかりやすく可視化するデータビジュアライゼーション』に関する勉強会を開催します。 この勉強会を経て、7月20日の「データビジュアライズソン」を開催します。

    データマイニングとビジュアライゼーション
  • Post by @keiono · 11 images

    時代はますます何でもWeb上、と言うかブラウザ上へ移行してます。データ可視化と言う分野も例外ではないです。以前はヒストグラムを描くとか円グラフを表示するとかのシンプルなものはともかく、それ以上に複雑なデータの可視化を行う場合は、Flashで作り込むとか、Javaでアプレットを作るとか、そう言った作業が必要でした。そのためのツールキットの代表例としてはPrefuse等があります。 しかし、近年の第二次ブラウザ戦争(HTML5への対応やJavaScriptの実行速度競争など。第一次はIE vs Netscape)のおかげで、クライアント側のテクノロジが飛躍的に進化し、JavaScript実行のパフォーマンスが向上したり、GPUの恩恵を描画で受けられたりと、特にマルチプラットフォームのサポートを求められる事の多いデータ可視化系プロジェクトでは、ブラウザ上でのデータ可視化アプリケーションの実装は魅

    Post by @keiono · 11 images
  • d3.js - Data-Driven Documents

  • 郵便番号マップを作ってみた - てっく煮ブログ

    ビジュアライジング・データ ―Processingによる情報視覚化手法 を読んでたら「アメリカ郵便番号を地図上に図示する」という例が出てきたので、これの日版を作ってみました。 郵便番号マップ内陸地がぽっかりあいてるのが不思議だったり、色でどのへんの地域が近い番号なのかが分かったり、いろいろ興味深いです。絞り込み機能先頭の数字で絞り込む機能もつけてみました。これが東京(1XX)。これが中国四国地方(7XX)。うっすら四国の海岸線が見えます。今週は、これを作っていく過程を紹介していきたいと思います。乞うご期待。ビジュアライジング・データ ―Processingによる情報視覚化手法作者: Ben Fry, 増井俊之(監訳), 加藤慶彦出版社/メーカー: オライリージャパン発売日: 2008/12/01メディア: 大型 連載目次(予定)郵便番号データをデータベースに入れるgeocoding

  • Algorithms and Data Structures

    This is a place to find information about some of the more fundamental algorithms used in computer science. This information is widely available on the net, but hopefully the way it's presented and discussed here will resonate with you. Most of these are things you wouldn't need to write yourself. Modern libraries and languages tend to have quality implementations for all of this. Nonetheless, I t

  • 1