かなりざっくりD3.js入門 - Qiita
はじめに D3 チュートリアルを参考によりわかりやすく、大雑把にまとめたいと思います。 事前知識は「html,css,javascript,json,xml」とか書いてありますが、やってなくても大丈夫だと思います。 ちなみに、こちらのソースコードは上のチュートリアルをぱぱっと解説しています。 ブラウザはChromeを使います。 準備編 ・ダウンロードしてd3.jsを使う場合 まずはD3.jsのファイルをダウンロードします。 ただし、グーグルで検索すると「D3.js - 日本語ドキュメント」が出てきますが、そこではダウンロードしません(出来ません)。 なので本家D3.js - Data-Driven Documentsからzipファイルをダウンロードします。(今現在はバージョン3.5.9です。) 解凍した時のファイル構成はd3フォルダの中にd3.jsとd3.min.js、LICENSEという
Vagrant 1.5 で追加された Rsync Synced Folder が良い
Vagrant 1.5 がリリースされました。1.1 以来の big change ということで、目新しい機能が追加されています。 目玉はやはり Vagrant Share だと思うのですが、その他にも Web システムの開発に Vagrant を使っている人には嬉しい機能が追加されています。 その一つが Rsync Synced Folder です。 Vagrant には、ホストマシンとゲストマシンとでファイルを共有、同期する機能があります。 これにより、開発はホストマシンで行い、実行は LA(MP)P 環境であるゲストマシンで行うという、いいとこ取りができました。 この機能を実現する方法として、shared folder（VirtualBox の機能）や NFS を利用することができたのですが、これに rsync による同期が追加されました。 ホストマシンからゲストマシンへ rsync
【D3.js】 SVGで路線図を描く
example 今までやってきた内容の復習に、D3.jsを使って路線図を描いててみました。 当初は、バスの路線図を作っていたのですが、群馬県内に絞ってもバス停やバスルートの情報量が多く、重くて大変だったので途中で路線変更しました。 鉄道データは、いつものごとく国土数値情報より。 *Quantum GISは正式にQGISに名称が変更されました。 QGIS 鉄道データ(Shape)をQGISに読み込み、群馬県内を選択、選択したレイヤーをいったん切り出しShapeで保存、MapShaperで簡素化。 再度、Quantum GISに読み込んでGeoJSONに変換。 また、鉄道(線)データだけTopoJSONに変換しています。 (点データはTopoJSONに変換してもさほど軽量化の恩恵が得られないみたいなのでそのままつかってます） 途中、Quantum GISの属性データの文字化け問題に悩まされまし
[JS]なにこれ楽しい！インタラクション満載の路線図を実装するスクリプト -transitive.js
路線図の入り組んでいるところって、分かりにくいですよね。 そんな問題を解決するCanvasで実装するインタラクション満載の路線図のスクリプトを紹介します。 ↓くっついてて分かりにくい箇所も、こんな感じに移動できます。 デモページ 上のアニメーションgifみたいに移動させることだけでなく、ホイール操作での拡大縮小やドラッグ操作などもできます。 路線図は各要素（駅やルートなど）のテキストファイルを元に、Canvasで描画されています。 各要素のデータ（オレンジのルート）はこんな感じです。 "route": "ORANGE", "from": "12488", "to": "7588", "fromName": "COURTHOUSE METRO STATION", "toName": "METRO CENTER METRO STATION", "routeShortName": "Orange
transitive.js - 路線図を生成するJavaScriptライブラリ MOONGIFT
データのビジュアル化を考えた場合、常に正確に出すのが最善とは限りません。トレンドを知りたい場合はその傾向を見るためにデータを無視したり、より特徴的なポイントに主眼を置いたりします。地図も同じです。 案内図などは正確性よりも直線や曲がり角を重視した図になっています。同様に路線図も駅の間隔や合流ポイントなどに主眼を置くでしょう。そんな分かりやすい路線図を生成できるのがtransitive.jsです。 transitive.jsの使い方 こちらがデモです。とても見やすい路線図ですね。 右側の路線をマウスオーバーすると、その路線だけがハイライト表示されます。 ズーム表示やマウスドラッグでの視点変更も可能です。 データを作るのが多少大変なように見えますが、一度作ってしまえば後はtransitive.jsが自動生成してくれるのが便利です。データ自体はデータベースに保存しておいてスクリプトで生成する形で
Yahoo! JavaScriptマップAPIで鉄道路線図を表示する - Qiita
概要 YOLP(地図):Yahoo! JavaScriptマップAPI のスタイル地図レイヤーを利用して鉄道路線図を表示する。 動作サンプルのスクリーンショット 鉄道路線図を表示するソースコード <!DOCTYPE html> <html lang="ja" style="width: 100%; height: 100%"> <head> <title>Rails Map</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> </head> <body style="width: 100%; height: 100%; margin:0; padding:0;"> <div
YOLP(地図):JavaScriptマップAPI - Yahoo!デベロッパーネットワーク
Yahoo! Open Local Platform（YOLP）は、Yahoo!マップがデベロッパー向けに提供する地図・地域情報のAPI・SDKです。ウェブページの制作はもちろん、スマートフォン向けアプリケーションの開発においても、多彩な地図表示、店舗・施設検索、ジオコーディング、ルート検索、標高データ取得などの豊富な機能をご活用いただけます。 お知らせ 地図・地域情報の検索 Yahoo!ローカルサーチAPI 全国の店舗、イベント、クチコミ情報などの地域・拠点情報を検索できます。 Yahoo!ジオコーダAPI 住所をキーワードとして検索し、その位置情報を提供します。 Yahoo!リバースジオコーダAPI 指定の地点の住所情報を取得する機能を提供します。 その他の便利ツール 気象情報API 指定した緯度経度の降水強度実測値と予測値を取得できます。 郵便番号検索API 郵便番号を指定して、位置
CBCNET | Topic » 書籍「ビジュアル・コンプレキシティ ―情報パターンのマッピング」刊行と重版を記念したイベント「可視化可不可」を振り返る
Posted on July 18, 2012(Wed) in: レポート| Posted by: editor 知識の体系化の歴史、ビジュアライゼーションの最前線をまとめた書籍「ビジュアル・コンプレキシティ ―情報パターンのマッピング」の本の刊行と重版を記念してイベント「可視化可不可」が6月27日、amuにて開催された。本イベントは「ビジュアライゼーション」をさまざまな角度から紹介し、複雑なデータネットワークにまみれて生きる私たちの未来を照らし出す目的で開催された。出演者は、奥 いずみ、久保田晃弘、松井 茂、矢崎裕一、山辺真幸。 本イベントをざっと振り返ってみたい。 1. 「データ・ビジュアライゼーションとは」奥いずみ 最初のプレゼンターは奥いずみ氏。 The Power of Network 最初にイントロダクションとして、「ビジュアル・コンプレキシティ」の全貌を10分にまとめたアニメ
プログラマーが効果的な可視化を作成する（後編 Part 2）: 学習ガイド - Qiita
(後半 Part1からの続きです。何故か元記事が消失したので、分割して再構成しました。) シリーズ各セクションへのリンク 前編: 効果的なデータ可視化とはどのようなものか？ 中編: 分かりにくい可視化を避けるための手法の選択 後編: Part 1 基本原則 後編: Part 2 学習ガイド データ可視化について更に学ぶ ここまでに書いたことは、可視化の専門家ではない自分が経験や読書などで得た知識の一部です。つまり普通に手に入る情報や本でこの分野はある程度まで独学できます。プログラマーの方々がこの先さらに学ぶためのポインタを幾つか示したいと思います。 英語を学ぶ いきなりやる気を無くすアドバイスで申し訳ないのですが、プログラミング一般の話題と同じく、実務方面の可視化に関する最新の話題は、ほぼ全ての一次情報が英語で書かれています。日本語の紹介記事を待ってもいいのですが、そうするとかなりのタイム
沖縄のIC乗車カード｢OKICA｣、初のデザイン変更 人気観光キャラを採用 | 沖縄タイムス＋プラス
沖縄都市モノレール（ゆいレール）や本島路線バスで利用できるＩＣ乗車カード「ＯＫＩＣＡ（オキカ）」を発行する沖縄ＩＣカード（那覇市、仲吉良次社長）は２３日、乗車カードの新しいデザインを発表した。デザイン変更は２０１４年導入以降初めて。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
沖縄の交通系ICカード「OKICA」新デザイン発表会。花笠マハエ、マハ朗を採用