ブックマーク / gunmagisgeek.com (3)

  • GeoJSONをフロントエンドでベクトルタイル化して表示する。

    中規模のデータをどうやって地図上に視覚化するか フロントエンドで地図を表示するのは、データサイズとの戦いです。 現在のところ、大量のデータを表示するにはベクトルタイル化するのがもっともベターですが、ベクトルタイルにもいくつかの何点があります。 例)全国のガソリンスタンドの位置を地図上にプロットしてみた。 一つは、データのコンバート作業に時間がかかること。 どの程度のズームレベルまで作成するかによるのですが、タイルファイルを生成するまでには何工程か経なければならず、運用で頻繁にデータを差し替えたり更新したりする必要がある場合、無視できない作業量になります。 もう一つは、フロントエンドでかなり多くの404アクセスエラーがでること。 タイルのコンバート時間を短くするには、必要な部分のみ作成するのがもっとも効果的なのですが、その場合、地図クライアントソフトが存在しないタイルに対してもリクエストを投

    GeoJSONをフロントエンドでベクトルタイル化して表示する。
    tattii
    tattii 2018/02/28
  • Data Visualization Japan meetup#2に参加しました。

    Data Visualization Japan meetup#2 – Data Visualization Japan | Doorkeeper 昨日行われた「Data Visualization Japan meetup#2」にて登壇させていただきました。 今回はD3からちょっと外れて、主に地理情報の視覚化をテーマにプレゼンを行ったのですが、椅子が足りなくなるほどの大盛況ということで緊張して、言おうとしていたことを一部忘れてたりとか内心いろいろあったのですが、まぁ、なんとかなったかな?と。 とりあえず、今回の経験の中で一番の学びは、 「円グラフは人を笑顔にする」 これですね(笑) Facebookグループの方に、イベントの様子などを写した写真が掲載されいますのでイベントの雰囲気などを知りたい方はそちらい。特にアルタイムグラフィックレコーディングの画像は必見です! Data Visual

    Data Visualization Japan meetup#2に参加しました。
    tattii
    tattii 2015/01/06
    “Data Visualization Japan”
  • 【D3.js】OpenLayers上にD3.jsで作成したSVGをオーバーレイ

    出来た……けど、理解できてない orz OpenLayersライブラリを使ってOpenStreetMapを表示し、その上にD3.jsで作成したSVG(グンマー)を表示しています。 正直、「表示できた!」というだけでちゃんと理解できていません。 特にextentの値が何を示しているのかが……分からん。 example サンプルコード d3.json("gunma.geojson", function (geoData) { main(geoData); }); function main(geoData) { //表示する地図の最大空間範囲と地図スクロール範囲? var extent = [ -20037508.34, -20037508.34, 20037508.34, 20037508.34 ]; var map = new OpenLayers.Map('map', { numZoom

    【D3.js】OpenLayers上にD3.jsで作成したSVGをオーバーレイ
    tattii
    tattii 2013/06/02
  • 1