https://labs.cybozu.co.jp/blog/akky/tags/xkcd/ Recent content in Xkcd on akky@サイボウズラボ・ブログ Hugo ja Mon, 19 Aug 2019 00:00:00 +0000 https://labs.cybozu.co.jp/blog/akky/2019/08/handwriting-flavour-xkcd-chart/ Mon, 19 Aug 2019 00:00:00 +0000 https://labs.cybozu.co.jp/blog/akky/2019/08/handwriting-flavour-xkcd-chart/ <p>英語圏でエンジニアに人気の<a href="https://xkcd.com/">線画コミックサイト xkcd</a> には、グラフを使ったジョークネタも頻出します。こんな感じ。</p> <p><a href="https://xkcd.com/688/"><img src="https://imgs.xkcd.com/comics/self_description.png" alt="" loading="lazy" decoding="async"></a></p> <p>xkcd に出てくるようなグラフは、だいたい手書き風のテイストで描かれているのですが、その手書き風グラフを再現できるグラフ描画ライブラリが <a href="https://timqian.com/chart.xkcd/">xkcd.chart</a> です。</p> <script>const svgPie = document.querySelector('.pie-chart'); new chartXkcd.Pie(svgPie, { title: '「みんな」言ってる', data: { labels:[ '知り合いの誰か', '全員', ], datasets: [{ data: [ 990, 10, ], }] }, })</script> <p>日本語も出ますね。日本語入れると凡例の枠がはみ出てしまうので、ソースの調整が要るかもしれません。xkcd 風のフォントも同梱されていますが、日本語ではデフォルトフォントになるでしょう。</p> <p>円グラフ、折れ線グラフ、棒グラフ を描くことができます。</p> <script>const svg = document.querySelector('.bar-chart') // github stars vs patrons new chartXkcd.Bar(svg, { title: 'ウィンドウズ', data: { labels:['1.0', '2.0', '3.0', '3.1', '95', '98', '2000', '7', '8', '8.1', '10'], datasets: [{ data: [ 1, 2, 3, 3.1, 95 ,95, 2000, 7, 8, 8.1, 10], }] }, });</script> <p><a href="https://twitter.com/zzap/status/996905819756212224">ウィンドウズグラフの元ネタ</a></p> https://labs.cybozu.co.jp/blog/akky/2012/09/comic-the-world-is-big/ Fri, 21 Sep 2012 00:00:00 +0000 https://labs.cybozu.co.jp/blog/akky/2012/09/comic-the-world-is-big/ <p>アメリカの人気webショートコミックサイトxkcdの新作<a href="http://xkcd.com/1110/">Click and Drag</a>は、一見なんてことのない、というかオチが着いてないように見えるコミックですが、実際に触ってみると「世界の広さ」を表現してることがわかります。<a href="http://xkcd.com/1110/">リンク先</a>でしかけを見つけてみてください。</p> <p><a href="http://xkcd.com/1110/"><picture> <source type="image/webp" srcset="https://labs.cybozu.co.jp/blog/akky/2012/09/comic-the-world-is-big/xkcd-comic-click-and-drag_hu_be43d81bb8ac4278.webp 480w, https://labs.cybozu.co.jp/blog/akky/2012/09/comic-the-world-is-big/xkcd-comic-click-and-drag_hu_96242f54d4dd6e4b.webp 600w" sizes="(max-width: 56rem) 100vw, 54rem"> <img src="https://labs.cybozu.co.jp/blog/akky/2012/09/comic-the-world-is-big/xkcd-comic-click-and-drag.png" width="600" height="620" alt="" title="xkcd-comic-click-and-drag" loading="lazy" decoding="async"> </picture></a></p> <blockquote> <p>「話に聞いて、世界というのは悲しいところなんだなと思ってた。そして実際そうだった」</p> <p>「話に聞いて、世界というのは素晴らしいところなんだなと思ってた。そして実際そうだった」</p> <p>「ただ、世界がここまで広いものだとは、予期していなかった」</p> </blockquote> <p>コミック大国の日本では、コマの枠から外にはみ出たり、紙の裏側のページとやりとりしたり、といった様々な表現が、ギャグ漫画などでさんざんやられていますが、オンラインの漫画やブラウザを使った漫画で、アプリやブラウザの機能を使った「紙では再現できない」表現というのもこれからいろいろ出てくるのかもしれませんね。(日本のオンライン漫画で既にやってたらすいません)</p> <p>このコミックの世界の全体像を知りたい人は、ネタばれになりますが<a href="http://xkcd-map.rent-a-geek.de/#10/0.7038/0.7031">こういうのを作った人</a>がいます。</p> <p>via <a href="http://thedailywhat.tumblr.com/post/31919631231/click-and-drag-comic-masterpiece-of-the-day">The Daily What</a></p>