From 54a98e15d018b4fc36aa8af4af02c84b8866a8ed Mon Sep 17 00:00:00 2001 From: kazu634 Date: Sat, 13 Jun 2020 12:37:21 +0700 Subject: [PATCH 01/44] =?UTF-8?q?Chart.js=E3=82=92=E5=8F=82=E7=85=A7?= =?UTF-8?q?=E3=81=99=E3=82=8B=E3=82=88=E3=81=86=E3=83=86=E3=83=B3=E3=83=97?= =?UTF-8?q?=E3=83=AC=E3=83=BC=E3=83=88=E3=82=92=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- layouts/partials/labs-header-content.html | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/layouts/partials/labs-header-content.html b/layouts/partials/labs-header-content.html index 76ee603..6a14444 100644 --- a/layouts/partials/labs-header-content.html +++ b/layouts/partials/labs-header-content.html @@ -36,6 +36,10 @@ --> {{ end }} + + {{ if .Params.chart }} + + {{ end }} @@ -53,6 +57,10 @@ {{ end }} + {{ if .Params.chart }} + + {{ end }} + {{template "_internal/opengraph.html" . }} From 7e235643f7e45e6acf5414383b70bf487f182094 Mon Sep 17 00:00:00 2001 From: kazu634 Date: Sat, 13 Jun 2020 12:39:44 +0700 Subject: [PATCH 02/44] =?UTF-8?q?chart.js=E3=82=92=E5=88=A9=E7=94=A8?= =?UTF-8?q?=E3=81=99=E3=82=8B=E3=81=9F=E3=82=81=E3=81=AEshortcode=E3=82=92?= =?UTF-8?q?=E4=BD=9C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- layouts/shortcodes/chartjs.html | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 layouts/shortcodes/chartjs.html diff --git a/layouts/shortcodes/chartjs.html b/layouts/shortcodes/chartjs.html new file mode 100644 index 0000000..66e3bc4 --- /dev/null +++ b/layouts/shortcodes/chartjs.html @@ -0,0 +1,4 @@ + + From b5926d69cd9daf37630d2ab673bd9602bb3da458 Mon Sep 17 00:00:00 2001 From: kazu634 Date: Sat, 13 Jun 2020 12:46:14 +0700 Subject: [PATCH 03/44] =?UTF-8?q?=E3=83=80=E3=83=9F=E3=83=BC=E8=A8=98?= =?UTF-8?q?=E4=BA=8B=E3=82=92=E4=BD=9C=E6=88=90=E3=81=97=E3=80=81Chart.js?= =?UTF-8?q?=E3=81=8C=E8=AA=AD=E3=81=BF=E8=BE=BC=E3=81=BE=E3=82=8C=E3=81=A6?= =?UTF-8?q?=E3=81=84=E3=82=8B=E3=81=8B=E3=82=92=E7=A2=BA=E8=AA=8D=E3=81=99?= =?UTF-8?q?=E3=82=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../2020-06-13-different-types-of-graphs.md | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 content/labs/visualization/2020-06-13-different-types-of-graphs.md diff --git a/content/labs/visualization/2020-06-13-different-types-of-graphs.md b/content/labs/visualization/2020-06-13-different-types-of-graphs.md new file mode 100644 index 0000000..1720eb1 --- /dev/null +++ b/content/labs/visualization/2020-06-13-different-types-of-graphs.md @@ -0,0 +1,9 @@ ++++ +title="色々あるグラフをどのように使い分けるか、まとめてみます" +date=2020-06-13 +Description="グラフをどのように使い分けるか、『グラフを作る前に読む本』にまとめられていたのでメモします" +images = [""] +chart=true ++++ + +テスト。 \ No newline at end of file From 5562c19ef5f35979129970c9533b609b45188833 Mon Sep 17 00:00:00 2001 From: kazu634 Date: Sat, 13 Jun 2020 12:53:49 +0700 Subject: [PATCH 04/44] =?UTF-8?q?shortcode=E3=81=AE=E5=90=8D=E5=89=8D?= =?UTF-8?q?=E3=82=92=E5=A4=89=E6=9B=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- layouts/shortcodes/{chartjs.html => chart.html} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename layouts/shortcodes/{chartjs.html => chart.html} (100%) diff --git a/layouts/shortcodes/chartjs.html b/layouts/shortcodes/chart.html similarity index 100% rename from layouts/shortcodes/chartjs.html rename to layouts/shortcodes/chart.html From e5a413f5cdda8ea4921c9e0350d878c345030227 Mon Sep 17 00:00:00 2001 From: kazu634 Date: Sat, 13 Jun 2020 12:56:33 +0700 Subject: [PATCH 05/44] =?UTF-8?q?Chart=E4=BD=9C=E6=88=90=E3=81=AE=E3=82=B5?= =?UTF-8?q?=E3=83=B3=E3=83=97=E3=83=AB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../2020-06-13-different-types-of-graphs.md | 42 ++++++++++++++++++- 1 file changed, 41 insertions(+), 1 deletion(-) diff --git a/content/labs/visualization/2020-06-13-different-types-of-graphs.md b/content/labs/visualization/2020-06-13-different-types-of-graphs.md index 1720eb1..fea37d7 100644 --- a/content/labs/visualization/2020-06-13-different-types-of-graphs.md +++ b/content/labs/visualization/2020-06-13-different-types-of-graphs.md @@ -6,4 +6,44 @@ images = [""] chart=true +++ -テスト。 \ No newline at end of file +テスト。 + +{{}} +var ctx = document.getElementById('myChart'); +var myChart = new Chart(ctx, { + type: 'bar', + data: { + labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], + datasets: [{ + label: '# of Votes', + data: [12, 19, 3, 5, 2, 3], + backgroundColor: [ + 'rgba(255, 99, 132, 0.2)', + 'rgba(54, 162, 235, 0.2)', + 'rgba(255, 206, 86, 0.2)', + 'rgba(75, 192, 192, 0.2)', + 'rgba(153, 102, 255, 0.2)', + 'rgba(255, 159, 64, 0.2)' + ], + borderColor: [ + 'rgba(255, 99, 132, 1)', + 'rgba(54, 162, 235, 1)', + 'rgba(255, 206, 86, 1)', + 'rgba(75, 192, 192, 1)', + 'rgba(153, 102, 255, 1)', + 'rgba(255, 159, 64, 1)' + ], + borderWidth: 1 + }] + }, + options: { + scales: { + yAxes: [{ + ticks: { + beginAtZero: true + } + }] + } + } +}); +{{< /chart >}} From 99211ea640835e6c0bbe6ec5cbc44eb1fd87020b Mon Sep 17 00:00:00 2001 From: kazu634 Date: Sat, 13 Jun 2020 13:01:34 +0700 Subject: [PATCH 06/44] =?UTF-8?q?raw=20HTML=E3=82=92shortcode=E3=81=8C?= =?UTF-8?q?=E6=89=B1=E3=81=88=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB=E4=BF=AE?= =?UTF-8?q?=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- layouts/shortcodes/chart.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/layouts/shortcodes/chart.html b/layouts/shortcodes/chart.html index 66e3bc4..a118233 100644 --- a/layouts/shortcodes/chart.html +++ b/layouts/shortcodes/chart.html @@ -1,4 +1,4 @@ From 48dee87fea6ef39b9f50d3632fd53d38dc44b725 Mon Sep 17 00:00:00 2001 From: kazu634 Date: Sat, 13 Jun 2020 13:14:06 +0700 Subject: [PATCH 07/44] =?UTF-8?q?shortcode=E3=81=8C=E5=AE=89=E5=85=A8?= =?UTF-8?q?=E3=81=AAJavascript=E3=81=A8=E5=88=A4=E6=96=AD=E3=81=99?= =?UTF-8?q?=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- layouts/shortcodes/chart.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/layouts/shortcodes/chart.html b/layouts/shortcodes/chart.html index a118233..e317f2b 100644 --- a/layouts/shortcodes/chart.html +++ b/layouts/shortcodes/chart.html @@ -1,4 +1,4 @@ From c3a8fcad0bb00c02c3dd384f3328ebe422fa6830 Mon Sep 17 00:00:00 2001 From: kazu634 Date: Sat, 13 Jun 2020 13:17:22 +0700 Subject: [PATCH 08/44] =?UTF-8?q?Chart.js=E3=81=AE=E5=85=AC=E5=BC=8F?= =?UTF-8?q?=E3=83=81=E3=83=A5=E3=83=BC=E3=83=88=E3=83=AA=E3=82=A2=E3=83=AB?= =?UTF-8?q?=E3=81=AB=E5=BE=93=E3=81=84Canvas=20ID=E3=82=92=E4=BF=AE?= =?UTF-8?q?=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- layouts/shortcodes/chart.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/layouts/shortcodes/chart.html b/layouts/shortcodes/chart.html index e317f2b..c54171d 100644 --- a/layouts/shortcodes/chart.html +++ b/layouts/shortcodes/chart.html @@ -1,4 +1,4 @@ - + From f581eb137ec291e1f2e5864b76045bd96079a335 Mon Sep 17 00:00:00 2001 From: kazu634 Date: Sat, 13 Jun 2020 13:25:58 +0700 Subject: [PATCH 09/44] =?UTF-8?q?=E6=A3=92=E3=82=B0=E3=83=A9=E3=83=95?= =?UTF-8?q?=E3=81=AB=E3=81=A4=E3=81=84=E3=81=A6=E3=81=AE=E8=AA=AC=E6=98=8E?= =?UTF-8?q?=E3=82=92=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../2020-06-13-different-types-of-graphs.md | 21 +++++++++++++++---- 1 file changed, 17 insertions(+), 4 deletions(-) diff --git a/content/labs/visualization/2020-06-13-different-types-of-graphs.md b/content/labs/visualization/2020-06-13-different-types-of-graphs.md index fea37d7..ff7ebfd 100644 --- a/content/labs/visualization/2020-06-13-different-types-of-graphs.md +++ b/content/labs/visualization/2020-06-13-different-types-of-graphs.md @@ -6,11 +6,24 @@ images = [""] chart=true +++ -テスト。 +『グラフを作る前に読む本』に、グラフをどのようにようにように使い分けるかについてまとめられていたのでメモします。 -{{}} -var ctx = document.getElementById('myChart'); -var myChart = new Chart(ctx, { +## まとめるとこんな感じ +Untitled + +## 各グラフの使いどころ + +### 棒グラフ +棒グラフの特徴として、以下のようにまとめられていました: + +> 棒グラフでは、複数並んだ棒の高さを比べて「棒が大きい(小さい)項目はどれだろう？」と考えます。つまり棒グラフが一番得意な表現方法はデータの「比較」です。棒グラフを使えば、比べたいデータを最も分かりやすクズで表現できます。 +> +> 「高さ」を比べて項目の量の違いを感覚的につかめるのが棒グラフの特徴です。 + + +{{}} + var ctx = document.getElementById('myChart'); + var myChart = new Chart(ctx, { type: 'bar', data: { labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], From a913ee6c01ede5225d6f3a32bb191c26a2e7140d Mon Sep 17 00:00:00 2001 From: kazu634 Date: Sat, 13 Jun 2020 13:31:47 +0700 Subject: [PATCH 10/44] =?UTF-8?q?=E6=A3=92=E3=82=B0=E3=83=A9=E3=83=95?= =?UTF-8?q?=E3=81=AB=E3=81=A4=E3=81=84=E3=81=A6=E3=81=AE=E5=86=85=E5=AE=B9?= =?UTF-8?q?=E3=82=92=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../2020-06-13-different-types-of-graphs.md | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/content/labs/visualization/2020-06-13-different-types-of-graphs.md b/content/labs/visualization/2020-06-13-different-types-of-graphs.md index ff7ebfd..0e3905a 100644 --- a/content/labs/visualization/2020-06-13-different-types-of-graphs.md +++ b/content/labs/visualization/2020-06-13-different-types-of-graphs.md @@ -9,6 +9,8 @@ chart=true 『グラフを作る前に読む本』に、グラフをどのようにようにように使い分けるかについてまとめられていたのでメモします。 ## まとめるとこんな感じ +書いてあることをまとめると、以下のようになるようです: + Untitled ## 各グラフの使いどころ @@ -21,8 +23,8 @@ chart=true > 「高さ」を比べて項目の量の違いを感覚的につかめるのが棒グラフの特徴です。 -{{}} - var ctx = document.getElementById('myChart'); +{{}} + var ctx = document.getElementById('box'); var myChart = new Chart(ctx, { type: 'bar', data: { @@ -60,3 +62,9 @@ chart=true } }); {{< /chart >}} + + +項目の並び順に気をつけると、もっとわかりやすくなるそうです: + +> 棒グラフの一番得意な表現方法は「比較」だと述べました。しかし、単純に「比較」するといっても、どのようにデータ項目を並べるかで伝わり方は大きく変わります。棒グラフを作成する秘訣は、何を「比較」するためにデータ項目を並べるか、その順番にあると言っても、過言ではありません。 + From a3252c72f6e347f0b033d4fe4567b28194c4c4c9 Mon Sep 17 00:00:00 2001 From: kazu634 Date: Sat, 13 Jun 2020 13:45:05 +0700 Subject: [PATCH 11/44] =?UTF-8?q?=E6=8A=98=E3=82=8C=E7=B7=9A=E3=82=B0?= =?UTF-8?q?=E3=83=A9=E3=83=95=E3=81=AE=E8=A8=98=E4=BA=8B=E3=82=92=E8=BF=BD?= =?UTF-8?q?=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../2020-06-13-different-types-of-graphs.md | 50 ++++++++++++++++++- 1 file changed, 49 insertions(+), 1 deletion(-) diff --git a/content/labs/visualization/2020-06-13-different-types-of-graphs.md b/content/labs/visualization/2020-06-13-different-types-of-graphs.md index 0e3905a..236596b 100644 --- a/content/labs/visualization/2020-06-13-different-types-of-graphs.md +++ b/content/labs/visualization/2020-06-13-different-types-of-graphs.md @@ -22,7 +22,6 @@ chart=true > > 「高さ」を比べて項目の量の違いを感覚的につかめるのが棒グラフの特徴です。 - {{}} var ctx = document.getElementById('box'); var myChart = new Chart(ctx, { @@ -68,3 +67,52 @@ chart=true > 棒グラフの一番得意な表現方法は「比較」だと述べました。しかし、単純に「比較」するといっても、どのようにデータ項目を並べるかで伝わり方は大きく変わります。棒グラフを作成する秘訣は、何を「比較」するためにデータ項目を並べるか、その順番にあると言っても、過言ではありません。 +### 折れ線グラフ +折れ線グラフの特徴に以下のようにまとめられていました: + +> 折れ線グラフは必ずデータ項目の複数の時点を描きます。点を一つだけ描く折れ線グラフを目にする機会はないでしょう。 +> +> 折れ線グラフでは、ある時点とある時点を左から右に線で結んで「線の傾きが大きい(小さい)時点はどれだろう？」、「傾きの傾向が変化するのはどの時点だろう？」と考えます。つまり折れ線グラフが一番得意な表現方法はデータの「推移」です。折れ線グラフを使えば、データの変化を最もわかりやすく図で表現できます。 +> +> ある時点とある時点の間の「傾き」から変化を感覚的につかめるのが折れ線グラフの特徴です。 + +{{}} + var ctx = document.getElementById('line-chart'); + var myChart = new Chart(ctx, { + type: 'line', + data: { + labels: ['2015', '2016', '2017', '2018', '2019', '2020'], + datasets: [{ + label: '# of Votes', + data: [12, 19, 3, 5, 2, 3], + backgroundColor: [ + 'rgba(255, 99, 132, 0.2)', + 'rgba(54, 162, 235, 0.2)', + 'rgba(255, 206, 86, 0.2)', + 'rgba(75, 192, 192, 0.2)', + 'rgba(153, 102, 255, 0.2)', + 'rgba(255, 159, 64, 0.2)' + ], + borderColor: [ + 'rgba(255, 99, 132, 1)', + 'rgba(54, 162, 235, 1)', + 'rgba(255, 206, 86, 1)', + 'rgba(75, 192, 192, 1)', + 'rgba(153, 102, 255, 1)', + 'rgba(255, 159, 64, 1)' + ], + borderWidth: 1 + }] + }, + options: { + scales: { + yAxes: [{ + ticks: { + beginAtZero: true + } + }] + } + } +}); +{{< /chart >}} + From 229cba9a66711d6da11f5bbd905f110203f387d2 Mon Sep 17 00:00:00 2001 From: kazu634 Date: Sat, 13 Jun 2020 13:49:35 +0700 Subject: [PATCH 12/44] =?UTF-8?q?=E9=9D=A2=E3=82=B0=E3=83=A9=E3=83=95?= =?UTF-8?q?=E3=81=AB=E3=81=AA=E3=82=8B=E3=81=AE=E3=81=A7=E3=80=81=E6=8A=98?= =?UTF-8?q?=E3=82=8C=E7=B7=9A=E3=82=B0=E3=83=A9=E3=83=95=E3=81=AB=E3=81=AA?= =?UTF-8?q?=E3=82=8B=E3=82=88=E3=81=86=E3=82=AA=E3=83=97=E3=82=B7=E3=83=A7?= =?UTF-8?q?=E3=83=B3=E3=82=92=E8=A9=A6=E3=81=97=E3=81=AB=E5=A4=89=E3=81=88?= =?UTF-8?q?=E3=81=A6=E3=81=BF=E3=82=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../visualization/2020-06-13-different-types-of-graphs.md | 8 -------- 1 file changed, 8 deletions(-) diff --git a/content/labs/visualization/2020-06-13-different-types-of-graphs.md b/content/labs/visualization/2020-06-13-different-types-of-graphs.md index 236596b..4130747 100644 --- a/content/labs/visualization/2020-06-13-different-types-of-graphs.md +++ b/content/labs/visualization/2020-06-13-different-types-of-graphs.md @@ -85,14 +85,6 @@ chart=true datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], - backgroundColor: [ - 'rgba(255, 99, 132, 0.2)', - 'rgba(54, 162, 235, 0.2)', - 'rgba(255, 206, 86, 0.2)', - 'rgba(75, 192, 192, 0.2)', - 'rgba(153, 102, 255, 0.2)', - 'rgba(255, 159, 64, 0.2)' - ], borderColor: [ 'rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', From c5f3c2cf2cfc59400633d2f1d2e9565d05e732f6 Mon Sep 17 00:00:00 2001 From: kazu634 Date: Sat, 13 Jun 2020 13:56:43 +0700 Subject: [PATCH 13/44] =?UTF-8?q?=E8=83=8C=E6=99=AF=E8=89=B2=E3=82=92?= =?UTF-8?q?=E9=80=8F=E6=98=8E=E3=81=AB=E3=81=97=E3=81=9F=E3=81=AE=E3=81=A7?= =?UTF-8?q?=E3=80=81=E3=81=93=E3=82=8C=E3=81=A7=E6=8A=98=E3=82=8C=E7=B7=9A?= =?UTF-8?q?=E3=82=B0=E3=83=A9=E3=83=95=E3=81=AB=E3=81=AA=E3=82=8B=E3=81=AF?= =?UTF-8?q?=E3=81=9A=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../visualization/2020-06-13-different-types-of-graphs.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/content/labs/visualization/2020-06-13-different-types-of-graphs.md b/content/labs/visualization/2020-06-13-different-types-of-graphs.md index 4130747..0d422c5 100644 --- a/content/labs/visualization/2020-06-13-different-types-of-graphs.md +++ b/content/labs/visualization/2020-06-13-different-types-of-graphs.md @@ -85,6 +85,14 @@ chart=true datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], + backgroundColor: [ + 'rgba(0,0,0,0)', + 'rgba(0,0,0,0)', + 'rgba(0,0,0,0)', + 'rgba(0,0,0,0)', + 'rgba(0,0,0,0)', + 'rgba(0,0,0,0)' + }, borderColor: [ 'rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', From 17505a6b59dbb13dee07f1ced918e44d62ed02e1 Mon Sep 17 00:00:00 2001 From: kazu634 Date: Sun, 14 Jun 2020 11:20:03 +0700 Subject: [PATCH 14/44] Fixed Typo --- .../labs/visualization/2020-06-13-different-types-of-graphs.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/labs/visualization/2020-06-13-different-types-of-graphs.md b/content/labs/visualization/2020-06-13-different-types-of-graphs.md index 0d422c5..039ce0a 100644 --- a/content/labs/visualization/2020-06-13-different-types-of-graphs.md +++ b/content/labs/visualization/2020-06-13-different-types-of-graphs.md @@ -92,7 +92,7 @@ chart=true 'rgba(0,0,0,0)', 'rgba(0,0,0,0)', 'rgba(0,0,0,0)' - }, + ], borderColor: [ 'rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', From 78976bd3fcad1c23665913af8baf1ae8254b0723 Mon Sep 17 00:00:00 2001 From: kazu634 Date: Sun, 14 Jun 2020 11:25:31 +0700 Subject: [PATCH 15/44] =?UTF-8?q?=E6=8A=98=E3=82=8C=E7=B7=9A=E3=82=B0?= =?UTF-8?q?=E3=83=A9=E3=83=95=E3=81=AE=E8=A8=98=E4=BA=8B=E3=81=AB=E8=AA=AC?= =?UTF-8?q?=E6=98=8E=E3=82=92=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../visualization/2020-06-13-different-types-of-graphs.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/content/labs/visualization/2020-06-13-different-types-of-graphs.md b/content/labs/visualization/2020-06-13-different-types-of-graphs.md index 039ce0a..2902fa8 100644 --- a/content/labs/visualization/2020-06-13-different-types-of-graphs.md +++ b/content/labs/visualization/2020-06-13-different-types-of-graphs.md @@ -116,3 +116,7 @@ chart=true }); {{< /chart >}} +折れ線グラフについては、数の変化に意味を持たせられると、意図が明確になるそうです: + +> 折れ線グラフは推移の「傾向」に意味を持たせれば、何が言いたいのかがより伝わります。「傾向」とは、向かっていく方向という意味を持っています。 + From 9f47b5b1518f3b6b2e50845dcb540dd77ebfd6f9 Mon Sep 17 00:00:00 2001 From: kazu634 Date: Sun, 14 Jun 2020 11:29:36 +0700 Subject: [PATCH 16/44] =?UTF-8?q?=E5=89=B2=E5=90=88=E3=82=92=E7=A4=BA?= =?UTF-8?q?=E3=81=99=E3=83=87=E3=83=BC=E3=82=BF=E3=81=AE=E6=8E=A8=E7=A7=BB?= =?UTF-8?q?=E3=82=92=E6=8A=98=E3=82=8C=E7=B7=9A=E3=82=B0=E3=83=A9=E3=83=95?= =?UTF-8?q?=E3=81=A7=E7=A4=BA=E3=81=99=E5=A0=B4=E5=90=88=E3=81=AE=E6=B3=A8?= =?UTF-8?q?=E6=84=8F=E4=BA=8B=E9=A0=85=E3=82=92=E8=BF=BD=E8=A8=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../visualization/2020-06-13-different-types-of-graphs.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/content/labs/visualization/2020-06-13-different-types-of-graphs.md b/content/labs/visualization/2020-06-13-different-types-of-graphs.md index 2902fa8..30adb91 100644 --- a/content/labs/visualization/2020-06-13-different-types-of-graphs.md +++ b/content/labs/visualization/2020-06-13-different-types-of-graphs.md @@ -120,3 +120,8 @@ chart=true > 折れ線グラフは推移の「傾向」に意味を持たせれば、何が言いたいのかがより伝わります。「傾向」とは、向かっていく方向という意味を持っています。 +#### 割合を示すデータの推移を折れ線グラフで示すときは注意 +割合を示すデータの推移を折れ線グラフで示すときは、総数が減っている可能性があるため、読み取る際に注意する必要がある: + +> 割合で表示されるデータの推移が高まっても、総数が減っているなら、実数で表現されたデータは実質横ばいか減少している可能性があります。「若者の○○離れ」と呼ばれる現象は、この錯覚で大体説明ができると私は思っています。若者の総数が減っているのですから、アルコール好きも旅行好きも車好きも時系列の推移で見れば減るのは当然です。 + From 9dddf62a5910e5281e1cb0686ca4d9825aaa8d65 Mon Sep 17 00:00:00 2001 From: kazu634 Date: Sun, 14 Jun 2020 11:35:55 +0700 Subject: [PATCH 17/44] =?UTF-8?q?=E5=86=86=E3=82=B0=E3=83=A9=E3=83=95?= =?UTF-8?q?=E3=81=AE=E8=AA=AC=E6=98=8E=E3=82=92=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../visualization/2020-06-13-different-types-of-graphs.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/content/labs/visualization/2020-06-13-different-types-of-graphs.md b/content/labs/visualization/2020-06-13-different-types-of-graphs.md index 30adb91..6614cce 100644 --- a/content/labs/visualization/2020-06-13-different-types-of-graphs.md +++ b/content/labs/visualization/2020-06-13-different-types-of-graphs.md @@ -125,3 +125,10 @@ chart=true > 割合で表示されるデータの推移が高まっても、総数が減っているなら、実数で表現されたデータは実質横ばいか減少している可能性があります。「若者の○○離れ」と呼ばれる現象は、この錯覚で大体説明ができると私は思っています。若者の総数が減っているのですから、アルコール好きも旅行好きも車好きも時系列の推移で見れば減るのは当然です。 +### 円グラフ +円グラフの特徴に以下のようにまとめられていました: + +> 円グラフは縁の中心から12時方向に引いた線を起点にして、項目の打ち分けごとに角度に置き換えて面を作り、「角度が大きい(小さい)項目はどれだろう？」「全体に対して占める割合が大きい(小さい)項目はどれだろう？」と考えます。つまり、円グラフが一番得意な表現方法は、データ全体の「内訳」です。 + +円の「角度」から内訳を感覚的につかめるのが、円グラフの特徴とのこと。 + From 9ac9b6298fb3ce94fd666c4b37a4d62f9a1c7d0e Mon Sep 17 00:00:00 2001 From: kazu634 Date: Sun, 14 Jun 2020 11:39:58 +0700 Subject: [PATCH 18/44] =?UTF-8?q?=E5=86=86=E3=82=B0=E3=83=A9=E3=83=95?= =?UTF-8?q?=E3=82=92=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../2020-06-13-different-types-of-graphs.md | 25 +++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/content/labs/visualization/2020-06-13-different-types-of-graphs.md b/content/labs/visualization/2020-06-13-different-types-of-graphs.md index 6614cce..6fdb1f8 100644 --- a/content/labs/visualization/2020-06-13-different-types-of-graphs.md +++ b/content/labs/visualization/2020-06-13-different-types-of-graphs.md @@ -132,3 +132,28 @@ chart=true 円の「角度」から内訳を感覚的につかめるのが、円グラフの特徴とのこと。 +{{}} + var ctx = document.getElementById("pie-chart"); + var myPieChart = new Chart(ctx, { + type: 'pie', + data: { + labels: ["A", "O", "B", "AB"], + datasets: [{ + backgroundColor: [ + "#BB5179", + "#FAFF67", + "#58A27C", + "#3C00FF" + ], + data: [38, 31, 21, 10] + }] + }, + options: { + title: { + display: true, + text: 'Blood Type Ratio' + } + } +}); +{{< /chart >}} + From bee481fff9e7a9c43612d24054542e44781a41eb Mon Sep 17 00:00:00 2001 From: kazu634 Date: Sun, 14 Jun 2020 11:44:51 +0700 Subject: [PATCH 19/44] =?UTF-8?q?=E3=82=B0=E3=83=A9=E3=83=95=E3=81=AE?= =?UTF-8?q?=E8=AA=AD=E3=81=BF=E6=96=B9=E3=81=AE=E8=AA=AC=E6=98=8E=E3=82=92?= =?UTF-8?q?=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../visualization/2020-06-13-different-types-of-graphs.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/content/labs/visualization/2020-06-13-different-types-of-graphs.md b/content/labs/visualization/2020-06-13-different-types-of-graphs.md index 6fdb1f8..3d58392 100644 --- a/content/labs/visualization/2020-06-13-different-types-of-graphs.md +++ b/content/labs/visualization/2020-06-13-different-types-of-graphs.md @@ -130,7 +130,7 @@ chart=true > 円グラフは縁の中心から12時方向に引いた線を起点にして、項目の打ち分けごとに角度に置き換えて面を作り、「角度が大きい(小さい)項目はどれだろう？」「全体に対して占める割合が大きい(小さい)項目はどれだろう？」と考えます。つまり、円グラフが一番得意な表現方法は、データ全体の「内訳」です。 -円の「角度」から内訳を感覚的につかめるのが、円グラフの特徴とのこと。 +円の「角度」から内訳を感覚的につかめるのが、円グラフの特徴とのこと。下のグラフを見れば、A型とO型が大きな割合を占めていることがわかります: {{}} var ctx = document.getElementById("pie-chart"); @@ -157,3 +157,6 @@ chart=true }); {{< /chart >}} + + + From dc587fbf02528906559bfbba9e5d78ee0cf2abf6 Mon Sep 17 00:00:00 2001 From: kazu634 Date: Sun, 14 Jun 2020 11:47:14 +0700 Subject: [PATCH 20/44] =?UTF-8?q?=E5=86=86=E3=82=B0=E3=83=A9=E3=83=95?= =?UTF-8?q?=E3=81=AE=E5=88=A9=E7=94=A8=E3=81=8C=E6=8E=A8=E5=A5=A8=E3=81=95?= =?UTF-8?q?=E3=82=8C=E3=81=AA=E3=81=84=E7=90=86=E7=94=B1=E3=82=92=E8=BF=BD?= =?UTF-8?q?=E8=A8=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../visualization/2020-06-13-different-types-of-graphs.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/content/labs/visualization/2020-06-13-different-types-of-graphs.md b/content/labs/visualization/2020-06-13-different-types-of-graphs.md index 3d58392..ae62fe3 100644 --- a/content/labs/visualization/2020-06-13-different-types-of-graphs.md +++ b/content/labs/visualization/2020-06-13-different-types-of-graphs.md @@ -157,6 +157,11 @@ chart=true }); {{< /chart >}} +#### 円グラフの利用が推奨されない理由 +以下、2つの理由があるそうです: + +- 総量がわからないので違う円グラフの内訳と比較できない +- 時系列データを用いた時間経過による内訳の推移を表現できない From 9ff8bf6e68e8200de5e22341f2f8922991400c65 Mon Sep 17 00:00:00 2001 From: kazu634 Date: Sun, 14 Jun 2020 12:00:24 +0700 Subject: [PATCH 21/44] =?UTF-8?q?=E3=83=AC=E3=83=BC=E3=83=80=E3=83=BC?= =?UTF-8?q?=E3=83=81=E3=83=A3=E3=83=BC=E3=83=88=E3=81=AE=E8=AA=AC=E6=98=8E?= =?UTF-8?q?=E3=82=92=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../2020-06-13-different-types-of-graphs.md | 46 ++++++++++++++++++- 1 file changed, 45 insertions(+), 1 deletion(-) diff --git a/content/labs/visualization/2020-06-13-different-types-of-graphs.md b/content/labs/visualization/2020-06-13-different-types-of-graphs.md index ae62fe3..89583ab 100644 --- a/content/labs/visualization/2020-06-13-different-types-of-graphs.md +++ b/content/labs/visualization/2020-06-13-different-types-of-graphs.md @@ -131,7 +131,7 @@ chart=true > 円グラフは縁の中心から12時方向に引いた線を起点にして、項目の打ち分けごとに角度に置き換えて面を作り、「角度が大きい(小さい)項目はどれだろう？」「全体に対して占める割合が大きい(小さい)項目はどれだろう？」と考えます。つまり、円グラフが一番得意な表現方法は、データ全体の「内訳」です。 円の「角度」から内訳を感覚的につかめるのが、円グラフの特徴とのこと。下のグラフを見れば、A型とO型が大きな割合を占めていることがわかります: - + {{}} var ctx = document.getElementById("pie-chart"); var myPieChart = new Chart(ctx, { @@ -163,5 +163,49 @@ chart=true - 総量がわからないので違う円グラフの内訳と比較できない - 時系列データを用いた時間経過による内訳の推移を表現できない +### レーダーチャート +レーダーチャートの特徴は以下のようにまとめられていました: +- レーダーチャートが一番得意な表現方法は複数あるデータ項目の「比較」 +- 線で結ばれた面の「大きさ」、「滑らかさ」を比べてデータの代償を感覚的に掴めるのがレーダーチャートの特徴 +- 特定のデータ項目のみに現れた傾向を比較したいのか、データ項目同士を比較したいのか、グラフを作る前に方針を決めておく +{{}} + var ctx = document.getElementById("radar-chart"); + var myPieChart = new Chart(ctx, { + type: 'radar', + data: { + labels: ["English", "Math", "Japanese", "Science", "History"], + datasets: [{ + label: 'Alice', + data: [92, 72, 86, 74, 86], + backgroundColor: 'RGBA(225,95,150, 0.5)', + borderColor: 'RGBA(225,95,150, 1)', + borderWidth: 1, + pointBackgroundColor: 'RGB(46,106,177)' + }, { + label: 'Bob', + data: [73, 95, 80, 87, 79], + backgroundColor: 'RGBA(115,255,25, 0.5)', + borderColor: 'RGBA(115,255,25, 1)', + borderWidth: 1, + pointBackgroundColor: 'RGB(46,106,177)' + }] + }, + options: { + title: { + display: true, + text: 'Test Results' + }, + scale:{ + ticks:{ + suggestedMax: 100, + suggestedMin: 0, + stepSize: 10, + callback: function(value, index, values){ + return value + '点' + } + } + } + }); +{{< /chart >}} From 56466d1b96de7223c62c3d5124edc7b9d8f0d26f Mon Sep 17 00:00:00 2001 From: kazu634 Date: Sun, 14 Jun 2020 12:04:54 +0700 Subject: [PATCH 22/44] =?UTF-8?q?=E3=83=AC=E3=83=BC=E3=83=80=E3=83=BC?= =?UTF-8?q?=E3=83=81=E3=83=A3=E3=83=BC=E3=83=88=E3=81=AEJavascript?= =?UTF-8?q?=E9=83=A8=E5=88=86=E3=81=AE=E3=83=8D=E3=82=B9=E3=83=88=E3=81=8C?= =?UTF-8?q?=E8=AA=A4=E3=81=A3=E3=81=A6=E3=81=84=E3=81=9F=E3=81=AE=E3=81=A7?= =?UTF-8?q?=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../2020-06-13-different-types-of-graphs.md | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/content/labs/visualization/2020-06-13-different-types-of-graphs.md b/content/labs/visualization/2020-06-13-different-types-of-graphs.md index 89583ab..dff961b 100644 --- a/content/labs/visualization/2020-06-13-different-types-of-graphs.md +++ b/content/labs/visualization/2020-06-13-different-types-of-graphs.md @@ -167,7 +167,7 @@ chart=true レーダーチャートの特徴は以下のようにまとめられていました: - レーダーチャートが一番得意な表現方法は複数あるデータ項目の「比較」 -- 線で結ばれた面の「大きさ」、「滑らかさ」を比べてデータの代償を感覚的に掴めるのがレーダーチャートの特徴 +- 線で結ばれた面の「大きさ」、「滑らかさ」を比べてデータの大小を感覚的に掴めるのがレーダーチャートの特徴 - 特定のデータ項目のみに現れた傾向を比較したいのか、データ項目同士を比較したいのか、グラフを作る前に方針を決めておく {{}} @@ -199,11 +199,12 @@ chart=true }, scale:{ ticks:{ - suggestedMax: 100, - suggestedMin: 0, - stepSize: 10, - callback: function(value, index, values){ - return value + '点' + suggestedMax: 100, + suggestedMin: 0, + stepSize: 10, + callback: function(value, index, values){ + return value + 'points' + } } } } From f80e3662882c272f1333639a28eeeae76512e91f Mon Sep 17 00:00:00 2001 From: kazu634 Date: Sun, 14 Jun 2020 12:09:33 +0700 Subject: [PATCH 23/44] =?UTF-8?q?=E7=82=B9=E6=95=B0=E3=81=AE=E8=A1=A8?= =?UTF-8?q?=E7=A4=BA=E6=96=B9=E6=B3=95=E3=82=92=E5=A4=89=E6=9B=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../labs/visualization/2020-06-13-different-types-of-graphs.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/labs/visualization/2020-06-13-different-types-of-graphs.md b/content/labs/visualization/2020-06-13-different-types-of-graphs.md index dff961b..f0215fd 100644 --- a/content/labs/visualization/2020-06-13-different-types-of-graphs.md +++ b/content/labs/visualization/2020-06-13-different-types-of-graphs.md @@ -203,7 +203,7 @@ chart=true suggestedMin: 0, stepSize: 10, callback: function(value, index, values){ - return value + 'points' + return value } } } From 6ba50b9731c8c7a379189dfb08148294bde23279 Mon Sep 17 00:00:00 2001 From: kazu634 Date: Sun, 14 Jun 2020 12:21:49 +0700 Subject: [PATCH 24/44] =?UTF-8?q?=E3=83=92=E3=83=BC=E3=83=88=E3=83=9E?= =?UTF-8?q?=E3=83=83=E3=83=97=E3=81=AB=E3=81=A4=E3=81=84=E3=81=A6=E3=81=AE?= =?UTF-8?q?=E8=AA=AC=E6=98=8E=E3=82=92=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../visualization/2020-06-13-different-types-of-graphs.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/content/labs/visualization/2020-06-13-different-types-of-graphs.md b/content/labs/visualization/2020-06-13-different-types-of-graphs.md index f0215fd..7392bbf 100644 --- a/content/labs/visualization/2020-06-13-different-types-of-graphs.md +++ b/content/labs/visualization/2020-06-13-different-types-of-graphs.md @@ -210,3 +210,10 @@ chart=true } }); {{< /chart >}} + +### ヒートマップ +ヒートマップの特徴は以下のように説明されていました: + +- ヒートマップの最大の特徴は、塗り絵のように表を色で塗る点です。データを読んでわかるというよりは、データの傾向を表す色を見てわかる「表」に仕上がります。 +- ヒートマップは数字を色に置き換えて、「どのデータ項目にデータが偏っているだろうか？」と考えます。つまりヒートマップが一番得意な表現方法は、量の「偏り」です。 +- 細かく比較するのにはヒートマップは適していませんが、全体のデータの傾向を一瞬で把握するのには最適なのです。 From e3b46746fa28b220467498eeb6d44f7edebb99e5 Mon Sep 17 00:00:00 2001 From: kazu634 Date: Sun, 14 Jun 2020 12:25:09 +0700 Subject: [PATCH 25/44] =?UTF-8?q?=E6=95=A3=E5=B8=83=E5=9B=B3=E3=81=AE?= =?UTF-8?q?=E8=AA=AC=E6=98=8E=E3=82=92=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../2020-06-13-different-types-of-graphs.md | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/content/labs/visualization/2020-06-13-different-types-of-graphs.md b/content/labs/visualization/2020-06-13-different-types-of-graphs.md index 7392bbf..ac7753c 100644 --- a/content/labs/visualization/2020-06-13-different-types-of-graphs.md +++ b/content/labs/visualization/2020-06-13-different-types-of-graphs.md @@ -217,3 +217,17 @@ chart=true - ヒートマップの最大の特徴は、塗り絵のように表を色で塗る点です。データを読んでわかるというよりは、データの傾向を表す色を見てわかる「表」に仕上がります。 - ヒートマップは数字を色に置き換えて、「どのデータ項目にデータが偏っているだろうか？」と考えます。つまりヒートマップが一番得意な表現方法は、量の「偏り」です。 - 細かく比較するのにはヒートマップは適していませんが、全体のデータの傾向を一瞬で把握するのには最適なのです。 + +### 散布図 +散布図の特徴は以下のように説明されていました: + +> 散布図は2つのデータとその2つのデータを束ねるデータ項目が用意されます。あとは、縦軸と横軸の2軸で構成された表にひたすらそのデータを点として打ち込むだけです。まさに「scatter：なのです。たったそれだけなのに、データの傾向を把握できます。 + +散布図が表現するのは、2つのデータ項目の「関係」: + +> 複数の項目を表現した点を俯瞰して見て「縦軸と横軸の相関(二つのデータ項目が密接に関わり合っている状態)はあるだろうか？」と考えます。つまり散布図が一番得意な表現方法は、2つのデータ項目の「関係」です。散布図は、二つの観点から見たデータの関係性を最もわかりやすく図で表現できます。「相関」という言葉、あまり聞き慣れないですよね。一方の値が変化している時、他方の値も変化しているという2つの値の関連性を意味しています。「相関関係」とも表現します。 + +> 伝えたい内容は、2つのデータ項目間の比較でも推移でも偏りでもありません。「関係」というデータ同士のつながりです。 + + + From 0e6cbd98b4aa075b35d31538bff48730723cf409 Mon Sep 17 00:00:00 2001 From: kazu634 Date: Sun, 14 Jun 2020 12:33:03 +0700 Subject: [PATCH 26/44] =?UTF-8?q?=E6=95=A3=E5=B8=83=E5=9B=B3=E3=81=AE?= =?UTF-8?q?=E3=82=B0=E3=83=A9=E3=83=95=E3=82=92=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../2020-06-13-different-types-of-graphs.md | 55 +++++++++++++++++++ 1 file changed, 55 insertions(+) diff --git a/content/labs/visualization/2020-06-13-different-types-of-graphs.md b/content/labs/visualization/2020-06-13-different-types-of-graphs.md index ac7753c..dc28280 100644 --- a/content/labs/visualization/2020-06-13-different-types-of-graphs.md +++ b/content/labs/visualization/2020-06-13-different-types-of-graphs.md @@ -229,5 +229,60 @@ chart=true > 伝えたい内容は、2つのデータ項目間の比較でも推移でも偏りでもありません。「関係」というデータ同士のつながりです。 +{{}} + var ctx = document.getElementById("scatter-chart"); + var myScatterChart = new Chart(ctx, { + type: 'scatter', + data: { + datasets: [ + { + label: '1st Class', + data: [{x:90, y:82},{x:39, y:45},{x:63, y:65},{x:83, y:75},{x:83, y:95}], + backgroundColor: 'RGBA(225,95,150, 1)', + }, + { + label: '2nd Class', + data: [{x:97, y:92},{x:63, y:70},{x:48, y:52},{x:83, y:79},{x:66, y:74}], + backgroundColor: 'RGBA(115,255,25, 1)', + }] + }, + options:{ + title: { + display: true, + text: 'Test Results' + }, + scales: { + xAxes: [{ + scaleLabel: { + display: true, + labelString: 'English' + }, + ticks: { + suggestedMin: 0, + suggestedMax: 100, + stepSize: 10, + callback: function(value, index, values){ + return value + } + } + }], + yAxes: [{ + scaleLabel: { + display: true, + labelString: 'Math' + }, + ticks: { + suggestedMax: 100, + suggestedMin: 0, + stepSize: 10, + callback: function(value, index, values){ + return value + } + } + }] + } + } + }); +{{< /chart >}} From 0ffc7c9cbdfee8192767af89e0bd0e266607c5e6 Mon Sep 17 00:00:00 2001 From: kazu634 Date: Sun, 14 Jun 2020 12:37:23 +0700 Subject: [PATCH 27/44] =?UTF-8?q?=E6=95=A3=E5=B8=83=E5=9B=B3=E3=81=AE?= =?UTF-8?q?=E8=AA=AD=E3=81=BF=E6=96=B9=E3=81=AE=E8=AA=AC=E6=98=8E=E3=82=92?= =?UTF-8?q?=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../labs/visualization/2020-06-13-different-types-of-graphs.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/content/labs/visualization/2020-06-13-different-types-of-graphs.md b/content/labs/visualization/2020-06-13-different-types-of-graphs.md index dc28280..9b88ccd 100644 --- a/content/labs/visualization/2020-06-13-different-types-of-graphs.md +++ b/content/labs/visualization/2020-06-13-different-types-of-graphs.md @@ -229,6 +229,8 @@ chart=true > 伝えたい内容は、2つのデータ項目間の比較でも推移でも偏りでもありません。「関係」というデータ同士のつながりです。 +下の散布図を見ると、英語と数学のテストの成績には関係性が隠れていそうです: + {{}} var ctx = document.getElementById("scatter-chart"); From b4456338bfb3fc767901cae89be5a9953785df15 Mon Sep 17 00:00:00 2001 From: kazu634 Date: Sun, 14 Jun 2020 12:44:01 +0700 Subject: [PATCH 28/44] =?UTF-8?q?=E5=8F=82=E8=80=83=E3=83=AA=E3=83=B3?= =?UTF-8?q?=E3=82=AF=E3=82=92=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../labs/visualization/2020-06-13-different-types-of-graphs.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/content/labs/visualization/2020-06-13-different-types-of-graphs.md b/content/labs/visualization/2020-06-13-different-types-of-graphs.md index 9b88ccd..57bb6ee 100644 --- a/content/labs/visualization/2020-06-13-different-types-of-graphs.md +++ b/content/labs/visualization/2020-06-13-different-types-of-graphs.md @@ -288,3 +288,6 @@ chart=true }); {{< /chart >}} + +## 参考 +- [Chart.jsでグラフを描画してみた - Qiita](https://qiita.com/Haruka-Ogawa/items/59facd24f2a8bdb6d369#3-2-%E6%A3%92%E3%82%B0%E3%83%A9%E3%83%95) From aba5a9e7793ef425fc9423827d7a058e8b7edfc0 Mon Sep 17 00:00:00 2001 From: kazu634 Date: Thu, 18 Jun 2020 20:58:34 +0700 Subject: [PATCH 29/44] =?UTF-8?q?Chart.js=E3=83=A9=E3=82=A4=E3=83=96?= =?UTF-8?q?=E3=83=A9=E3=83=AA=E3=81=AE=E5=8F=82=E7=85=A7=E5=85=88=E3=82=92?= =?UTF-8?q?=E5=A4=89=E6=9B=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- layouts/partials/labs-header-content.html | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/layouts/partials/labs-header-content.html b/layouts/partials/labs-header-content.html index 6a14444..191c57d 100644 --- a/layouts/partials/labs-header-content.html +++ b/layouts/partials/labs-header-content.html @@ -58,7 +58,9 @@ {{ end }} {{ if .Params.chart }} - + + + {{ end }} From 755c364c1fcdbff70b755cd8df2275e0a41b965b Mon Sep 17 00:00:00 2001 From: kazu634 Date: Thu, 18 Jun 2020 21:08:02 +0700 Subject: [PATCH 30/44] =?UTF-8?q?=E9=85=8D=E8=89=B2=E3=82=92=E8=87=AA?= =?UTF-8?q?=E5=8B=95=E3=81=A7=E6=B1=BA=E5=AE=9A=E3=81=99=E3=82=8B=E3=82=88?= =?UTF-8?q?=E3=81=86=E3=81=AB=E5=A4=89=E6=9B=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../2020-06-13-different-types-of-graphs.md | 81 ++++++++++--------- 1 file changed, 44 insertions(+), 37 deletions(-) diff --git a/content/labs/visualization/2020-06-13-different-types-of-graphs.md b/content/labs/visualization/2020-06-13-different-types-of-graphs.md index 57bb6ee..6febb79 100644 --- a/content/labs/visualization/2020-06-13-different-types-of-graphs.md +++ b/content/labs/visualization/2020-06-13-different-types-of-graphs.md @@ -31,14 +31,6 @@ chart=true datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], - backgroundColor: [ - 'rgba(255, 99, 132, 0.2)', - 'rgba(54, 162, 235, 0.2)', - 'rgba(255, 206, 86, 0.2)', - 'rgba(75, 192, 192, 0.2)', - 'rgba(153, 102, 255, 0.2)', - 'rgba(255, 159, 64, 0.2)' - ], borderColor: [ 'rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', @@ -57,9 +49,15 @@ chart=true beginAtZero: true } }] - } - } -}); + }, + plugins: { + colorschemes: { + scheme: 'tableau.Tableau20', + fillAlpha: 0.3 + } + } + } + }); {{< /chart >}} @@ -85,14 +83,6 @@ chart=true datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], - backgroundColor: [ - 'rgba(0,0,0,0)', - 'rgba(0,0,0,0)', - 'rgba(0,0,0,0)', - 'rgba(0,0,0,0)', - 'rgba(0,0,0,0)', - 'rgba(0,0,0,0)' - ], borderColor: [ 'rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', @@ -111,7 +101,13 @@ chart=true beginAtZero: true } }] - } + }, + plugins: { + colorschemes: { + scheme: 'tableau.Tableau20', + fillAlpha: 0.3 + } + } } }); {{< /chart >}} @@ -139,22 +135,22 @@ chart=true data: { labels: ["A", "O", "B", "AB"], datasets: [{ - backgroundColor: [ - "#BB5179", - "#FAFF67", - "#58A27C", - "#3C00FF" - ], - data: [38, 31, 21, 10] + data: [38, 31, 21, 10] }] }, options: { title: { display: true, text: 'Blood Type Ratio' - } + }, + plugins: { + colorschemes: { + scheme: 'tableau.Tableau20', + fillAlpha: 0.3 + } + } } -}); + }); {{< /chart >}} #### 円グラフの利用が推奨されない理由 @@ -179,14 +175,12 @@ chart=true datasets: [{ label: 'Alice', data: [92, 72, 86, 74, 86], - backgroundColor: 'RGBA(225,95,150, 0.5)', borderColor: 'RGBA(225,95,150, 1)', borderWidth: 1, pointBackgroundColor: 'RGB(46,106,177)' }, { label: 'Bob', data: [73, 95, 80, 87, 79], - backgroundColor: 'RGBA(115,255,25, 0.5)', borderColor: 'RGBA(115,255,25, 1)', borderWidth: 1, pointBackgroundColor: 'RGB(46,106,177)' @@ -206,7 +200,13 @@ chart=true return value } } - } + }, + plugins: { + colorschemes: { + scheme: 'tableau.Tableau20', + fillAlpha: 0.3 + } + } } }); {{< /chart >}} @@ -240,13 +240,11 @@ chart=true datasets: [ { label: '1st Class', - data: [{x:90, y:82},{x:39, y:45},{x:63, y:65},{x:83, y:75},{x:83, y:95}], - backgroundColor: 'RGBA(225,95,150, 1)', - }, + data: [{x:90, y:82},{x:39, y:45},{x:63, y:65},{x:83, y:75},{x:83, y:95}] + }, { label: '2nd Class', - data: [{x:97, y:92},{x:63, y:70},{x:48, y:52},{x:83, y:79},{x:66, y:74}], - backgroundColor: 'RGBA(115,255,25, 1)', + data: [{x:97, y:92},{x:63, y:70},{x:48, y:52},{x:83, y:79},{x:66, y:74}] }] }, options:{ @@ -283,11 +281,20 @@ chart=true } } }] + }, + plugins: { + colorschemes: { + scheme: 'tableau.Tableau20', + fillAlpha: 0.3 + } } } }); {{< /chart >}} +### 積み上げ棒グラフ + + ## 参考 - [Chart.jsでグラフを描画してみた - Qiita](https://qiita.com/Haruka-Ogawa/items/59facd24f2a8bdb6d369#3-2-%E6%A3%92%E3%82%B0%E3%83%A9%E3%83%95) From ae1770a513f9c114bb2870f129761a9943ccee7c Mon Sep 17 00:00:00 2001 From: kazu634 Date: Thu, 18 Jun 2020 21:17:52 +0700 Subject: [PATCH 31/44] =?UTF-8?q?=E7=A9=8D=E3=81=BF=E4=B8=8A=E3=81=92?= =?UTF-8?q?=E6=A3=92=E3=82=B0=E3=83=A9=E3=83=95=E3=81=AE=E8=AA=AC=E6=98=8E?= =?UTF-8?q?=E3=83=BB=E3=82=B0=E3=83=A9=E3=83=95=E3=82=92=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../2020-06-13-different-types-of-graphs.md | 54 +++++++++++++++++++ 1 file changed, 54 insertions(+) diff --git a/content/labs/visualization/2020-06-13-different-types-of-graphs.md b/content/labs/visualization/2020-06-13-different-types-of-graphs.md index 6febb79..002834d 100644 --- a/content/labs/visualization/2020-06-13-different-types-of-graphs.md +++ b/content/labs/visualization/2020-06-13-different-types-of-graphs.md @@ -293,8 +293,62 @@ chart=true {{< /chart >}} ### 積み上げ棒グラフ +積み上げ棒グラフの特徴は以下のように説明されていました: +> そもそも積み上げ棒グラフとは、棒グラフを改良させたグラフです。基本は棒グラフの表現をしているので、データ項目同士の「比較」もデータ項目の内訳の「比較」も把握できます。だから、円グラフの「総量がわからないので違う円グラフの内訳と比較できない」というデメリットを解消できるのです。高さを比べて量の大小を感覚的につかめる棒グラフの特徴を活かして、積み上げた棒の高さをそれぞれ比べられるのです。送料に対する内訳の表現を円ではなく、棒の高さで表現しているからです。 +> 積み上げ棒グラフは、棒の中に必ず複数のデータ項目を描きます。棒の内訳に1つのデータ項目しかない積み上げ棒グラフは、何も積み上げていないので単なる棒グラフです。そんな積み上げ棒グラフを目にする機会は少ないでしょう。積み上げ棒グラフでは、あるデータ項目の内訳の高さを比べて「全体に対して占める割合が大きい(小さい)データ量はどれだろう？」と考えます。つまり積み上げ棒グラフが一番得意な表現方法は、データ全体の「内訳」の「比較」です。積み上げ棒グラフは、各データ項目が全体に対して占める割合を比べやすいように図で表現できます。 + +> 積み上げ棒グラフは、円グラフが得意とする「内訳」と棒グラフが得意とする「比較」のどちらを強調したいか決めれば、何が言いたいのかより伝わります。 + +{{}} + var ctx = document.getElementById("stacked-bar-chart"); + var myBarChart = new Chart(ctx, { + type: 'bar', + data: { + labels: ['8月1日', '8月2日', '8月3日', '8月4日', '8月5日', '8月6日', '8月7日'], + datasets: [ + { + label: 'A店 来客数', + data: [62, 65, 93, 85, 51, 66, 47] + },{ + label: 'B店 来客数', + data: [55, 45, 73, 75, 41, 45, 58] + },{ + label: 'C店 来客数', + data: [33, 45, 62, 55, 31, 45, 38] + }] + }, + options: { + title: { + display: true, + text: '支店別 来客数' + }, + scales: { + xAxes: [{ + stacked: true + }], + yAxes: [{ + stacked: true, + ticks: { + suggestedMax: 250, + suggestedMin: 0, + stepSize: 10, + callback: function(value, index, values){ + return value + '人' + } + } + }] + }, + plugins: { + colorschemes: { + scheme: 'tableau.Tableau20', + fillAlpha: 0.3 + } + } + }, + }); +{{< /chart >}} ## 参考 - [Chart.jsでグラフを描画してみた - Qiita](https://qiita.com/Haruka-Ogawa/items/59facd24f2a8bdb6d369#3-2-%E6%A3%92%E3%82%B0%E3%83%A9%E3%83%95) From 2efd801d8930e0c3d068687668947de4c87877fb Mon Sep 17 00:00:00 2001 From: kazu634 Date: Thu, 18 Jun 2020 21:25:24 +0700 Subject: [PATCH 32/44] =?UTF-8?q?=E5=86=85=E8=A8=B3=E3=82=92=E9=87=8D?= =?UTF-8?q?=E8=A6=96=E3=81=99=E3=82=8B=E5=A0=B4=E5=90=88=E3=80=81=E6=AF=94?= =?UTF-8?q?=E8=BC=83=E3=82=92=E9=87=8D=E8=A6=96=E3=81=99=E3=82=8B=E5=A0=B4?= =?UTF-8?q?=E5=90=88=E3=81=AE=E5=90=84=E5=A0=B4=E5=90=88=E3=81=AB=E3=81=A4?= =?UTF-8?q?=E3=81=84=E3=81=A6=E8=AA=AC=E6=98=8E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../2020-06-13-different-types-of-graphs.md | 43 +++++++++++++++++++ 1 file changed, 43 insertions(+) diff --git a/content/labs/visualization/2020-06-13-different-types-of-graphs.md b/content/labs/visualization/2020-06-13-different-types-of-graphs.md index 002834d..1538ec6 100644 --- a/content/labs/visualization/2020-06-13-different-types-of-graphs.md +++ b/content/labs/visualization/2020-06-13-different-types-of-graphs.md @@ -299,8 +299,16 @@ chart=true > 積み上げ棒グラフは、棒の中に必ず複数のデータ項目を描きます。棒の内訳に1つのデータ項目しかない積み上げ棒グラフは、何も積み上げていないので単なる棒グラフです。そんな積み上げ棒グラフを目にする機会は少ないでしょう。積み上げ棒グラフでは、あるデータ項目の内訳の高さを比べて「全体に対して占める割合が大きい(小さい)データ量はどれだろう？」と考えます。つまり積み上げ棒グラフが一番得意な表現方法は、データ全体の「内訳」の「比較」です。積み上げ棒グラフは、各データ項目が全体に対して占める割合を比べやすいように図で表現できます。 +以下の説明で書かれているように、積み上げ棒グラフには2種類の読み方がある: + > 積み上げ棒グラフは、円グラフが得意とする「内訳」と棒グラフが得意とする「比較」のどちらを強調したいか決めれば、何が言いたいのかより伝わります。 +1. 「比較」を重視する作り方 +2. 「内訳」を重視する作り方 + +#### 比較を重視する積み上げ棒グラフ +比較を重視した場合は、総量を純粋に積み上げて、以下のようなグラフを利用することになりそう: + {{}} var ctx = document.getElementById("stacked-bar-chart"); var myBarChart = new Chart(ctx, { @@ -350,5 +358,40 @@ chart=true }); {{< /chart >}} +#### 内訳を重視する積み上げ棒グラフ +内訳を重視した場合は、総量に対する割合を積み上げて、以下のようなグラフを利用することになりそう: + +{{}} + var mychart = new Chart(document.getElementById("stacked-ratio-bar-chart"), { + type: "bar", + data: { + labels: ["Foo", "Bar"], + datasets: [{ + label: "bad", + data: [5, 25] + }, + { + label: "better", + data: [15, 10] + }, + { + label: "good", + data: [10, 8] + } + ]}, + options: { + plugins: { + stacked100: { + enable: true + }, + colorschemes: { + scheme: 'tableau.Tableau20', + fillAlpha: 0.3 + } + } + } + }); +{{< /chart >}} + ## 参考 - [Chart.jsでグラフを描画してみた - Qiita](https://qiita.com/Haruka-Ogawa/items/59facd24f2a8bdb6d369#3-2-%E6%A3%92%E3%82%B0%E3%83%A9%E3%83%95) From dd74249a156d5cb6989a53ad26cab46bf974b204 Mon Sep 17 00:00:00 2001 From: kazu634 Date: Thu, 18 Jun 2020 21:28:27 +0700 Subject: [PATCH 33/44] =?UTF-8?q?100%=E7=A9=8D=E3=81=BF=E4=B8=8A=E3=81=92?= =?UTF-8?q?=E3=82=B0=E3=83=A9=E3=83=95=E3=81=AE=E4=BE=8B=E3=82=92=E6=99=82?= =?UTF-8?q?=E7=B3=BB=E5=88=97=E3=81=AB=E3=81=AA=E3=82=8B=E3=82=88=E3=81=86?= =?UTF-8?q?=E3=81=AB=E5=A4=89=E6=9B=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../labs/visualization/2020-06-13-different-types-of-graphs.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/labs/visualization/2020-06-13-different-types-of-graphs.md b/content/labs/visualization/2020-06-13-different-types-of-graphs.md index 1538ec6..67ecec0 100644 --- a/content/labs/visualization/2020-06-13-different-types-of-graphs.md +++ b/content/labs/visualization/2020-06-13-different-types-of-graphs.md @@ -365,7 +365,7 @@ chart=true var mychart = new Chart(document.getElementById("stacked-ratio-bar-chart"), { type: "bar", data: { - labels: ["Foo", "Bar"], + labels: ["2020/01", "2020/02"], datasets: [{ label: "bad", data: [5, 25] From 21b6101eb904235eabcd1f12d0077ab0142b9f91 Mon Sep 17 00:00:00 2001 From: kazu634 Date: Thu, 18 Jun 2020 21:33:28 +0700 Subject: [PATCH 34/44] =?UTF-8?q?100%=E7=A9=8D=E3=81=BF=E4=B8=8A=E3=81=92?= =?UTF-8?q?=E6=A3=92=E3=82=B0=E3=83=A9=E3=83=95=E3=81=AE=E3=83=87=E3=83=BC?= =?UTF-8?q?=E3=82=BF=E3=82=92=E5=A4=89=E6=9B=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../2020-06-13-different-types-of-graphs.md | 64 ++++++++++++------- 1 file changed, 42 insertions(+), 22 deletions(-) diff --git a/content/labs/visualization/2020-06-13-different-types-of-graphs.md b/content/labs/visualization/2020-06-13-different-types-of-graphs.md index 67ecec0..3fa608e 100644 --- a/content/labs/visualization/2020-06-13-different-types-of-graphs.md +++ b/content/labs/visualization/2020-06-13-different-types-of-graphs.md @@ -359,37 +359,57 @@ chart=true {{< /chart >}} #### 内訳を重視する積み上げ棒グラフ -内訳を重視した場合は、総量に対する割合を積み上げて、以下のようなグラフを利用することになりそう: +内訳を重視した場合は、総量に対する割合を積み上げて、合計が100%になるようにした、以下のようなグラフを利用することになりそう: {{}} - var mychart = new Chart(document.getElementById("stacked-ratio-bar-chart"), { - type: "bar", + var ctx = document.getElementById("stacked-bar-chart"); + var myBarChart = new Chart(ctx, { + type: 'bar', data: { - labels: ["2020/01", "2020/02"], - datasets: [{ - label: "bad", - data: [5, 25] + labels: ['8月1日', '8月2日', '8月3日', '8月4日', '8月5日', '8月6日', '8月7日'], + datasets: [ + { + label: 'A店 来客数', + data: [62, 65, 93, 85, 51, 66, 47] + },{ + label: 'B店 来客数', + data: [55, 45, 73, 75, 41, 45, 58] + },{ + label: 'C店 来客数', + data: [33, 45, 62, 55, 31, 45, 38] + }] }, - { - label: "better", - data: [15, 10] - }, - { - label: "good", - data: [10, 8] - } - ]}, options: { + title: { + display: true, + text: '支店別 来客数' + }, + scales: { + xAxes: [{ + stacked: true + }], + yAxes: [{ + stacked: true, + ticks: { + suggestedMax: 250, + suggestedMin: 0, + stepSize: 10, + callback: function(value, index, values){ + return value + '人' + } + } + }] + }, plugins: { - stacked100: { - enable: true - }, colorschemes: { scheme: 'tableau.Tableau20', fillAlpha: 0.3 - } - } - } + }, + stacked100: { + enable: true + }, + } + }, }); {{< /chart >}} From cac3810fb6097c27f375c8d8e29ad8041aafb450 Mon Sep 17 00:00:00 2001 From: kazu634 Date: Thu, 18 Jun 2020 21:34:33 +0700 Subject: [PATCH 35/44] =?UTF-8?q?canvas=20ID=E3=82=92=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../labs/visualization/2020-06-13-different-types-of-graphs.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/labs/visualization/2020-06-13-different-types-of-graphs.md b/content/labs/visualization/2020-06-13-different-types-of-graphs.md index 3fa608e..4d5f99c 100644 --- a/content/labs/visualization/2020-06-13-different-types-of-graphs.md +++ b/content/labs/visualization/2020-06-13-different-types-of-graphs.md @@ -362,7 +362,7 @@ chart=true 内訳を重視した場合は、総量に対する割合を積み上げて、合計が100%になるようにした、以下のようなグラフを利用することになりそう: {{}} - var ctx = document.getElementById("stacked-bar-chart"); + var ctx = document.getElementById("stacked-ratio-bar-chart"); var myBarChart = new Chart(ctx, { type: 'bar', data: { From 98577344162ae007484a6768eab5d2e58724d27d Mon Sep 17 00:00:00 2001 From: kazu634 Date: Thu, 18 Jun 2020 21:37:28 +0700 Subject: [PATCH 36/44] =?UTF-8?q?y=E8=BB=B8=E3=81=AE=E8=A1=A8=E8=A8=98?= =?UTF-8?q?=E3=82=92=E3=80=8C%=E3=80=8D=E3=81=AB=E5=A4=89=E6=9B=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../labs/visualization/2020-06-13-different-types-of-graphs.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/labs/visualization/2020-06-13-different-types-of-graphs.md b/content/labs/visualization/2020-06-13-different-types-of-graphs.md index 4d5f99c..3d98785 100644 --- a/content/labs/visualization/2020-06-13-different-types-of-graphs.md +++ b/content/labs/visualization/2020-06-13-different-types-of-graphs.md @@ -395,7 +395,7 @@ chart=true suggestedMin: 0, stepSize: 10, callback: function(value, index, values){ - return value + '人' + return value + '%' } } }] From 65aa8d1692b194b7f380020f62df525b18fd80d6 Mon Sep 17 00:00:00 2001 From: kazu634 Date: Thu, 18 Jun 2020 21:43:56 +0700 Subject: [PATCH 37/44] =?UTF-8?q?=E6=8A=98=E3=82=8C=E7=B7=9A=E3=82=B0?= =?UTF-8?q?=E3=83=A9=E3=83=95=E3=81=AE=E8=83=8C=E6=99=AF=E8=89=B2=E3=82=92?= =?UTF-8?q?=E9=80=8F=E6=98=8E=E3=81=AB=E3=81=97=E3=81=A6=E9=9D=A2=E3=82=B0?= =?UTF-8?q?=E3=83=A9=E3=83=95=E3=81=A7=E3=81=AF=E3=81=AA=E3=81=8F=E3=81=99?= =?UTF-8?q?=E3=82=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../visualization/2020-06-13-different-types-of-graphs.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/content/labs/visualization/2020-06-13-different-types-of-graphs.md b/content/labs/visualization/2020-06-13-different-types-of-graphs.md index 3d98785..0423758 100644 --- a/content/labs/visualization/2020-06-13-different-types-of-graphs.md +++ b/content/labs/visualization/2020-06-13-different-types-of-graphs.md @@ -91,6 +91,14 @@ chart=true 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)' ], + backgroundColor: [ + 'rgba(0,0,0,0)', + 'rgba(0,0,0,0)', + 'rgba(0,0,0,0)', + 'rgba(0,0,0,0)', + 'rgba(0,0,0,0)', + 'rgba(0,0,0,0)' + ], borderWidth: 1 }] }, From 75b104d0e4b02fb09fc1de81df216a43447b2c15 Mon Sep 17 00:00:00 2001 From: kazu634 Date: Thu, 18 Jun 2020 21:53:03 +0700 Subject: [PATCH 38/44] =?UTF-8?q?=E9=9D=A2=E3=82=B0=E3=83=A9=E3=83=95?= =?UTF-8?q?=E3=82=92=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../2020-06-13-different-types-of-graphs.md | 48 +++++++++++++++++++ 1 file changed, 48 insertions(+) diff --git a/content/labs/visualization/2020-06-13-different-types-of-graphs.md b/content/labs/visualization/2020-06-13-different-types-of-graphs.md index 0423758..8250b33 100644 --- a/content/labs/visualization/2020-06-13-different-types-of-graphs.md +++ b/content/labs/visualization/2020-06-13-different-types-of-graphs.md @@ -421,5 +421,53 @@ chart=true }); {{< /chart >}} +### 面グラフ + +{{}} + const loggedIn = [26, 36, 42, 38, 40, 30, 12]; + const available = [34, 44, 33, 24, 25, 28, 25]; + const availableForExisting = [16, 13, 25, 33, 40, 33, 45]; + const unavailable = [5, 9, 10, 9, 18, 19, 20]; + const xData = [13, 14, 15, 16, 17, 18, 19]; + + var ctx = document.getElementById("stacked-ratio-bar-chart"); + var myBarChart = new Chart(ctx, { + type: 'line', + data: { + labels: xData, + datasets: [{ + label: "Unavailable", + fill: true, + borderCapStyle: 'butt', + data: unavailable + }, { + label: "Available for Existing", + fill: true, + borderCapStyle: 'butt', + data: availableForExisting + }, { + label: "Available", + fill: true, + borderCapStyle: 'butt', + data: available + }, { + label: "Logged In", + fill: true, + data: loggedIn + }] + }, + options: { + responsive: false, + // Can't just just `stacked: true` like the docs say + scales: { + yAxes: [{ + stacked: true, + }] + } + } + }); +{{< /chart >}} + + ## 参考 - [Chart.jsでグラフを描画してみた - Qiita](https://qiita.com/Haruka-Ogawa/items/59facd24f2a8bdb6d369#3-2-%E6%A3%92%E3%82%B0%E3%83%A9%E3%83%95) From 75b060f45bce5397450cd8fdb800f856185316ff Mon Sep 17 00:00:00 2001 From: kazu634 Date: Thu, 18 Jun 2020 21:55:59 +0700 Subject: [PATCH 39/44] =?UTF-8?q?Canvas=20ID=E3=82=92=E3=82=92=E4=BF=AE?= =?UTF-8?q?=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../visualization/2020-06-13-different-types-of-graphs.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/labs/visualization/2020-06-13-different-types-of-graphs.md b/content/labs/visualization/2020-06-13-different-types-of-graphs.md index 8250b33..790a60e 100644 --- a/content/labs/visualization/2020-06-13-different-types-of-graphs.md +++ b/content/labs/visualization/2020-06-13-different-types-of-graphs.md @@ -423,14 +423,14 @@ chart=true ### 面グラフ -{{}} +{{}} const loggedIn = [26, 36, 42, 38, 40, 30, 12]; const available = [34, 44, 33, 24, 25, 28, 25]; const availableForExisting = [16, 13, 25, 33, 40, 33, 45]; const unavailable = [5, 9, 10, 9, 18, 19, 20]; const xData = [13, 14, 15, 16, 17, 18, 19]; - var ctx = document.getElementById("stacked-ratio-bar-chart"); + var ctx = document.getElementById("area-stacked-chart"); var myBarChart = new Chart(ctx, { type: 'line', data: { From 31587771ccd50ba71fa1ae7a8e5c0c5f71805e68 Mon Sep 17 00:00:00 2001 From: kazu634 Date: Thu, 18 Jun 2020 22:01:26 +0700 Subject: [PATCH 40/44] =?UTF-8?q?=E3=82=B0=E3=83=A9=E3=83=95=E3=81=AE?= =?UTF-8?q?=E5=A4=A7=E3=81=8D=E3=81=95=E3=82=92=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../labs/visualization/2020-06-13-different-types-of-graphs.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/content/labs/visualization/2020-06-13-different-types-of-graphs.md b/content/labs/visualization/2020-06-13-different-types-of-graphs.md index 790a60e..b7e6a0d 100644 --- a/content/labs/visualization/2020-06-13-different-types-of-graphs.md +++ b/content/labs/visualization/2020-06-13-different-types-of-graphs.md @@ -457,8 +457,6 @@ chart=true }] }, options: { - responsive: false, - // Can't just just `stacked: true` like the docs say scales: { yAxes: [{ stacked: true, From aecad16dfdfb1b2eaa4afe6543adf8d80b3d8206 Mon Sep 17 00:00:00 2001 From: kazu634 Date: Thu, 18 Jun 2020 22:05:23 +0700 Subject: [PATCH 41/44] =?UTF-8?q?=E9=85=8D=E8=89=B2=E3=82=92=E8=87=AA?= =?UTF-8?q?=E5=8B=95=E3=81=A7=E6=B1=BA=E3=82=81=E3=82=8B=E3=82=88=E3=81=86?= =?UTF-8?q?=E3=81=AB=E5=A4=89=E6=9B=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../visualization/2020-06-13-different-types-of-graphs.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/content/labs/visualization/2020-06-13-different-types-of-graphs.md b/content/labs/visualization/2020-06-13-different-types-of-graphs.md index b7e6a0d..36d40f1 100644 --- a/content/labs/visualization/2020-06-13-different-types-of-graphs.md +++ b/content/labs/visualization/2020-06-13-different-types-of-graphs.md @@ -461,6 +461,12 @@ chart=true yAxes: [{ stacked: true, }] + }, + plugins: { + colorschemes: { + scheme: 'tableau.Tableau20', + fillAlpha: 0.3 + }, } } }); @@ -469,3 +475,4 @@ chart=true ## 参考 - [Chart.jsでグラフを描画してみた - Qiita](https://qiita.com/Haruka-Ogawa/items/59facd24f2a8bdb6d369#3-2-%E6%A3%92%E3%82%B0%E3%83%A9%E3%83%95) +- [ChartJS stacked line chart](https://codepen.io/natenorberg/pen/WwqRar) From 5fce13869b88ae85ac643a82a74bd95f7ea5c2a5 Mon Sep 17 00:00:00 2001 From: kazu634 Date: Thu, 18 Jun 2020 22:10:20 +0700 Subject: [PATCH 42/44] =?UTF-8?q?=E9=9D=A2=E3=82=B0=E3=83=A9=E3=83=95?= =?UTF-8?q?=E3=81=AE=E8=AA=AC=E6=98=8E=E3=82=92=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../2020-06-13-different-types-of-graphs.md | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/content/labs/visualization/2020-06-13-different-types-of-graphs.md b/content/labs/visualization/2020-06-13-different-types-of-graphs.md index 36d40f1..99ca20c 100644 --- a/content/labs/visualization/2020-06-13-different-types-of-graphs.md +++ b/content/labs/visualization/2020-06-13-different-types-of-graphs.md @@ -422,6 +422,17 @@ chart=true {{< /chart >}} ### 面グラフ +面グラフの特徴は以下のように説明されていました: + +> 面グラフは1つの線を描き終えると、2つ目の先は先に引いた線上を0の基準とみなして再び線を描きます。2つ目の線は、1つ目に引かれた線を0という基準にしていいるのを明確にするために、1つ目に引いた線の下側を塗りつぶし、2つ目の線の下側と1つ目の線の上側も塗りつぶします。だから面グラフと言われています。 + +> 面グラフは必ず複数の時点、面の中に複数のデータ項目を描きます。面の内訳が1つだけ描かれる面グラフは単なる折れ線グラフです。そんな面グラフを目にする機会はないでしょう。面グラフでは、面の推移を比べて「全体に対して占める割合が大きい(小さい)データ量はどのように変化するのだろう？」と考えます。つまり面グラフが一番得意な表現方法は、データ全体の「内訳」の「推移」です。面グラフは、データ(数字)の総量と内訳の変化を最もわかりやすく図で表現できます。 +> +> データ全体に対する特定のデータ項目の「推移」から内訳の変化を感覚的につかめるのが面グラフの特徴です。 + +> 面グラフは、円グラフが得意とする「内訳」と折れ線グラフが得意とする「推移」のどちらかを強調したいか決めれば、何が言いたいのかより伝わります。 + +面グラフの具体例は以下になります: {{}} const loggedIn = [26, 36, 42, 38, 40, 30, 12]; From 400b3ba759a0ef99a875556613ea9b0c04faaa40 Mon Sep 17 00:00:00 2001 From: Kazuhiro MUSASHI Date: Fri, 19 Jun 2020 00:54:56 +0900 Subject: [PATCH 43/44] =?UTF-8?q?Amazon=E3=81=B8=E3=81=AE=E3=83=AA?= =?UTF-8?q?=E3=83=B3=E3=82=AF=E3=82=92=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../visualization/2020-06-13-different-types-of-graphs.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/content/labs/visualization/2020-06-13-different-types-of-graphs.md b/content/labs/visualization/2020-06-13-different-types-of-graphs.md index 99ca20c..e1caf54 100644 --- a/content/labs/visualization/2020-06-13-different-types-of-graphs.md +++ b/content/labs/visualization/2020-06-13-different-types-of-graphs.md @@ -6,7 +6,7 @@ images = [""] chart=true +++ -『グラフを作る前に読む本』に、グラフをどのようにようにように使い分けるかについてまとめられていたのでメモします。 +『グラフを作る前に読む本』に、グラフをどのようにようにように使い分けるかについてまとめられていたのでメモします。 ## まとめるとこんな感じ 書いてあることをまとめると、以下のようになるようです: @@ -487,3 +487,6 @@ chart=true ## 参考 - [Chart.jsでグラフを描画してみた - Qiita](https://qiita.com/Haruka-Ogawa/items/59facd24f2a8bdb6d369#3-2-%E6%A3%92%E3%82%B0%E3%83%A9%E3%83%95) - [ChartJS stacked line chart](https://codepen.io/natenorberg/pen/WwqRar) + + +
グラフをつくる前に読む本［一瞬で伝わる表現はどのように生まれたのか］ Kindle版
posted with カエレバ
Amazon.co.jpで詳細を見る
From 1f5b53a273de977504019065f52b9a4977fb2f0e Mon Sep 17 00:00:00 2001 From: Kazuhiro MUSASHI Date: Fri, 19 Jun 2020 00:58:47 +0900 Subject: [PATCH 44/44] =?UTF-8?q?=E5=8F=82=E8=80=83=E6=83=85=E5=A0=B1?= =?UTF-8?q?=E3=81=AE=E9=83=A8=E5=88=86=E3=82=92=E6=95=B4=E7=90=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../labs/visualization/2020-06-13-different-types-of-graphs.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/content/labs/visualization/2020-06-13-different-types-of-graphs.md b/content/labs/visualization/2020-06-13-different-types-of-graphs.md index e1caf54..d6542cf 100644 --- a/content/labs/visualization/2020-06-13-different-types-of-graphs.md +++ b/content/labs/visualization/2020-06-13-different-types-of-graphs.md @@ -485,8 +485,11 @@ chart=true ## 参考 + +### 参考リンク - [Chart.jsでグラフを描画してみた - Qiita](https://qiita.com/Haruka-Ogawa/items/59facd24f2a8bdb6d369#3-2-%E6%A3%92%E3%82%B0%E3%83%A9%E3%83%95) - [ChartJS stacked line chart](https://codepen.io/natenorberg/pen/WwqRar) +### 書籍情報
グラフをつくる前に読む本［一瞬で伝わる表現はどのように生まれたのか］ Kindle版
posted with カエレバ
Amazon.co.jpで詳細を見る