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
ストリートビューの画像を使いたいときは「Street View Image API」を使いましょう。
Google Street View Image APIを使うと、JavaScriptを使用せずにWebページにスタティック(静的)なストリートビューのパノラマやサムネイルを埋め込むことができます。ストリートビューを画像として使用したい場合に便利なAPIです。逆にこのAPI以外の方法(ストリートビューをスクショして貼るなど）は規約違反になるので注意。 スクリーンショット/サイト内での使用: Google マップ、Google Earth、ストリートビューなどからの対象コンテンツをご自分のウェブサイトで使用する場合、スクリーンショットをアップロードするのではなく、サイト内に対象コンテンツを埋め込むようにしてください。
GeoJSONを軽くするだけじゃない！ TopoJSONクライアント TIPS
単純に、GeoJSON形式のデータを効率よく圧縮してファイルサイズを軽くするものとらえられがちのTopoJSONですが、実はTopoJSONには様々な機能があります。 今回はその中から、クライアント側「topojson.js」で利用できる機能の一部を紹介します。 Home · mbostock/topojson Wiki topojson.neighbors neighborsメソッドについては以前記事にしたので省略。基本的には、このメソッドにTopoJSONのデータを渡してあげると、各ポリゴン毎に隣接するポリゴンのインデックスの値を配列として返してくれます。 【D3.js】隣接する区画を表示する topojson.mesh かいつまんで言うと、TopoJSONのデータを受け取って一本のパスストリング(svg/pathのd要素に渡す値)として返すメソッドです。 コールバックを使ってフィルタ
「ポケモンGOみたいなゲーム作って〜」と言われたときのために、巨人(Google)の力をかりて、道路上にランダムにマーカーを設置する。
そろそろ、世間では「ポケモンGOみたいの作ってー作ってー」という無茶振りと、それに伴うエンジニアの悲鳴が聞こえてくる季節が近づいてきたかと思います。そこで、いつそんな無茶振りが来ても対応できるように、位置情報を用いたゲームを作る際の高いハードル「人が行ける場所にモンスターを配置する」という難問をグーグル様のお力を利用して、とりあえず形だけでもなんとか取り繕ってみたいと思います。 一応言っておきますと……あんまり、実用的ではないですよ。 ランダムに緯度経度を生成する まず、手始めに日本が収まる範囲に限定してランダムに1000件の緯度経度を生成します。 turf.jsを使用するとランダムなポイントデータをgeojsonとして簡単に生成できます。 var points = turf.random('points', 1000, { bbox:[117.195432271875, 25.96808
FlashAirを使って、ネットに繋がっていなくてもつかえる地図アプリを作る
Gunma.web#23 のLTで知ってからずっと気になっていたFlashAirを買いました。 FlashAirとは FlashAirは、東芝から発売されている「無線LAN内蔵SDカード」です。 無線LAN内蔵SDカードをデジタルカメラの保存メディアとして使用すると、カードを抜き差しせずにPCやiPhoneなどのデバイスに画像を転送することができます。 【レビュー】「FlashAir」を使ってデジカメ画像のワイヤレス転送にチャレンジしてみた – 大容量モデルや高速モデルも揃え、使いやすくなった無線LAN対応SDカード (1) 普通のデジカメがカード一枚で無線LAN接続対応になる | マイナビニュース FlashAirは一般的な無線Lan内蔵SDカードとしての機能以外にも、様々な機能を持ったSDカードで、小型のマイコンとして使用することができます。 どんな機能が用意されているかは公式サイトに
【D3.js】サーマーウォーズのワールドクロックを作る
アノ時計っぽいものを作ってみました。 example 解説 基本的には下記事のコードをちょこちょこっと改良しただけです。 【D3.js】 SVGで地球儀を描く 地軸を傾けながらSVGで地球儀を表示する ポイントとしては地形を裏用(グレー)と表用(ピンク)に２重に描画しているところでしょうか。 clipAngleメソッドを使って描画される範囲を変えています。 ・裏用地形描画 var projection180 = d3.geo.orthographic() .scale(windowWidht/4) .rotate([0,0,0]) .translate([windowWidht / 2, windowHeight / 2]) .clipAngle(180); var backPath = d3.geo.path().projection(projection180); //地形(裏) va
ブラウザおよびnode.jsのための高度な地理空間データ分析ライブラリ「turf.js」
選択した範囲内の家賃相場を求めるとかいろんなことに使えます。 example Turf.jsはMapbox社謹製の地理空間データ分析ライブラリです。ピュアJavaScriptで作成されていてフロントエンドでもサーバーサイドでも動作します。 Turfの特徴としては、対応するデータ形式をGeoJSONを絞っており、基本GeoJSONで受け取ったデータを分析して分析結果をGeoJSONで返すといったライブラリになっています。 そのため、GeoJSONに対応した地図ライブラリと組み合わせることで、分析結果を簡単に視覚化することができます。もちろんD3.jsと組み合わせて使うのも簡単！ いろいろな可能性を秘めた今後が楽しみなライブラリです。 今回は入門編として、Leaflet上で選択した範囲内のデータの基本統計量を計算します。 マーカーのプロパティには、それぞれ「value」値が設定されていて、選択
【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
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
