日本のワクチン接種回数の表を作成 (Our World)

[Our World in Data](https://ourworldindata.org/covid-vaccinations?country=Japan)　のデータを使って次の表を作成します。
![ourworld.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/179446/6dada327-efc6-9d6d-5764-0c8d31ee029e.png)


データの取得

```bash
wget https://github.com/owid/covid-19-data/raw/master/public/data/vaccinations/vaccinations.json
```

日本のデータのみに変換

```bash
./pick_japan.js vaccinations.json vaccinations_japan.json
```

```js:pick_japan.js
#! /usr/bin/node
// ---------------------------------------------------------------
//	pick_japan.js
//
//					May/22/2021
//
// ---------------------------------------------------------------
'use strict'

var fs = require("fs")
// ---------------------------------------------------------------
console.error ("*** 開始 ***")

const file_world=process.argv[2]
const file_japan=process.argv[3]
console.error (file_world)
console.error (file_japan)

const json_str = fs.readFileSync (file_world,'utf8')
const array_aa = JSON.parse (json_str)
console.error (array_aa.length)

var data_japan = {}
for (var it in array_aa)
	{
	const unit_aa = array_aa[it]
	if (unit_aa.country == "Japan")
		{
		console.log (unit_aa.country)
		data_japan = unit_aa
		}
	}

const json_out = JSON.stringify(data_japan)

fs.writeFile (file_japan,json_out,function (err)
	{
	if (err) {
		console.error ("Error on write: " + err)
		}
	else {
		console.log("File written.")
		console.error ("*** 終了 ***")
		}
	})
// ---------------------------------------------------------------
```

Web ページ

```html:index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="CONTENT-TYPE" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="vaccine_ourworld.css">
<title>日本のワクチン接種回数 (Our World)</title>
</head>
<body>
<blockquote>
<h2>日本のワクチン接種回数 (Our World)</h2><p />
</blockquote>
	<blockquote>
	<div class="contents"></div>
	</blockquote>
</blockquote>
<hr />
データソース<br />
	<blockquote>
	<a href="https://ourworldindata.org/covid-vaccinations?country=Japan">
Our World in Data</a><br />	
	</blockquote>

<a href="../">Return</a><p />
May/22/2020 AM 08:00<p />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="vaccine_ourworld.js"></script>
</body>
</html>
```

```js:vaccine_ourworld.js
// -----------------------------------------------------------------------
//	vaccine_ourworld.js
//
//					May/22/2021
//
// -----------------------------------------------------------------------
jQuery (function ()
{
	jQuery("#outarea_aa").text ("*** vaccine_daily *** start ***")

	const file_in = "./vaccinations_japan.json"

	jQuery.getJSON (file_in,function (dict_aa)
		{
		create_table_proc(dict_aa["data"])
		})

	jQuery("#outarea_hh").text ("*** vaccine_daily *** end ***")
})

// -----------------------------------------------------------------------
function create_table_proc(data_aa)
{
		var str_out = ""
		str_out += "<table>"
		str_out += "<tr>"
		str_out += "<th>No</th>"
		str_out += "<th>接種日</th>"
		str_out += "<th>総接種回数</th>"
		str_out += "<th>接種回数</th>"
		str_out += "<th>接種者比率 (%)</th>"
		str_out += "</tr>"

		var count = 1
		const llx = data_aa.length
		for (var it in data_aa)
			{
			jt = llx -1 - it
			const unit_aa = data_aa[jt]
	const total = pick_value_proc(unit_aa,"total_vaccinations")
	const raw = pick_value_proc(unit_aa,"daily_vaccinations_raw")
	const percent = pick_value_proc(unit_aa,"people_vaccinated_per_hundred")

			str_out += "<tr>"
			str_out += "<td>" + count + "</td>"
			str_out += "<td>" + unit_aa["date"] + "</td>"
			str_out += "<td>" + total + "</td>"
			str_out += "<td>" + raw + "</td>"
			str_out += "<td>" + percent + "</td>"
			str_out += "</tr>"

			count += 1
			}

		str_out += "</table>"

		jQuery(".contents").html (str_out)
}

// -----------------------------------------------------------------------
function pick_value_proc(unit_aa,key)
{
	var rvalue = "-----"
	if (key in unit_aa)
		{
		rvalue = unit_aa[key]
		}

	return rvalue
}

// -----------------------------------------------------------------------
```

```css:vaccine_ourworld.css
/* -------------------------------------------------------------- */
/*

	vaccine_ourworld.css

						May/22/2021

*/
/* -------------------------------------------------------------- */
table.main,td,th {
table-layout:fixed;
border:1.5px #7e7e7e solid;
border-collapse: collapse;
height: 16px;
}

th {
	background: #c6c6c6;
}

/* -------------------------------------------------------------- */
```