インフォグラフィックを作ってみよう<#1 日本地図を作る>

インフォグラフィックを作ってみよう<#1 日本地図を作る>

ソフトバンク・au・ドコモの方は、公式のオンラインショップを利用すれば頭金不要で通常のショップよりお得に購入できます。

みなさんは『インフォグラフィック』という言葉を聞いたことがありますか?

『インフォグラフィック』とは情報を視覚的に表現し、ひと目で伝えたいことを伝えられるように工夫した図や資料などを意味しています。視覚的に伝えることに主眼を置いているので「図形、数字、イラスト」等から成り立っているものがほとんどです。

全員がデータサイエンティストである必要もなく、そして言語が異なる相手であっても、伝えたいことを相手に伝えることができるという点が『インフォグラフィック』の最大のメリットなのではないでしょうか。

今回は非デザイナー、かつ入社1年目の僕が、あえてWEB上で『インフォグラフィック』の制作に挑戦してみようと思います。

目指すところは都道府県別人口分布図、まずは下ごしらえを

何事においてもチャレンジにはゴールが必要。目標なくして挑戦はなしです。
そこで今回の挑戦のゴール地点は、日本地図上に総務省統計局から取得した都道府県別の人口分布図を“カッコよく”表示させる所までとします。

まずは表示させるためには日本地図が必要です。オネショで作った地図を使用というわけにもいきませんので、地図制作から挑戦スタート! ここで見誤ってしまうと、仕上がりがダサい地図になりかねませんので、細心の注意を払います。
ちなみに言語はJavaScriptを使用。そしてグラフデータの扱いに長けている「D3.js」というJavaScriptライブラリを利用してみました。

そして作成したものをChromeブラウザ上で表示させたのが下の画像です。

[bitwabe]インフォグラフへの取り組み第1回_20160804

参考までにソースコードも記載しておきます。
【HTML】

【JavaScript】scripts/viewer.js

今回はここまで。

次回は総務省統計局から取得した都道府県別の人口数データを元に、今回作成した地図に重ねて表示させるデータの作成を行います。

地図の仕上がりがカッコ悪くなってしまいますから、今から人口爆発なんてしないでよ~。
以上、元島でした。

ソフトバンク・au・ドコモの方は、公式のオンラインショップを利用すれば頭金不要で通常のショップよりお得に購入できます。

【週刊bitWave】(メルマガ)始めました!

登録はこちらからメールアドレスを入力してお申込みください。

ご登録いただいたメールアドレスは 【週刊bitWave】の更新情報の配信にのみ使用します。

個人情報の取扱いに関しては、「プライバシーポリシー」をご確認ください。解除はいつでもこちらから行うことが可能です。

あなたにおすすめ

FlickrのAPIとPHP/HTML/CSSを使って写真ギャラリーサイトを作りましょう。PHPのコ... Flickrシリーズの続きです! Part. 1 : プロジェクトの背景とゴール Part. 2 : FlickrのAPIの秘密とコール方法 Part. 3 : PHPのコーディング Part. 4 : HTMLのコーディング ...
FlickrのAPIとPHP/HTML/CSSで写真ギャラリーサイトを作る(Part.2 APIの秘... Flickrシリーズの続きです! Part. 1 : プロジェクトの背景とゴール Part. 2 : FlickrのAPIの秘密とコール方法 Part. 3 : PHPのコーディング Part. 4 : HTMLのコーディング ...
FlickrのAPIとPHP/HTML/CSSで写真ギャラリーサイトを作る(Part.1 ゴールと背... 最近サイドプロジェクトをネットに上げました: http://premflux.com/cc0/free-photo-japan-tsukuba-32576937024.html そのプロジェクトの開発をAからZまで細かく説明したいと...
ドキュメントは手書きでもよくない?... 開発をする上でドキュメントはとても大切です。 それはウォーターフォール型開発かアジャイル型開発かに関わらずとても大切です。 しかしドキュメントを作成に膨大な時間を費やすことで、ドキュメント作成自体が目的になってしまい、生産性を伴いません。...