Microsoftのデータ可視化ツール「SandDance」がオープンソース化
公式サイト 概要 SandDanceは、WebGLを用いたBIツールで巨大なデータセットを素早く可視化し、複数のビュー間を滑らかなアニメーションでトランジションさせることで新たな知見を得ることができるBIツールだそうです(公式サイトより) サンプル画像でもカッコいいアニメーションが目を引きます。 deck.glのショーケースページで紹介されていて、個人的に興味を持っていたのですが、先日Microsoftの公式ブログでオープンソース化されることが発表されました。 Microsoft open sources SandDance, a visual data exploration tool - Open Source Blog Github やたらパーティクルが飛び交ってカッコいいです。 慣れないと無意味な3Dチャートとか作ってしまいかねない危うさはありますが、内部ではDeck.glやVeg
Uber社製、ジオビジュアライゼーションフレームワーク「deck.gl」を触ってみた。
demo sample code deck.glとは？ deck.gl Uber社がオープンソースとして公開しているWebGLベースの地理情報視覚化フレームワークです。webGLを利用しているため、比較的データ量の多い地理情報もフロントエンドに表示することができます。 Reactのコンポーネントとして作成されているため、いままで手を出して来なかったのですが、最近Reactを勉強し始めたついでに弄ってみました。 今回は、とりあえず開発環境の構築と、サンプルにあるgeojsonデータを読み込んで表示するコンポーネントを作ってみます。 この記事は内容が古くなっています。 最新のDeck.glについては、以下の記事を参照してください。 React Hooks とdeck.gl v.7を使ってweb地図を作ってみた。 deck.glのインストール github/deck.gl deck.glリポジト
TEDで学ぶデータビジュアライゼーション
TEDに公開されている日本語字幕の付いた動画のなかから、データビジュアライゼーションに関連する動画をピックアップしてみました。 視覚化 データビジュアライゼーションの美 私のデータセットであなたのマインドセットを変えてみせます 人間性を巧みに描く 人類の知識を表す視覚的表現の歴史 データで描く、示唆に富む肖像画 データの中に自分を見つけるには 統計 誤った統計を見抜く３つの方法 統計を好きになるべき理由 統計に騙される陪審員たち データ分析 ハリウッドに潜む性差別のデータ ビックデータを使ったNYCでの最悪な駐車場の見つけ方 アンドレア・シュライヒャー 「データに基づく学校改革」 地図 スティーブ・ジョンソンの感染地図 広げる価値のあるアイデアの地図作り （場所を示すだけではなく）私達が何者かを示す地図 分かりやすい地図のデザイン
まるでシムシティのようなWeb地図ライブリラリ「eegeo.js」
eeGeo eeGeoは、「グランド・セフト・オート」や「レミングス」などのクリエイティブディレクターであったイアン ヘザーリントン氏が2010年9月に設立した3D地図を提供する会社です。 日本では、NTTドコモがライセンス供与を受け、屋内3Dマップの提供などを行っています。 今のところ、日本では3Dで表示できる地域がないのですが、ゲーム業界のノウハウを用いた地図サービスとして個人的に期待しています。 登録すれば個人ユーザーでもAPIを使用することができるので、紹介がてらサンプルを載せておきます。 Web版サンプル example 公式サイトに登録し、ダッシュボードから「Create new app」ボタンをクリックして「API Token」を取得してください。 スタイルシートとライブラリを読み込みます。 <link href="https://cdnjs.cloudflare.com/a
【修正されました】埼玉県の「オープンデータ」がいろんな意味で凄い！
【追記】2015/7/13 12:00 利用規約が見直され、改めてオープンデータとして公開されたそうです。 7月7日に掲載しました「広報情報データの利用申請」につきましては、県民の皆様・関係機関からのご要望、ご指摘を踏まえ、利用申請等なしに誰もが本データを利用できる方式に変更いたしました。広報情報データのご利用の際は、以下の利用条件に従ってご利用ください。 広報情報データの利用について – 埼玉県 クリエイティブコモンズライセンスにおけるCC-BYで提供されることになりました。 今回の件に関する私の見解は以下記事に記載しました。 オープンでないものはオープンデータではない。 【追記】2015/7/9 19:00 いったん公開をとりやめることになったようです。 【元記事】 「オープンとはなんぞや？」という哲学的な問いすら浮かぶ事例をみかけたので記事にしてみた。 おさらい Open Defin
GithubからGeoJSONを検索して地図上に表示するページを作ってみました。
example Google Custom Search APIを使って、GithubからGeojsonを検索し地図に表示するページを作ってみました。 GithubではGeojsonをアップするとヘッダに「Access-Control-Allow-Origin: *」を付加してくれるので、外部から読みだして地図上に表示することができます。 地理情報を公開する方法として面白いなと思ったので作ってみました。 ただ、APIの制限がかなりきつく、無料サービスの範囲内では１回のリクエストで取れるのが10件までなうえ日に100回検索リクエストがかかると制限がかかるらしいので実用的ではありません。 検索しても結果が返ってこなくなったら、別の日にでも試してみてください。 （あとたまに、ものすごーく巨大なGeoJSONを読み込もうとして固まる時があります） GoogleCustomSearchAPI – G
大阪都構想住民投票結果、各区毎の得票差
自分は大阪から遠く離れている群馬に住んでいるので地元の感覚とかわからないのですが、ちょっと気になったので作ってみました。 地域差 青が「賛成」、赤が「否定」である。投票総数で観ると、賛・否の差は総数でわずか1万票強足らずで大差ないが、地域別に見てみるとはっきりとその地域差に傾向があることがわかる。一目瞭然のように、大阪市北部は「賛」、大阪市南部は「否」と区分されている 確かに２極化して塗り分けると、北部と南部で明確な差があるように見えます。 しかし、上記記事で「投票総数で観ると、賛・否の差は総数でわずか1万票強足らずで大差ない」と言っている通り、今回の選挙はかなりの僅差だったので区毎の得票数の差というのも考慮しないと何とも言えないのではないかと思います。 例えば、東成区などは賛成票が過半数を超えてはいますが、その得票数の差はわずか22票だったりするので、これをもって「東成区は大阪都構想へ賛
地図の力、地図の怖さ。
かつて、今は亡き地理学者バーナード・ニーチマン氏は、「銃よりも地図が、より多くの土着の土地を奪ってきた」と述べた。奪われた土地を取り戻す地図の力を認めるかどうかは別にして、集団理解の形成や政治紛争への介入手段における地図の役割は小さくない。 地図にはとても大きな力があります。 2013年、ニューヨークタイムズでもっともアクセスを集めたコンテンツは、インタラクティブな方言地図でした。 How Y’all, Youse and You Guys Talk グローバル・エディターズ・ネットワークが主催する2014年データジャーナリズム賞において受賞された８作品の内、半数の４作品が地図を用いたデータビジュアライズ作品です。 Data Journalism Awards 2014 ニュースを読者にとって身近な「自分事」の問題として提示し大きな反響を得たニューヨークタイムズの「Toxic Waters
【D3.js】 LeafletにSVGをオーバーレイする。
Leafletは、モバイルフレンドリーでインタラクティブな地図をWeb上に表示するJavaScriptライブラリです。最近、海外での存在感が高まっているような気がします。 今回は、D3で作成したsvg要素をLeaflet上にオーバーレイしてみました。 (まだ、ソースのコメントに書いたこと以上の知識がないので、サンプルコードのみで詳しい解説はありません) サンプル D3.jsとともにLeaflet.jsとleaflet.cssを読み込んでください。 <!-- leafletのcssを読み込む --> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6H
カリー化関数を利用して非同期処理を整理する
サンプル１ サンプル２ Google Map Apiを使っての地図作成では、 geocodeで緯度経度取得→地図移動→XHR→地図上にマーカー表示 位置情報取得→地図移動→XHR→地図上にマーカー表示 上記の処理をよく行いますが、「geocode」「位置情報取得」「XHRでのデータの取得」などは基本”非同期”の処理のためコールバックが入れ子になって複雑になりがちです。 そんなときは、curryを使って非同期処理のコールバックをまとめるとシンプルに整理できたりします。 実際にsampleを作ってみました。 位置情報を取得して周辺500m内の車椅子可のお店を表示する地図です。（位置情報が使えない場合は住所で検索してください） sample ↓ curryを使うことで非同期処理をこんな感じに書けます。詳しい内容はリンク先のソースを参照してください。 //json取得時のコールバックを束縛 var
iPadでiPadアプリが作成できる「ScriptKit」がなんか凄い。
ScriptKit – Drag and Drop Programming for iPad. ScriptKitは、直感的なドラッグ＆ドロップのインタフェースを介してネイティブiOSのUIコンポーネントとソーシャルメディアのAPIを使用し、iPad上で簡単なプロトタイプを構築するができるプログラミング環境です。 似たアプリに「Codea」がありますが、Codeaがメディアアートやゲームの作成に向いているのに対して、ScriptKitは実用的なアプリの作成に適しています。 操作感が独特で、全てのAPIにスニペットが用意され、それらをドラッグ＆ドロップでペタペタと貼り付けてコーディングを行います。 簡単に中身を確認してみましたが、iOSのMap viewを扱うためのAPIやカメラ・フォトライブラリへのアクセス、HttpgetやHttppost果てはSocketを扱うAPIまで用意されています
Fusion TablesとGoogle Mapの連動が革命的に便利になっていた。
残念ながら、Fusion Tablesは廃止されることになりました。 Notice: Google Fusion Tables Turndown – Fusion Tables Help 誰でも、地図を使った情報配信が出来る時代に…… Fusion Tablesとは「Google ドライブ」で利用できるデータベースです。 今年に入っていろいろと機能が追加されたらしく、以前に比べると非常に便利にそして手軽になっていました。 デモ１ デモ２ 目次 １．MAPジェネレーター機能 ２．住所等を位置情報に変換 ３．Google Map Apiのコードとして出力する １．MAPジェネレーター機能 以前は、ポイント表示ぐらいしか使えなかったような気がしたのですが、ポリゴンの情報などもアップロードできるようになり、KMLファイルなど位置情報を持つファイルをアップロードした場合、自動的にマッピングしてくれる
【node.js+D3.js】RSSリーダーを作る
feedparserの仕様が変わったため現在動きません。 Googleが酷いことをしたので自前のRSSリーダーを作成してみます。 フィードを読み込んでリストとして表示するだけの、最低限の機能しかありません。 node.jsでRSS取得サーバーを作成 フィードの読み込みには「feedparser」ライブラリを使用します。 var FeedParser = require('feedparser') , request = require('request') , fs = require('fs') , http = require('http') , url = require('url'); http.createServer(function (req, res) { var pathname = url.parse(req.url).pathname; var queryData =
【D3.js】D3.jsを使ってSVGで地図を描く
//プロジェクション設定 var projection = d3 .geoMercator() //投影法の指定 .scale(16000) //スケール（ズーム）の指定 .rotate([-0.25, 0.25, 0]) //地図を回転する [x,y,z] .center([139.0032936, 36.3219088]); //中心の座標を指定 //パスジェネレーター生成 var path = d3.geoPath().projection(projection); //地図用のステージ(SVGタグ)を作成 var map = d3.select("body") .append("svg") .attr("width", 960) .attr("height", 500); //地理データ読み込み d3.json("gunma.geojson", drawMaps); //地図を描画
node.js + restify + mongoDBでお手軽 JSON Web API 作成 | undefined .
var restify = require('restify'); function respond(req, res, next) { res.send('hello ' + req.params.name); } var server = restify.createServer(); server.get('/hello/:name', respond); server.head('/hello/:name', respond); server.listen(8080, function() { console.log('%s listening at %s', server.name, server.url); });
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
