kirjavascript/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.12/d3.min.js"></script>
    <script>
    var svg;

    var c = {
        w: window.innerWidth,
        h: window.innerHeight
    }

    var state = {
        palettes: [
            ["000000","000000","2222aa","2244cc","4444ee","6666ee","eeeeee","aaaaaa","888888","444444","eeaa88","aa6644","ee0000","880000","eeaa00","ee8800"],
            ["000000","220022","440044","660066","880088","aa00aa","cc00cc","ee00ee","cc00ee","aa00cc","8800aa","660088","440066","220044","000022","ee0000"],
            ["000000","222200","444400","666600","888800","aaaa00","cccc00","eeee00","eecc00","ccaa00","aa8800","886600","664400","442200","220000","00ee00"],
            ["000000","002222","004444","006666","008888","00aaaa","00cccc","00eeee","00eecc","00ccaa","00aa88","008866","006644","004422","002200","0000ee"]
        ]
    };

    window.addEventListener("load", e => {
        svg = d3.select("body").append("svg")
            .attr("width",c.w).attr("height",c.h)
            .attr("viewBox",[0,0,c.w,c.h].join(" "));


        var palettes = svg.selectAll('.pal')
            .data(state.palettes)

    palettes
        .enter()
        .append('g')
        .selectAll('.line')
            .data(d=>d)
            .enter()
            .append("rect")
            .attr({
                x:(d,i)=>25*i,
                y:(d,i,a)=>25*a,
                width:25,
                height:25,
                fill:d=>'#'+d,
            })

    })
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
	</head>
	<body>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.12/d3.min.js"></script>
	<script>
	var svg;

	var c = {
	w: window.innerWidth,
	h: window.innerHeight
	}

	var state = {
	palettes: [
	["000000","000000","2222aa","2244cc","4444ee","6666ee","eeeeee","aaaaaa","888888","444444","eeaa88","aa6644","ee0000","880000","eeaa00","ee8800"],
	["000000","220022","440044","660066","880088","aa00aa","cc00cc","ee00ee","cc00ee","aa00cc","8800aa","660088","440066","220044","000022","ee0000"],
	["000000","222200","444400","666600","888800","aaaa00","cccc00","eeee00","eecc00","ccaa00","aa8800","886600","664400","442200","220000","00ee00"],
	["000000","002222","004444","006666","008888","00aaaa","00cccc","00eeee","00eecc","00ccaa","00aa88","008866","006644","004422","002200","0000ee"]
	]
	};

	window.addEventListener("load", e => {
	svg = d3.select("body").append("svg")
	.attr("width",c.w).attr("height",c.h)
	.attr("viewBox",[0,0,c.w,c.h].join(" "));


	var palettes = svg.selectAll('.pal')
	.data(state.palettes)

	palettes
	.enter()
	.append('g')
	.selectAll('.line')
	.data(d=>d)
	.enter()
	.append("rect")
	.attr({
	x:(d,i)=>25*i,
	y:(d,i,a)=>25*a,
	width:25,
	height:25,
	fill:d=>'#'+d,
	})

	})
	</script>
	</body>
	</html>