https://namaraii.com/tags/d3.js/Recent content in D3.js on namaraii.comHugo -- gohugo.iojahitoshi@namaraii.com (竹内 仁 (TAKEUCHI Hitoshi))hitoshi@namaraii.com (竹内 仁 (TAKEUCHI Hitoshi))© 2026 TAKEUCHI Hitoshi, All Rights Reserved.Tue, 01 May 2018 16:34:58 +0900https://namaraii.com/posts/20180501_d3-jplayer/Tue, 01 May 2018 16:34:58 +0900hitoshi@namaraii.com (竹内 仁 (TAKEUCHI Hitoshi))https://namaraii.com/posts/20180501_d3-jplayer/<p><a href="https://namaraii.com/posts/D3js/" >D3.js</a>でJリーガーの出身地マップを作ってみました。</p> <p>もっとも多いのは東京都の199人で、もっとも少ないのは高知県の1名でした。なかなかおもしろい。</p> <figure><img class="my-0 rounded-md" loading="lazy" decoding="async" fetchpriority="auto" alt="Jリーガー出身地マップ" width="805" height="492" src="https://namaraii.com/images/20180501_d3-jplayer-001_hu_a8509e24b31756b2.png" srcset="https://namaraii.com/images/20180501_d3-jplayer-001_hu_a8509e24b31756b2.png 800w, https://namaraii.com/images/20180501_d3-jplayer-001.png 1280w" sizes="(min-width: 768px) 50vw, 65vw" data-zoom-src="https://namaraii.com/images/20180501_d3-jplayer-001.png"></figure> <p>出身の選手数が多いほど濃い色で表示され、マウスオーバーすると都道府県名・出身者数・選手名がツールチップで表示されます。</p> <p><a href="https://gist.github.com/htakeuchi/70b802034289a29d8e170c2edc72c897" target="_blank" rel="noreferrer">ソースコードはこちら</a>です。プログラム的には、</p> <ul> <li>TopoJSON形式の地図データ表示</li> <li>複数JSONファイルの扱い(Promise.allを使用)</li> <li>都道府県ごとのツールチップ設定（表示は<a href="https://atomiks.github.io/tippyjs/" target="_blank" rel="noreferrer">Tippy.js</a>を使用）</li> <li>d3.scaleLinearを用いた表示色の制御</li> </ul> <p>などがトピックスでしょうか（というか、自分が勉強したことですが）</p> <p>いくつかD3.jsでデータの見える化を試してみましたが、D3に食わせるデータを準備するところ、スクレイピングだったり、クレンジング、データの編集・加工などがいちばん大変かもしれません。（機械学習でも同じような苦しみがありますよね…）</p> <p>以下は、地図情報の準備手順なのですが、まとまっておらず自分用の覚書です。</p> <h2 class="relative group">地図情報の準備(覚書) <div id="地図情報の準備覚書" class="anchor"></div> <span class="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100 select-none"> <a class="text-primary-300 dark:text-neutral-700 !no-underline" href="#%e5%9c%b0%e5%9b%b3%e6%83%85%e5%a0%b1%e3%81%ae%e6%ba%96%e5%82%99%e8%a6%9a%e6%9b%b8" aria-label="アンカー">#</a> </span> </h2> <h3 class="relative group">地形ファイルの入手 <div id="地形ファイルの入手" class="anchor"></div> <span class="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100 select-none"> <a class="text-primary-300 dark:text-neutral-700 !no-underline" href="#%e5%9c%b0%e5%bd%a2%e3%83%95%e3%82%a1%e3%82%a4%e3%83%ab%e3%81%ae%e5%85%a5%e6%89%8b" aria-label="アンカー">#</a> </span> </h3> <ul> <li>国土数値情報（日本限定、ライセンスに注意） <ul> <li><a href="http://nlftp.mlit.go.jp/ksj/index.html" target="_blank" rel="noreferrer">http://nlftp.mlit.go.jp/ksj/index.html</a></li> </ul> </li> <li>Natural Earth（世界全体、ライセンスフリー。ただし日本国土の国境の扱いが日本政府の方針と異なるケースがある） <ul> <li><a href="http://www.naturalearthdata.com/" target="_blank" rel="noreferrer">http://www.naturalearthdata.com/</a> <ul> <li><a href="http://www.naturalearthdata.com/http//www.naturalearthdata.com/download/10m/cultural/ne_10m_admin_1_states_provinces.zip" target="_blank" rel="noreferrer">http://www.naturalearthdata.com/http//www.naturalearthdata.com/download/10m/cultural/ne_10m_admin_1_states_provinces.zip</a></li> </ul> </li> </ul> </li> </ul> <p>今回はNatural Earthのデータを利用(Admin 1 – States, Provinces)</p> <h3 class="relative group">GeoJSON形式への変換 <div id="geojson形式への変換" class="anchor"></div> <span class="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100 select-none"> <a class="text-primary-300 dark:text-neutral-700 !no-underline" href="#geojson%e5%bd%a2%e5%bc%8f%e3%81%b8%e3%81%ae%e5%a4%89%e6%8f%9b" aria-label="アンカー">#</a> </span> </h3> <p>ShapeFileからGeoJSON形式に変換します。</p> <h4 class="relative group">関連ツールのインストール <div id="関連ツールのインストール" class="anchor"></div> <span class="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100 select-none"> <a class="text-primary-300 dark:text-neutral-700 !no-underline" href="#%e9%96%a2%e9%80%a3%e3%83%84%e3%83%bc%e3%83%ab%e3%81%ae%e3%82%a4%e3%83%b3%e3%82%b9%e3%83%88%e3%83%bc%e3%83%ab" aria-label="アンカー">#</a> </span> </h4> <div class="highlight-wrapper"><div class="highlight"><pre tabindex="0" class="chroma"><code class="language-text" data-lang="text"><span class="line"><span class="cl">npm install -g topojson </span></span><span class="line"><span class="cl">brew install gdal </span></span><span class="line"><span class="cl">brew install node</span></span></code></pre></div></div> <p>Natural EarthからダウンロードしたShapefileは日本以外の情報も含まれており、GeoJSON形式へ変換する際に、データの絞り込みができるogr2ogrを使う。</p>