dev001hajipro/CodingChallenge40_WordCounter.html

## CodingChallenge40_WordCounter.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CodingChallenge40_WordCounter</title>
</head>
<body>
    <h1>Word Counter</h1>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.8/p5.js"></script>
<script>
let keys = []; // unique set.
let counts = [];

function getx(doRender) {
    httpGet(
        'http://natureofcode.com/book/chapter-3-oscillation/',
        "txt",
        function(resp) {
                let parser = new DOMParser();
                let doc = parser.parseFromString(resp, "text/html");

                //document.getElementById('debugarea').innerHTML = doc.body.textContent;
                // \wは英数字、\Wはそれ以外の文字列にヒット
                // つまり、各種記号で分割.
                let tokens = doc.body.textContent.split(/\W+/);

                tokens
                    .map((s)=> s.toLowerCase())
                    .filter((v) => /^[a-z]+/.test(v))
                    .forEach((s)=> {
                        if (counts[s] === undefined) {
                            counts[s]=1;
                            keys.push(s);
                        } else {
                            counts[s]=counts[s]+1;
                        }
                    });

                keys.sort((a,b)=> counts[a] - counts[b]);

                // render
                let fragment = document.createDocumentFragment();
                for (let i = 0; i < keys.length; i++) {
                    let span = document.createElement('div');
                    const key = keys[i];
                    span.innerHTML = key + " " + counts[key];
                    fragment.appendChild(span);
                }
                const outputEl = document.getElementById('debugarea');
                //outputEl.appendChild(fragment);
                doRender && doRender(keys, counts);
        },
        function(err) {
            console.log(err);
        });
}

function setup() {
    createCanvas(854, 480);
    background(0);

    fill(150);

    getx((keys, counts)=>{
        for (let i = 0; i < keys.length; i++) {
            fill(color(random(255),random(255),random(255),));
            textSize(map(counts[keys[i]], 1, 300, 10, 144));
            text(keys[i], random(width), random(height));
        }
    });
}
</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>CodingChallenge40_WordCounter</title>
	</head>
	<body>
	<h1>Word Counter</h1>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.8/p5.js"></script>
	<script>
	let keys = []; // unique set.
	let counts = [];

	function getx(doRender) {
	httpGet(
	'http://natureofcode.com/book/chapter-3-oscillation/',
	"txt",
	function(resp) {
	let parser = new DOMParser();
	let doc = parser.parseFromString(resp, "text/html");

	//document.getElementById('debugarea').innerHTML = doc.body.textContent;
	// \wは英数字、\Wはそれ以外の文字列にヒット
	// つまり、各種記号で分割.
	let tokens = doc.body.textContent.split(/\W+/);

	tokens
	.map((s)=> s.toLowerCase())
	.filter((v) => /^[a-z]+/.test(v))
	.forEach((s)=> {
	if (counts[s] === undefined) {
	counts[s]=1;
	keys.push(s);
	} else {
	counts[s]=counts[s]+1;
	}
	});

	keys.sort((a,b)=> counts[a] - counts[b]);

	// render
	let fragment = document.createDocumentFragment();
	for (let i = 0; i < keys.length; i++) {
	let span = document.createElement('div');
	const key = keys[i];
	span.innerHTML = key + " " + counts[key];
	fragment.appendChild(span);
	}
	const outputEl = document.getElementById('debugarea');
	//outputEl.appendChild(fragment);
	doRender && doRender(keys, counts);
	},
	function(err) {
	console.log(err);
	});
	}

	function setup() {
	createCanvas(854, 480);
	background(0);

	fill(150);

	getx((keys, counts)=>{
	for (let i = 0; i < keys.length; i++) {
	fill(color(random(255),random(255),random(255),));
	textSize(map(counts[keys[i]], 1, 300, 10, 144));
	text(keys[i], random(width), random(height));
	}
	});
	}
	</script>
	</body>
	</html>