stylesslab-annex D3.jsとTopoJSONで地図を表示してみたその１

2024　11.21　Thu
[PR] ＣＡＴＥＧＯＲＹ　：

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

2013　01.13　Sun
D3.jsとTopoJSONで地図を表示してみたその１ＣＡＴＥＧＯＲＹ　：d3.js

jQueryを使用しているサイトが55%を超え、JavaScriptがWebを席巻している昨今、今更jQueryを取り上げても面白くなぁと思っていたら、d3.jsというライブラリを発見。
なんか凄そうなので、先人たちの轍をたどりながら、サンプルを作成してみた。

TOOLたちのインストール
あんまり使わないかもしれない(?)ツールをアレやコレやとインストールしまくって自慢のMacBookが雑多になるのを避けるため、VMWare上にubuntuをインストールして、TOOLたちはそこへインストールする事にしました。

【その１】
PROJとGDALのインストール
PROJ・・・緯度経度⇔投影座標値との相互変換を行うライブラリ
GDAL・・・地理空間データ抽出ライブラリ

幸いな事にubuntuにはapt-getが標準でついてるので、これを使わない手はありません。以下のコマンドでさくっとやっつけましょう。

$ sudo apt-get update
$ sudo apt-get install proj
$ sudo apt-get install gdal-bin

【その２】
node.js関連のインストール
$ sudo apt-get install nodejs
$ sudo apt-get install npm

apt-getって素晴らしい(？)
※(？)が付いた理由は後ほど。

【その３】
TopoJSONのインストール
TopoJSONという何やら聞き慣れないものをインストールします。
どうやらGeoJSONの拡張フォーマットらしいです。

$ npm install -g topojson

npm ERR! couldn't read package.json in .

npm ERR! Error installing .

npm ERR! Error: ENOENT, No such file or directory 'package.json'

npm ERR! Report this *entire* log at <http://github.com/isaacs/npm/issues>

npm ERR! or email it to <npm-@googlegroups.com>

npm ERR! Just tweeting a tiny part of the error will not be helpful.

npm not ok

おや？？

$ npm -v

0.2.19

どうやらnpmのバージョンが古いようです。

$ node -v

v0.4.9

node.jsも古め。。
apt-get upgradeしても変わらなかったので、手動インストールすることに。

【その４】
node.jsの再インストール
まずは、先ほどインストールしたnode.jsのアンインストールから。

$ sudo apt-get autoremove nodejs

$ sudo apt-get autoremove npm

パッケージリストを読み込んでいます... 完了

依存関係ツリーを作成しています

状態情報を読み取っています... 完了

パッケージ npm はインストールされていないため、削除はできません

あら。nodejsと一緒に削除されてたようですね。

では、改めて手動インストールを実施します。
お行儀よく、Downloadsディレクトリに移動してからwgetしましょう。

$ cd ~/Downloads/

$ wget http://nodejs.org/dist/node-latest.tar.gz

node.jsのコンパイルには以下のライブラリが必要なので、
事前にインストールしておきます。
・build-essential
・libssl-dev

$ sudo apt-get install build-essential

$ sudo apt-get install libssl-dev

ダウンロードしたnode.jsを解凍します。

$ tar xvfz node-latest.tar.gz

展開されたディレクトリへ移動します。

$ cd node-v0.8.17

configureを実行します。
$ ./configure

make & make install

$ make
気長に待ちましょう。

$ sudo make install

インストールが完了したら、node.jsのバージョンを確認してみましょう。

$ node -v

bash: /usr/bin/node: そのようなファイルやディレクトリはありません

そんな事言われてもめげずに、シンボリックリンクでも作りましょう。

$ sudo ln -s /usr/local/bin/node /usr/bin/node

$ sudo ln -s /usr/local/bin/npm /usr/bin/npm

さぁ。もう一度、バージョン確認です。
$ node -v

v0.8.17

$ npm -v

1.2.0