https://labs.cybozu.co.jp/blog/akky/tags/svg/ Recent content in Svg 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>