<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
	<channel>
		<title>D3-Js on akky@サイボウズラボ・ブログ</title>
		<link>https://labs.cybozu.co.jp/blog/akky/tags/d3-js/</link>
		<description>Recent content in D3-Js on akky@サイボウズラボ・ブログ</description>
		<generator>Hugo</generator>
		<language>ja</language>
		
		
		
		
			<lastBuildDate>Fri, 13 Oct 2017 00:00:00 +0000</lastBuildDate>
		
			<atom:link href="https://labs.cybozu.co.jp/blog/akky/tags/d3-js/index.xml" rel="self" type="application/rss+xml" />
			<item>
				<title>人間の顔を、世界地図の「図法」で表すとこうなる、というコード</title>
				<link>https://labs.cybozu.co.jp/blog/akky/2017/10/face-mapping-on-globe-map-projections/</link>
				<pubDate>Fri, 13 Oct 2017 00:00:00 +0000</pubDate>
				<guid>https://labs.cybozu.co.jp/blog/akky/2017/10/face-mapping-on-globe-map-projections/</guid>
				<description>&lt;p&gt;&lt;a href=&#34;http://bl.ocks.org/awoodruff/9216081&#34;&gt;Projection face!&lt;/a&gt; は、人間の顔を世界地図の上に描いて、図法を変えたらどう歪んで見えるか、というのを見せてくれるウェブサイトです。&lt;/p&gt;&#xA;&lt;p&gt;&lt;a href=&#34;https://labs.cybozu.co.jp/blog/akky/2017/10/face-mapping-on-globe-map-projections/face-projection-mercator.png&#34;&gt;&lt;picture&gt;&#xA;  &lt;source type=&#34;image/webp&#34; srcset=&#34;https://labs.cybozu.co.jp/blog/akky/2017/10/face-mapping-on-globe-map-projections/face-projection-mercator_hu_4494339220a11b53.webp 480w, https://labs.cybozu.co.jp/blog/akky/2017/10/face-mapping-on-globe-map-projections/face-projection-mercator_hu_82c0726763c08895.webp 768w, https://labs.cybozu.co.jp/blog/akky/2017/10/face-mapping-on-globe-map-projections/face-projection-mercator_hu_68510da1a8df4dbc.webp 983w&#34; sizes=&#34;(max-width: 56rem) 100vw, 54rem&#34;&gt;&#xA;  &lt;img src=&#34;https://labs.cybozu.co.jp/blog/akky/2017/10/face-mapping-on-globe-map-projections/face-projection-mercator.png&#34; width=&#34;983&#34; height=&#34;577&#34; alt=&#34;&#34; loading=&#34;lazy&#34; decoding=&#34;async&#34;&gt;&#xA;&lt;/picture&gt;&lt;/a&gt;&lt;/p&gt;&#xA;&lt;p&gt;図法というのは、メルカトルとかモルワイデとかいうアレですね。代表的なものは社会科で習ったと思います。&lt;/p&gt;&#xA;&lt;p&gt;D3.js を使って63もの図法で表示してくれますが、&lt;a href=&#34;http://bl.ocks.org/awoodruff/9216081&#34;&gt;ソースコード&lt;/a&gt;も公開されています。&lt;/p&gt;&#xA;&lt;p&gt;一個ずつ選択するのではなく全部を並べて見たい人のために一ページにおさめられたものが&lt;a href=&#34;http://bl.ocks.org/vlandham/raw/9216751/&#34;&gt;こちら&lt;/a&gt;になります。&lt;/p&gt;&#xA;&lt;p&gt;&lt;a href=&#34;http://bl.ocks.org/vlandham/raw/9216751/&#34;&gt;&lt;picture&gt;&#xA;  &lt;source type=&#34;image/webp&#34; srcset=&#34;https://labs.cybozu.co.jp/blog/akky/2017/10/face-mapping-on-globe-map-projections/face-map-projection-samples_hu_dca98df5b49ae39f.webp 480w, https://labs.cybozu.co.jp/blog/akky/2017/10/face-mapping-on-globe-map-projections/face-map-projection-samples_hu_65ae5feaebc3cfc3.webp 738w&#34; sizes=&#34;(max-width: 56rem) 100vw, 54rem&#34;&gt;&#xA;  &lt;img src=&#34;https://labs.cybozu.co.jp/blog/akky/2017/10/face-mapping-on-globe-map-projections/face-map-projection-samples.png&#34; width=&#34;738&#34; height=&#34;764&#34; alt=&#34;&#34; loading=&#34;lazy&#34; decoding=&#34;async&#34;&gt;&#xA;&lt;/picture&gt;&lt;/a&gt;&lt;/p&gt;&#xA;&lt;p&gt;球の表面を二次元で表そうとした時の図法、こんなにたくさんあってそれぞれ名前がついているんですね。&lt;/p&gt;&#xA;&lt;p&gt;顔をマップしてみるというのは、元々は、&lt;a href=&#34;https://archive.org/stream/cu31924003898271#page/n1/mode/1up&#34;&gt;1921年に書かれた論文 &amp;ldquo;Elements of Map Projection&amp;rdquo;&lt;/a&gt;に描かれていたものが初出だそうです。100年近く前ですから、この時のプロットは当然手書きでしょうね。&lt;/p&gt;&#xA;&lt;p&gt;&lt;a href=&#34;https://labs.cybozu.co.jp/blog/akky/2017/10/face-mapping-on-globe-map-projections/face-mapping-thesis-1921.png&#34;&gt;&lt;picture&gt;&#xA;  &lt;source type=&#34;image/webp&#34; srcset=&#34;https://labs.cybozu.co.jp/blog/akky/2017/10/face-mapping-on-globe-map-projections/face-mapping-thesis-1921_hu_ee1986b9fe27a056.webp 473w&#34; sizes=&#34;(max-width: 56rem) 100vw, 54rem&#34;&gt;&#xA;  &lt;img src=&#34;https://labs.cybozu.co.jp/blog/akky/2017/10/face-mapping-on-globe-map-projections/face-mapping-thesis-1921.png&#34; width=&#34;473&#34; height=&#34;596&#34; alt=&#34;&#34; loading=&#34;lazy&#34; decoding=&#34;async&#34;&gt;&#xA;&lt;/picture&gt;&lt;/a&gt;&lt;/p&gt;&#xA;&lt;p&gt;geojson形式のデータを用意すれば、別の絵についても簡単に同様のプロジェクションが作れます。さまざまな図法の違いの体感もできるし、架空の世界の地図で、真東がどこになるか、等距離の場所はどこになるか、等を考えるのに使えたりするかもしれません。&lt;/p&gt;&#xA;&lt;p&gt;via &lt;a href=&#34;https://flowingdata.com/2014/01/13/map-projections-illustrated-with-a-face/&#34;&gt;FlowingData&lt;/a&gt;&lt;/p&gt;</description>
			</item>
			<item>
				<title>任意の二つの国の大きさ比較をブラウザ上でできる Which is bigger: Africa or North America</title>
				<link>https://labs.cybozu.co.jp/blog/akky/2015/07/website-to-compare-two-countries-on-globe/</link>
				<pubDate>Wed, 08 Jul 2015 00:00:00 +0000</pubDate>
				<guid>https://labs.cybozu.co.jp/blog/akky/2015/07/website-to-compare-two-countries-on-globe/</guid>
				<description>&lt;p&gt;&lt;a href=&#34;http://bl.ocks.org/zanarmstrong/raw/caa2da1ea1558cdc3357/&#34;&gt;Is Africa bigger than North America (アフリカは北米より大きい?)&lt;/a&gt;は、世界地図上の好きな2点を自由に重ね合わせて、国や大陸の大きさを簡単に比較できるweb上のツールです。&lt;/p&gt;&#xA;&lt;p&gt;&lt;a href=&#34;https://labs.cybozu.co.jp/blog/akky/2015/07/website-to-compare-two-countries-on-globe/compare-countries-on-globe-tool.png&#34;&gt;&lt;picture&gt;&#xA;  &lt;source type=&#34;image/webp&#34; srcset=&#34;https://labs.cybozu.co.jp/blog/akky/2015/07/website-to-compare-two-countries-on-globe/compare-countries-on-globe-tool_hu_a8b416ab8d088272.webp 480w, https://labs.cybozu.co.jp/blog/akky/2015/07/website-to-compare-two-countries-on-globe/compare-countries-on-globe-tool_hu_d530bab7aedd8129.webp 768w, https://labs.cybozu.co.jp/blog/akky/2015/07/website-to-compare-two-countries-on-globe/compare-countries-on-globe-tool_hu_ad9368016229a799.webp 914w&#34; sizes=&#34;(max-width: 56rem) 100vw, 54rem&#34;&gt;&#xA;  &lt;img src=&#34;https://labs.cybozu.co.jp/blog/akky/2015/07/website-to-compare-two-countries-on-globe/compare-countries-on-globe-tool.png&#34; width=&#34;914&#34; height=&#34;773&#34; alt=&#34;compare-countries-on-globe-tool&#34; loading=&#34;lazy&#34; decoding=&#34;async&#34;&gt;&#xA;&lt;/picture&gt;&lt;/a&gt;&lt;/p&gt;&#xA;&lt;p&gt;左側の二つの地球をマウスで回して、比べたい2地点を決めると、右側で二つの地図が重なって見えます。&lt;/p&gt;&#xA;&lt;p&gt;&lt;a href=&#34;https://labs.cybozu.co.jp/blog/akky/2015/07/website-to-compare-two-countries-on-globe/madagascar-and-japan.png&#34;&gt;&lt;picture&gt;&#xA;  &lt;source type=&#34;image/webp&#34; srcset=&#34;https://labs.cybozu.co.jp/blog/akky/2015/07/website-to-compare-two-countries-on-globe/madagascar-and-japan_hu_f576aafa4080b35e.webp 480w, https://labs.cybozu.co.jp/blog/akky/2015/07/website-to-compare-two-countries-on-globe/madagascar-and-japan_hu_215abb323a68d02a.webp 580w&#34; sizes=&#34;(max-width: 56rem) 100vw, 54rem&#34;&gt;&#xA;  &lt;img src=&#34;https://labs.cybozu.co.jp/blog/akky/2015/07/website-to-compare-two-countries-on-globe/madagascar-and-japan.png&#34; width=&#34;580&#34; height=&#34;579&#34; alt=&#34;madagascar-and-japan&#34; loading=&#34;lazy&#34; decoding=&#34;async&#34;&gt;&#xA;&lt;/picture&gt;&lt;/a&gt; (マダガスカル島と日本)&lt;/p&gt;&#xA;&lt;p&gt;よく使われるメルカトル図法の世界地図では、南北の極地に近づくほど地図上の面積が実際の面積より大きく見えてしまいます。グリーンランドやカナダが大きく見えたり、アフリカが小さく見えたりするので、メルカトル図法の地図に慣れていると直感的には国や大陸の大きさ比較がうまくできません。&lt;/p&gt;&#xA;&lt;p&gt;地球全体を一度に描こうとしなければ面積のずれは発生しにくくなるわけで、表示できる縮尺を限定して好きな位置を中心に2枚の地図をオーバーレイすることで、大きさの比較だけをやりやすくしています。&lt;/p&gt;&#xA;&lt;p&gt;D3.jsを使ったソースコードも&lt;a href=&#34;http://bl.ocks.org/zanarmstrong/caa2da1ea1558cdc3357&#34;&gt;公開されています&lt;/a&gt;。&lt;/p&gt;&#xA;&lt;p&gt;via &lt;a href=&#34;http://flowingdata.com/2015/07/07/a-more-realistic-perspective-of-country-sizes/&#34;&gt;Flowing Data&lt;/a&gt;&lt;/p&gt;</description>
			</item>
	</channel>
</rss>
