2018年5月2日水曜日

プログラミング学習:各国の女性の平均就学期間をグラフ化する。(python,pandas)

前回の続き、edx UCバークレー データサイエンス基礎講座:pythonによるプログラミング的思考 week1の課題です。

各国の25歳以上の女性の平均就学期間をグラフ化する。
・1970年と2009年の比較
・1970年の平均就学期間が大きい順に横向き棒グラフにする。

データはこちら↓
Gapminder Data
https://www.gapminder.org/data/
Mean years in school (women 25 years and older)
https://docs.google.com/spreadsheets/d/1kmnYQzXLGVF9RbKB3Y-WuUsJFumnE4s2UWdmlskv6r4/pub

200ヶ国の1970年から2009年までの25歳以上の女性の平均就学期間のデータです。
データをweb上から取得するところまでは前回書きました。

プログラミング学習:pandasでweb上の表を取得する。(python)
https://eneprog.blogspot.com/2018/04/pandaswebpython.html

まずは必要なモジュールの読み込み。pandasのほか、matplotlibもインポートします
import pandas as pd
import matplotlib
import matplotlib.pyplot as plt

read_htmlでweb上の表を取得。
df_tmp = pd.read_html("https://docs.google.com/spreadsheets/d/1kmnYQzXLGVF9RbKB3Y-WuUsJFumnE4s2UWdmlskv6r4/pub#",header=0)

取得した最初の表をschoolとして保存し、不要な列を除去。ここまでが前回記載分。
school=df_tmp[0]
school=school.drop("1",axis=1)
school.head()
Row Labels197019711972197319741975197619771978...2000200120022003200420052006200720082009
0Afghanistan0.00.10.10.10.10.10.10.10.1...0.20.30.30.30.30.30.30.30.30.4
1Albania3.94.04.14.24.34.54.64.74.8...8.08.28.38.58.68.88.99.19.29.4
2Algeria0.60.60.60.70.70.80.80.90.9...3.03.13.23.43.53.63.83.94.04.2
3Angola0.50.50.50.50.60.60.60.70.7...1.92.02.12.22.32.42.52.62.72.8
4Antigua and Barbuda7.07.17.27.47.57.77.88.08.1...11.211.411.511.611.711.811.912.012.112.2


"Row Labels"をindex(行名)に指定。
school=school.set_index("Row Labels")
school.head()
1970197119721973197419751976197719781979...2000200120022003200420052006200720082009
Row Labels
Afghanistan0.00.10.10.10.10.10.10.10.10.1...0.20.30.30.30.30.30.30.30.30.4
Albania3.94.04.14.24.34.54.64.74.84.9...8.08.28.38.58.68.88.99.19.29.4
Algeria0.60.60.60.70.70.80.80.90.91.0...3.03.13.23.43.53.63.83.94.04.2
Angola0.50.50.50.50.60.60.60.70.70.7...1.92.02.12.22.32.42.52.62.72.8
Antigua and Barbuda7.07.17.27.47.57.77.88.08.18.3...11.211.411.511.611.711.811.912.012.112.2

set_indexで特定の列をindex(行名)に設定できます。
データを見るために、1970年の女性の就学期間が長い順に並べ変えてみます。

1970年の値が大きい順に並べ替え
school.sort_values(by="1970",ascending=False)[:10]
1970197119721973197419751976197719781979...2000200120022003200420052006200720082009
Row Labels
United States11.011.111.211.311.411.511.611.711.811.9...13.313.313.413.413.413.513.513.613.613.7
Czech Rep.8.88.99.19.39.59.69.89.910.110.2...12.612.712.712.812.913.013.113.113.213.3
Canada8.78.99.19.39.59.79.910.110.310.5...13.513.613.613.713.813.914.014.114.114.2
Australia8.48.58.68.78.88.99.09.19.29.3...10.911.011.111.111.211.311.311.411.411.5
United Kingdom8.38.48.68.89.09.19.39.59.69.8...12.212.312.412.512.612.712.812.812.913.0
Japan8.28.38.58.68.78.88.99.09.19.2...11.411.511.611.711.811.912.012.012.112.2
Denmark7.98.18.38.58.68.89.09.19.39.5...12.112.112.212.312.412.512.612.712.712.8
Switzerland7.47.67.88.08.28.48.68.89.09.1...11.912.012.112.212.312.312.412.512.612.6
Georgia7.47.57.77.88.08.18.38.48.68.7...11.611.711.811.912.012.112.212.312.412.5
Poland7.37.57.67.87.98.18.38.48.68.7...11.511.611.711.811.912.012.112.212.312.4

sort_values byで値順に並べ替え、ascending=Falseで降順を指定します。[:10]で上位10ヶ国(0-9行)を抽出しています。

1970年の女性の平均就学期間はアメリカが11.0年で1位。2位のチェコの8.8年を大きく引き離しています。日本は8.2年で6位。

完全一致で行抽出。
school[school.index=="China"]
1970197119721973197419751976197719781979...2000200120022003200420052006200720082009
Row Labels
China1.21.31.41.41.51.61.71.81.92.0...4.85.05.15.35.55.75.96.06.26.4

.index==""で、indexと完全一致した行を取り出します。
中国は1970年で女性の平均就学期間は1.2年。2009年でも6.4年となっています。

部分一致で行抽出
school[school.index.str.contains("Korea")]
1970197119721973197419751976197719781979...2000200120022003200420052006200720082009
Row Labels
Korea, Rep.4.85.05.15.35.55.75.96.16.36.5...10.410.610.811.011.111.311.411.611.811.9

"Korea"は完全一致指定では抽出できなかったので、部分一致(.str.contains)で抽出しました。("Korea"ではなく、"Korea,Rep."と表記されていたため)
韓国は1970年から2009年で女性の就学期間は4.8年から11.8年に伸びています。

グラフ化
school.sort_values(by='1970').plot.barh(y=["1970","2009"],figsize=(5,50))
plt.legend(loc='upper left',bbox_to_anchor=(1, 1))

いよいよグラフ描画。sort_valuesで1970年の値で並べ替え、barhは横向き棒グラフ、yはy軸に描く項目(1970年と2009年)、figsizeでグラフの大きさを指定しています。indexを項目軸にする場合は省略できます(xを省略)。

plt.legendは凡例の表示形式で、loc=upper leftで凡例の左上角を、bbox_to_anchor(グラフの角)にそろえます。bbox_to_anchorは(0,0)でグラフ左下、(1,1)で右上です。この場合は、凡例の左上角をグラフエリアの右上と合わせるので、グラフの外側、右上に凡例が表示されます。

凡例の表示位置については下記の記事が大変参考になりました。

matplotlibでの凡例(ラベル)の表示場所・形式を変更する
http://paper.hatenadiary.jp/entry/2017/05/02/152223

出力


グラフが出来ました。各国で1970年に比べて2009年では女性の平均就学期間が長くなっていますが、まだまだ低い国もあります。アフガニスタンは2009年でも0.4年となっています。今はもっと伸びているのでしょうか。


参考:
edx UC Berkeley Foundations of Data Science(UCバークレー データサイエンス基礎講座)
ttps://www.edx.org/professional-certificate/berkeleyx-foundations-of-data-science
Computational Thinking with Python(pythonによるプログラミング的思考)
https://www.edx.org/course/foundations-data-science-computational-uc-berkeleyx-data8-1x

PythonでPandasのPlot機能を使えばデータ加工からグラフ作成までマジでシームレス
https://qiita.com/hik0107/items/de5785f680096df93efa
ゼロから始めるPython Jupyterでいろいろなグラフを描画しよう
https://news.mynavi.jp/article/zeropython-4/
matplotlibでの凡例(ラベル)の表示場所・形式を変更する
http://paper.hatenadiary.jp/entry/2017/05/02/152223

プログラミング学習:edx UCバークレー データサイエンス基礎講座の紹介(python)
https://eneprog.blogspot.com/2018/04/edx-uc-python.html
プログラミング学習:pandasでweb上の表を取得する。(python)
https://eneprog.blogspot.com/2018/04/pandaswebpython.html

2018年5月1日火曜日

blogger でコードを表示する(改)SyntaxHighlighter CDNjs利用

前回、blogger でコードを表示する。SyntaxHighlighterカスタマイズ(python表示例)という記事を書きましたが、作者のHPから直リンクするとどうも不安定なので、CDNjsを利用することにしました。

CDNjs SyntaxHighlighter
https://cdnjs.com/libraries/SyntaxHighlighter

上記ページからURLを取得し書き換えます。
必要なファイルはこちら↓

shCore.css
shCore.js
選択したテーマ.css(shCoreDefault.cssなど)
言語ファイル.js(shBrushPython.js、shBrushJava.jsなど複数選択可)

ついでに表示スタイルも少し変更し、下記のようになりました。

<!-- SyntaxHighlighter  -->
//SyntaxHighlighter CDNjs https://cdnjs.com/libraries/SyntaxHighlighterより

<link href='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCoreDefault.css' rel='stylesheet' type='text/css'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.js' type='text/javascript'/>

// 対応言語
<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushCss.js' type='text/javascript'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushJava.js' type='text/javascript'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPlain.js' type='text/javascript'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPython.js' type='text/javascript'/>

<script language='javascript' type='text/javascript'>

SyntaxHighlighter.config.bloggerMode = true; // Blogger対応
SyntaxHighlighter.defaults['toolbar'] = false; // "?"表示
SyntaxHighlighter.defaults['auto-links'] = false; // 自動リンク
SyntaxHighlighter.defaults['tab-size'] = 2; //tabインデント量
SyntaxHighlighter.all();
</script>

<style>
.syntaxhighlighter {
  padding: 0.3em !important; /* 上下空き */
  width: calc(100% - 2em) !important; /* 幅調整 */
  background-color: #f7f7f7 !important; /* 背景色 コード背景色も変更が必要 */
  border: 1px solid #bbbbbb !important; /* ボーダー線 */
  margin: 0.3em 0 0.3em 0 !important;

  -webkit-border-radius: 2px !important; /* 角丸 */
  -moz-border-radius: 2px !important;
  -ms-border-radius: 2px !important;
  -o-border-radius: 2px !important;
  border-radius: 2px !important;
}

.syntaxhighlighter .line.alt1 {
  background-color:  #f7f7f7 !important; /* コード偶数行背景色 */
}
.syntaxhighlighter .line.alt2 {
  background-color:  #f7f7f7 !important; /* コード奇数行背景色 */
}

.syntaxhighlighter .comments, .syntaxhighlighter .comments a{
    color:  #008200 !important; /* コメント色 */
//    font-style: oblique; /*斜体にする場合*/
}

.syntaxhighlighter .value {
  color:  rgb(0, 153, 0) !important; /* 代入数字色 */
}
.syntaxhighlighter .keyword {
  font-weight: bold !important;
  color: rgb(0, 102, 153) !important; /* キーワード色 */
}

.syntaxhighlighter .string {
    color: blue !important; /* 代入文字色 */
}

.syntaxhighlighter .functions {
    color: rgb(255, 20, 147) !important; /* 関数文字色 */
}

.syntaxhighlighter .plain {
    color:  #666666 !important; /* プレーンテキスト色 */
}

</style>
<!-- SyntaxHighlighter  -->

スタイルでマージン、角丸の大きさ、プレーンテキストの色などを変えて少しすっきりさせました。今のところ上手く動いているようで、 スマホでも表示されるようになり、bloggerのプレビューでも表示されています。

設置方法、使い方などは前回記事をご参照ください。

参考;
SyntaxHighlighter
http://alexgorbatchev.com/SyntaxHighlighter/
SyntaxHighlighter 対応言語
http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/
SyntaxHighlighter テーマ
http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/

CDNjs SyntaxHighlighter
https://cdnjs.com/libraries/SyntaxHighlighter

blogger でコードを表示する。SyntaxHighlighterカスタマイズ(python表示例)
https://eneprog.blogspot.com/2018/04/blogger-syntaxhighlighter.html
前回記事

試行錯誤な日々:Bloggerでsyntax highlightを使う方法
http://asukiaaa.blogspot.jp/2016/12/bloggersyntax-highlight.htm
1研究中:Bloggerでソースコードを貼り付ける(改改)
http://1studying.blogspot.jp/2017/04/blogger_93.html

//SyntaxHighlighter CDNより https://cdnjs.com/libraries/SyntaxHighlighter // 対応言語