y-uti/genhtml.sh

## genhtml.sh
#!/bin/bash
#
# ブログ記事 (https://y-uti.hatenablog.jp/entry/2016/01/07/154258) の結果から描画用の HTML を出力する bash スクリプトです。
#
# [準備]
# HTMLDIR を適当に変更して mkdir で作成しておく。
# DATADIR 以下に台風の軌跡データ (T0101.csv など各行が北緯,東経の csv ファイル) を置く。
# クラスタリングの出力結果 (kmedoids_result.txt) を次のように分割する。
#   $ head -n 1 kmedoids_result.txt | tr ' ' '\n' >indexes.txt
#   $ tail -n 1 kmedoids_result.txt | tr ' ' '\n' >medoids.txt
#
# [実行]
# このスクリプトを次のように実行する。
#   $ ./genhtml.sh indexes.txt medoids.txt
# HTMLDIR に typhoon-[0-4].html が出力されます (数字はクラスタ番号)。

BASEDIR=$(cd $(dirname $0) && pwd)
HTMLDIR=$BASEDIR/html
DATADIR=$HTMLDIR/data-JMA

function header {
cat <<EOS
<!DOCTYPE html>
<meta charset="utf-8">

<head>
<style>

svg {
    border: 1px solid #000;
}

.graticule {
    fill: none;
    stroke: #777;
    stroke-width: .5px;
    stroke-opacity: .5;
}

.land {
    fill: #333;
}

.boundary {
    fill: none;
    stroke: #fff;
    stroke-width: .5px;
}

.trajectory {
    fill: none;
    stroke-width: 1px;
}

</style>
</head>

<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js"></script>
<script>

d3.json("https://unpkg.com/world-atlas@1/world/110m.json", function (error, json) {
    draw(json);
});

function draw(json) {

    var width  = 480;
    var height = 300;

    var projection = d3.geo.conicConformal()
        .rotate([-135, -28])
        .scale(300)
        .translate([width / 2, height / 2]);

    var path = d3.geo.path().projection(projection);

    var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height);

    svg.append("path")
        .datum(d3.geo.graticule())
        .attr("class", "graticule")
        .attr("d", path);

    svg.insert("path", ".graticule")
        .datum(topojson.feature(json, json.objects.countries))
        .attr("class", "land")
        .attr("d", path);

    svg.insert("path", ".graticule")
        .datum(topojson.mesh(json, json.objects.countries, function (a, b) { return a !== b; }))
        .attr("class", "boundary")
        .attr("d", path);

EOS
}

function footer {
cat <<EOS

    function drawTrajectory(csvfile, strokecolor) {
        d3.text(csvfile, function (error, text) {
            var coordinates = d3.csv.parseRows(text, function (d) {
                return [+d[1], +d[0]];
            });
            svg.append("path")
                .datum({"type": "LineString", "coordinates": coordinates})
                .attr("class", "trajectory")
                .attr("stroke", strokecolor)
                .attr("d", path);
        });
    }
}

</script>
</body>
EOS
}

if [ $# -lt 2 ]; then
    echo "Usage: $0 indexfile medoidfile"
    exit 1
fi

INDEXES=$1
if [ ! -f "$INDEXES" ]; then
    echo "$INDEXES not found"
    exit 1
fi

MEDOIDS=$2
if [ ! -f "$MEDOIDS" ]; then
    echo "$MEDOIDS not found"
    exit 1
fi

i=0
cat $MEDOIDS | while read medoid; do
    htmlfile=$HTMLDIR/typhoon-$i.html
    header >$htmlfile
    ls -1 $DATADIR | paste $INDEXES - | awk -v m=$medoid -v i=$i '
        $1 == i {
            color = NR == m + 1 ? "#f00" : "#00f";
            printf("    drawTrajectory(\"data-JMA/%s\", \"%s\");\n", $2, color);
        }
    ' >>$htmlfile
    footer >>$htmlfile
    i=$(($i + 1))
done
	#!/bin/bash
	#
	# ブログ記事 (https://y-uti.hatenablog.jp/entry/2016/01/07/154258) の結果から描画用の HTML を出力する bash スクリプトです。
	#
	# [準備]
	# HTMLDIR を適当に変更して mkdir で作成しておく。
	# DATADIR 以下に台風の軌跡データ (T0101.csv など各行が北緯,東経の csv ファイル) を置く。
	# クラスタリングの出力結果 (kmedoids_result.txt) を次のように分割する。
	# $ head -n 1 kmedoids_result.txt \| tr ' ' '\n' >indexes.txt
	# $ tail -n 1 kmedoids_result.txt \| tr ' ' '\n' >medoids.txt
	#
	# [実行]
	# このスクリプトを次のように実行する。
	# $ ./genhtml.sh indexes.txt medoids.txt
	# HTMLDIR に typhoon-[0-4].html が出力されます (数字はクラスタ番号)。

	BASEDIR=$(cd $(dirname $0) && pwd)
	HTMLDIR=$BASEDIR/html
	DATADIR=$HTMLDIR/data-JMA

	function header {
	cat <<EOS
	<!DOCTYPE html>
	<meta charset="utf-8">

	<head>
	<style>

	svg {
	border: 1px solid #000;
	}

	.graticule {
	fill: none;
	stroke: #777;
	stroke-width: .5px;
	stroke-opacity: .5;
	}

	.land {
	fill: #333;
	}

	.boundary {
	fill: none;
	stroke: #fff;
	stroke-width: .5px;
	}

	.trajectory {
	fill: none;
	stroke-width: 1px;
	}

	</style>
	</head>

	<body>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js"></script>
	<script>

	d3.json("https://unpkg.com/world-atlas@1/world/110m.json", function (error, json) {
	draw(json);
	});

	function draw(json) {

	var width = 480;
	var height = 300;

	var projection = d3.geo.conicConformal()
	.rotate([-135, -28])
	.scale(300)
	.translate([width / 2, height / 2]);

	var path = d3.geo.path().projection(projection);

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height);

	svg.append("path")
	.datum(d3.geo.graticule())
	.attr("class", "graticule")
	.attr("d", path);

	svg.insert("path", ".graticule")
	.datum(topojson.feature(json, json.objects.countries))
	.attr("class", "land")
	.attr("d", path);

	svg.insert("path", ".graticule")
	.datum(topojson.mesh(json, json.objects.countries, function (a, b) { return a !== b; }))
	.attr("class", "boundary")
	.attr("d", path);

	EOS
	}

	function footer {
	cat <<EOS

	function drawTrajectory(csvfile, strokecolor) {
	d3.text(csvfile, function (error, text) {
	var coordinates = d3.csv.parseRows(text, function (d) {
	return [+d[1], +d[0]];
	});
	svg.append("path")
	.datum({"type": "LineString", "coordinates": coordinates})
	.attr("class", "trajectory")
	.attr("stroke", strokecolor)
	.attr("d", path);
	});
	}
	}

	</script>
	</body>
	EOS
	}

	if [ $# -lt 2 ]; then
	echo "Usage: $0 indexfile medoidfile"
	exit 1
	fi

	INDEXES=$1
	if [ ! -f "$INDEXES" ]; then
	echo "$INDEXES not found"
	exit 1
	fi

	MEDOIDS=$2
	if [ ! -f "$MEDOIDS" ]; then
	echo "$MEDOIDS not found"
	exit 1
	fi

	i=0
	cat $MEDOIDS \| while read medoid; do
	htmlfile=$HTMLDIR/typhoon-$i.html
	header >$htmlfile
	ls -1 $DATADIR \| paste $INDEXES - \| awk -v m=$medoid -v i=$i '
	$1 == i {
	color = NR == m + 1 ? "#f00" : "#00f";
	printf(" drawTrajectory(\"data-JMA/%s\", \"%s\");\n", $2, color);
	}
	' >>$htmlfile
	footer >>$htmlfile
	i=$(($i + 1))
	done