<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
	<channel>
		<title>チャート on akky@サイボウズラボ・ブログ</title>
		<link>https://labs.cybozu.co.jp/blog/akky/tags/%E3%83%81%E3%83%A3%E3%83%BC%E3%83%88/</link>
		<description>Recent content in チャート on akky@サイボウズラボ・ブログ</description>
		<generator>Hugo</generator>
		<language>ja</language>
		
		
		
		
			<lastBuildDate>Fri, 12 Jun 2020 00:00:00 +0000</lastBuildDate>
		
			<atom:link href="https://labs.cybozu.co.jp/blog/akky/tags/%E3%83%81%E3%83%A3%E3%83%BC%E3%83%88/index.xml" rel="self" type="application/rss+xml" />
			<item>
				<title>プロッター・プレゼンテーション</title>
				<link>https://labs.cybozu.co.jp/blog/akky/2020/06/plotter-presentation/</link>
				<pubDate>Fri, 12 Jun 2020 00:00:00 +0000</pubDate>
				<guid>https://labs.cybozu.co.jp/blog/akky/2020/06/plotter-presentation/</guid>
				<description>&lt;p&gt;原油の需要と価格の経年グラフを見ながら語る&lt;a href=&#34;https://www.youtube.com/watch?v=TzVEGaFW74I&#34;&gt;プレゼンテーション動画&lt;/a&gt;なのですが、面白い仕組みが一つ。プロッターでグラフを描かせながら、年ごとの原油価格とそれに影響を与えた事件を語っていきます。&lt;/p&gt;&#xA;&lt;p&gt;&lt;a href=&#34;https://labs.cybozu.co.jp/blog/akky/2020/06/plotter-presentation/plotter-presentation-1.png&#34;&gt;&lt;picture&gt;&#xA;  &lt;source type=&#34;image/webp&#34; srcset=&#34;https://labs.cybozu.co.jp/blog/akky/2020/06/plotter-presentation/plotter-presentation-1_hu_ec753a7e2085ae21.webp 480w, https://labs.cybozu.co.jp/blog/akky/2020/06/plotter-presentation/plotter-presentation-1_hu_9cb53e5eebe3f156.webp 768w, https://labs.cybozu.co.jp/blog/akky/2020/06/plotter-presentation/plotter-presentation-1_hu_8db0d003b73f789e.webp 937w&#34; sizes=&#34;(max-width: 56rem) 100vw, 54rem&#34;&gt;&#xA;  &lt;img src=&#34;https://labs.cybozu.co.jp/blog/akky/2020/06/plotter-presentation/plotter-presentation-1.png&#34; width=&#34;937&#34; height=&#34;525&#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://labs.cybozu.co.jp/blog/akky/2020/06/plotter-presentation/plotter-change-pen-manually.png&#34;&gt;&lt;picture&gt;&#xA;  &lt;source type=&#34;image/webp&#34; srcset=&#34;https://labs.cybozu.co.jp/blog/akky/2020/06/plotter-presentation/plotter-change-pen-manually_hu_9abf8cba7ee0e156.webp 480w, https://labs.cybozu.co.jp/blog/akky/2020/06/plotter-presentation/plotter-change-pen-manually_hu_c53d4faa5061ed63.webp 768w, https://labs.cybozu.co.jp/blog/akky/2020/06/plotter-presentation/plotter-change-pen-manually_hu_a29e80c65070c466.webp 943w&#34; sizes=&#34;(max-width: 56rem) 100vw, 54rem&#34;&gt;&#xA;  &lt;img src=&#34;https://labs.cybozu.co.jp/blog/akky/2020/06/plotter-presentation/plotter-change-pen-manually.png&#34; width=&#34;943&#34; height=&#34;529&#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://labs.cybozu.co.jp/blog/akky/2020/06/plotter-presentation/plotter-oil-shock.png&#34;&gt;&lt;picture&gt;&#xA;  &lt;source type=&#34;image/webp&#34; srcset=&#34;https://labs.cybozu.co.jp/blog/akky/2020/06/plotter-presentation/plotter-oil-shock_hu_7e6dd34404be10d.webp 396w&#34; sizes=&#34;(max-width: 56rem) 100vw, 54rem&#34;&gt;&#xA;  &lt;img src=&#34;https://labs.cybozu.co.jp/blog/akky/2020/06/plotter-presentation/plotter-oil-shock.png&#34; width=&#34;396&#34; height=&#34;479&#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;/p&gt;&#xA;&lt;div style=&#34;position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;&#34;&gt;&#xA;&#x9;&#x9;&#x9;&lt;iframe allow=&#34;accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share; fullscreen&#34; loading=&#34;eager&#34; referrerpolicy=&#34;strict-origin-when-cross-origin&#34; src=&#34;https://www.youtube.com/embed/TzVEGaFW74I?autoplay=0&amp;amp;controls=1&amp;amp;end=0&amp;amp;loop=0&amp;amp;mute=0&amp;amp;start=0&#34; style=&#34;position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;&#34; title=&#34;YouTube video&#34;&gt;&lt;/iframe&gt;&#xA;&#x9;&#x9;&lt;/div&gt;&#xA;&#xA;&lt;p&gt;使っているプロッタは &lt;a href=&#34;https://www.robotshop.com/jp/ja/axidraw-v3-a3-personal-writing-drawing-robot.html&#34;&gt;AxiDraw V3 / A3&lt;/a&gt;。8万円ぐらい。昔のものではなく今の製品なんですね。&lt;/p&gt;&#xA;&lt;p&gt;via Hacker News&lt;/p&gt;</description>
			</item>
			<item>
				<title>手書き風グラフを描けるライブラリ xkcd.chart</title>
				<link>https://labs.cybozu.co.jp/blog/akky/2019/08/handwriting-flavour-xkcd-chart/</link>
				<pubDate>Mon, 19 Aug 2019 00:00:00 +0000</pubDate>
				<guid>https://labs.cybozu.co.jp/blog/akky/2019/08/handwriting-flavour-xkcd-chart/</guid>
				<description>&lt;p&gt;英語圏でエンジニアに人気の&lt;a href=&#34;https://xkcd.com/&#34;&gt;線画コミックサイト xkcd&lt;/a&gt; には、グラフを使ったジョークネタも頻出します。こんな感じ。&lt;/p&gt;&#xA;&lt;p&gt;&lt;a href=&#34;https://xkcd.com/688/&#34;&gt;&lt;img src=&#34;https://imgs.xkcd.com/comics/self_description.png&#34; alt=&#34;&#34; loading=&#34;lazy&#34; decoding=&#34;async&#34;&gt;&lt;/a&gt;&lt;/p&gt;&#xA;&lt;p&gt;xkcd に出てくるようなグラフは、だいたい手書き風のテイストで描かれているのですが、その手書き風グラフを再現できるグラフ描画ライブラリが &lt;a href=&#34;https://timqian.com/chart.xkcd/&#34;&gt;xkcd.chart&lt;/a&gt; です。&lt;/p&gt;&#xA;&lt;script&gt;const svgPie = document.querySelector(&#39;.pie-chart&#39;); new chartXkcd.Pie(svgPie, { title: &#39;「みんな」言ってる&#39;, data: { labels:[ &#39;知り合いの誰か&#39;, &#39;全員&#39;, ], datasets: [{ data: [ 990, 10, ], }] }, })&lt;/script&gt;&#xA;&lt;p&gt;日本語も出ますね。日本語入れると凡例の枠がはみ出てしまうので、ソースの調整が要るかもしれません。xkcd 風のフォントも同梱されていますが、日本語ではデフォルトフォントになるでしょう。&lt;/p&gt;&#xA;&lt;p&gt;円グラフ、折れ線グラフ、棒グラフ を描くことができます。&lt;/p&gt;&#xA;&lt;script&gt;const svg = document.querySelector(&#39;.bar-chart&#39;) // github stars vs patrons new chartXkcd.Bar(svg, { title: &#39;ウィンドウズ&#39;, data: { labels:[&#39;1.0&#39;, &#39;2.0&#39;, &#39;3.0&#39;, &#39;3.1&#39;, &#39;95&#39;, &#39;98&#39;, &#39;2000&#39;, &#39;7&#39;, &#39;8&#39;, &#39;8.1&#39;, &#39;10&#39;], datasets: [{ data: [ 1, 2, 3, 3.1, 95 ,95, 2000, 7, 8, 8.1, 10], }] }, });&lt;/script&gt;&#xA;&lt;p&gt;&lt;a href=&#34;https://twitter.com/zzap/status/996905819756212224&#34;&gt;ウィンドウズグラフの元ネタ&lt;/a&gt;&lt;/p&gt;</description>
			</item>
			<item>
				<title>Remember the Fire - ビリージョエルの&#34;We Didn&#39;t Start the Fire&#34;の歴史的事物をグラフ化</title>
				<link>https://labs.cybozu.co.jp/blog/akky/2019/06/remember-the-fire-chart/</link>
				<pubDate>Sun, 23 Jun 2019 00:00:00 +0000</pubDate>
				<guid>https://labs.cybozu.co.jp/blog/akky/2019/06/remember-the-fire-chart/</guid>
				<description>&lt;p&gt;&lt;a href=&#34;https://www.tomlum.com/remember-the-fire&#34;&gt;Remeber The Fire&lt;/a&gt; は、ビリー・ジョエルの1989年のヒット曲 &amp;ldquo;We Didn&amp;rsquo;t Start the Fire&amp;rdquo;(ハートにファイア) の歌詞をグラフにしたものです。&lt;/p&gt;&#xA;&lt;p&gt;歌詞をグラフに? どういうこと? と思われるかもしれませんが、この曲はとても変わった曲で、メイン部分の歌詞はほとんどが歴史的な事件や有名人などの固有名詞の羅列なのです。時代的には、第二次世界大戦後からベルリンの壁崩壊までの冷戦時代、彼が生まれてからそれまでの世界の歴史を彩った事柄を、若干アメリカ中心ではありますが、並べて歌ったものでした。&lt;/p&gt;&#xA;&lt;p&gt;今回のグラフは、それらの事件や人物を「ウィキペディアで検索された回数」という観点でグラフにしています。&lt;/p&gt;&#xA;&lt;p&gt;&lt;a href=&#34;https://www.tomlum.com/remember-the-fire&#34;&gt;&lt;picture&gt;&#xA;  &lt;source type=&#34;image/webp&#34; srcset=&#34;https://labs.cybozu.co.jp/blog/akky/2019/06/remember-the-fire-chart/we-didnt-start-the-fire-wikipedia-chart_hu_fbfeeecc105753ae.webp 480w, https://labs.cybozu.co.jp/blog/akky/2019/06/remember-the-fire-chart/we-didnt-start-the-fire-wikipedia-chart_hu_3a7be32022e9b801.webp 768w, https://labs.cybozu.co.jp/blog/akky/2019/06/remember-the-fire-chart/we-didnt-start-the-fire-wikipedia-chart_hu_b25a8c3783b5cde8.webp 1079w&#34; sizes=&#34;(max-width: 56rem) 100vw, 54rem&#34;&gt;&#xA;  &lt;img src=&#34;https://labs.cybozu.co.jp/blog/akky/2019/06/remember-the-fire-chart/we-didnt-start-the-fire-wikipedia-chart.png&#34; width=&#34;1079&#34; height=&#34;559&#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;2019年1月と2014年1月の二つを同時に表示させると、この5年間で検索回数が増えたキーワード・減ったキーワードを見つけることもできます。&lt;/p&gt;&#xA;&lt;p&gt;それぞれの事件や人物の解説は、&lt;a href=&#34;https://ja.wikipedia.org/wiki/%E3%83%8F%E3%83%BC%E3%83%88%E3%81%AB%E3%83%95%E3%82%A1%E3%82%A4%E3%82%A2&#34;&gt;ハートにファイア - Wikipedia&lt;/a&gt; がやはりわかりやすいでしょう。&lt;/p&gt;&#xA;&lt;div style=&#34;position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;&#34;&gt;&#xA;&#x9;&#x9;&#x9;&lt;iframe allow=&#34;accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share; fullscreen&#34; loading=&#34;eager&#34; referrerpolicy=&#34;strict-origin-when-cross-origin&#34; src=&#34;https://www.youtube.com/embed/a31jZvfvrwM?autoplay=0&amp;amp;controls=1&amp;amp;end=0&amp;amp;loop=0&amp;amp;mute=0&amp;amp;start=0&#34; style=&#34;position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;&#34; title=&#34;YouTube video&#34;&gt;&lt;/iframe&gt;&#xA;&#x9;&#x9;&lt;/div&gt;</description>
			</item>
			<item>
				<title>「個人デイトレーダーの8割は赤字」 取引情報共有サイトのデータを解析した人の話</title>
				<link>https://labs.cybozu.co.jp/blog/akky/2016/08/day-traders-performance-from-real-data/</link>
				<pubDate>Fri, 26 Aug 2016 00:00:00 +0000</pubDate>
				<guid>https://labs.cybozu.co.jp/blog/akky/2016/08/day-traders-performance-from-real-data/</guid>
				<description>&lt;p&gt;eToro というヨーロッパの株取引サービスは、「ソーシャル・トレーディング」サービスです。ユーザーが取引情報を公開・共有できるようになっていて、さらに他のユーザーの取引を「コピーする」ことができるそうです。うまい成績を上げている人の取引をコピーすることで自分も儲けられる(かもしれない)、というのがウリなんでしょうね。&lt;/p&gt;&#xA;&lt;p&gt;多くのユーザーの取引の結果が公開されていることから、ブログCuriousGnuの中の人は、「では平均的なユーザーはデイトレードで儲かっているんだろうか?」と思い、&lt;a href=&#34;http://www.curiousgnu.com/day-trading&#34;&gt;データを集めてその平均を調べました&lt;/a&gt;。eToroでデータを公開していたユーザーは83300人。それをヒストグラムにしたものが以下です。&lt;/p&gt;&#xA;&lt;p&gt;&lt;a href=&#34;http://www.curiousgnu.com/day-trading&#34;&gt;&lt;picture&gt;&#xA;  &lt;source type=&#34;image/webp&#34; srcset=&#34;https://labs.cybozu.co.jp/blog/akky/2016/08/day-traders-performance-from-real-data/etoro-shared-trading-average-histogram_hu_47be64620b3bb71d.webp 480w, https://labs.cybozu.co.jp/blog/akky/2016/08/day-traders-performance-from-real-data/etoro-shared-trading-average-histogram_hu_ee58f172f3da8372.webp 768w, https://labs.cybozu.co.jp/blog/akky/2016/08/day-traders-performance-from-real-data/etoro-shared-trading-average-histogram_hu_e5c75954344a3dab.webp 1600w&#34; sizes=&#34;(max-width: 56rem) 100vw, 54rem&#34;&gt;&#xA;  &lt;img src=&#34;https://labs.cybozu.co.jp/blog/akky/2016/08/day-traders-performance-from-real-data/etoro-shared-trading-average-histogram.png&#34; width=&#34;1600&#34; height=&#34;786&#34; alt=&#34;etoro-shared-trading-average-histogram&#34; loading=&#34;lazy&#34; decoding=&#34;async&#34;&gt;&#xA;&lt;/picture&gt;&lt;/a&gt;&lt;/p&gt;&#xA;&lt;p&gt;横軸の0のところがプラスマイナス0、トントンですね。この時のデータでは、79.5%のユーザーがマイナスとなり、中央値の人で36.3%のお金を失っていたということです。&lt;/p&gt;&#xA;&lt;p&gt;これでデイトレードのリスクが高い、と言うにはいろいろと突っ込みどころもあります。たとえば以下のようなもの。&lt;/p&gt;&#xA;&lt;ul&gt;&#xA;&lt;li&gt;eToroのユーザー (デイトレードの下手なユーザーが集まるサイトだったかも)&lt;/li&gt;&#xA;&lt;li&gt;自分の取引を公開共有するようなユーザー (上手いユーザーは共有しないのかも)&lt;/li&gt;&#xA;&lt;li&gt;ある過去12か月間のデータ (たまたまデイトレードの人に不利な環境の続いた12か月だったかも)&lt;/li&gt;&#xA;&lt;li&gt;3回以上取引した人をデイトレーダーとしている (デイトレーダーの定義に必ずしもあわない)&lt;/li&gt;&#xA;&lt;/ul&gt;&#xA;&lt;p&gt;株の売買をどんどんやってほしいサービス側はこんなデータを出さないでしょうから、見える範囲のデータでできることを調べるとすればこれぐらいが限度なのかもしれません。&lt;/p&gt;&#xA;&lt;p&gt;via Hacker News&lt;/p&gt;</description>
			</item>
			<item>
				<title>スターウォーズ全作の人物とシーンを追えるインタラクティブ・タイムライン</title>
				<link>https://labs.cybozu.co.jp/blog/akky/2015/12/star-wars-interactive-timeline-chart/</link>
				<pubDate>Thu, 17 Dec 2015 00:00:00 +0000</pubDate>
				<guid>https://labs.cybozu.co.jp/blog/akky/2015/12/star-wars-interactive-timeline-chart/</guid>
				<description>&lt;p&gt;スターウォーズの新作公開に近づいてネット上でも関連ニュースがたくさんでてきていますね。&lt;/p&gt;&#xA;&lt;p&gt;そんな中でオーストラリアの公共放送局ABCのサイトが公開したのは、&lt;a href=&#34;http://www.abc.net.au/news/2015-12-16/star-wars-every-scene/7013826&#34;&gt;スターウォーズ過去6作のキャラクター間の接点を時系列で表したインタラクティブなチャート&lt;/a&gt;です。&lt;/p&gt;&#xA;&lt;p&gt;エピソード4(一作目)から、オビ・ワンの「人物」のタイムラインを選択してみます。&lt;/p&gt;&#xA;&lt;p&gt;&lt;a href=&#34;https://labs.cybozu.co.jp/blog/akky/2015/12/star-wars-interactive-timeline-chart/star-wars-character-chart-1.png&#34;&gt;&lt;picture&gt;&#xA;  &lt;source type=&#34;image/webp&#34; srcset=&#34;https://labs.cybozu.co.jp/blog/akky/2015/12/star-wars-interactive-timeline-chart/star-wars-character-chart-1_hu_124ea86dd3396698.webp 480w, https://labs.cybozu.co.jp/blog/akky/2015/12/star-wars-interactive-timeline-chart/star-wars-character-chart-1_hu_77e0e4aea283364c.webp 768w, https://labs.cybozu.co.jp/blog/akky/2015/12/star-wars-interactive-timeline-chart/star-wars-character-chart-1_hu_11819e9c746dcd28.webp 977w&#34; sizes=&#34;(max-width: 56rem) 100vw, 54rem&#34;&gt;&#xA;  &lt;img src=&#34;https://labs.cybozu.co.jp/blog/akky/2015/12/star-wars-interactive-timeline-chart/star-wars-character-chart-1.png&#34; width=&#34;977&#34; height=&#34;604&#34; alt=&#34;star-wars-character-chart-1&#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;同じ4から、ダース・ベイダーとオビ・ワンの戦いの「場面」で選択するとこちら。&lt;/p&gt;&#xA;&lt;p&gt;&lt;a href=&#34;https://labs.cybozu.co.jp/blog/akky/2015/12/star-wars-interactive-timeline-chart/star-wars-character-chart-2.png&#34;&gt;&lt;picture&gt;&#xA;  &lt;source type=&#34;image/webp&#34; srcset=&#34;https://labs.cybozu.co.jp/blog/akky/2015/12/star-wars-interactive-timeline-chart/star-wars-character-chart-2_hu_9b829ca3565b6d41.webp 480w, https://labs.cybozu.co.jp/blog/akky/2015/12/star-wars-interactive-timeline-chart/star-wars-character-chart-2_hu_6f0bc4cdb848e0c5.webp 768w, https://labs.cybozu.co.jp/blog/akky/2015/12/star-wars-interactive-timeline-chart/star-wars-character-chart-2_hu_6a2d88733c060e9a.webp 967w&#34; sizes=&#34;(max-width: 56rem) 100vw, 54rem&#34;&gt;&#xA;  &lt;img src=&#34;https://labs.cybozu.co.jp/blog/akky/2015/12/star-wars-interactive-timeline-chart/star-wars-character-chart-2.png&#34; width=&#34;967&#34; height=&#34;626&#34; alt=&#34;star-wars-character-chart-2&#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;/p&gt;&#xA;&lt;p&gt;# ということは、途中で色が変わる人もいますね。&lt;/p&gt;&#xA;&lt;p&gt;海外の有名なコミック投稿サイトxkcdで過去に話題となった、&lt;a href=&#34;https://xkcd.com/657/&#34;&gt;スターウォーズを含むいくつかの有名映画の同種のプロットチャート&lt;/a&gt;に触発されて作ったということです。&lt;/p&gt;&#xA;&lt;p&gt;なお、このグラフが難しくてわからない場合のアドバイスは、「フォースを使え」だそうです。&lt;/p&gt;&#xA;&lt;p&gt;&lt;a href=&#34;http://www.abc.net.au/news/2015-12-16/star-wars-every-scene/7013826&#34;&gt;チャートを開く&lt;/a&gt;&lt;/p&gt;</description>
			</item>
	</channel>
</rss>
