canvas实现自组织映射Self-organizing Map聚类算法可视化过程代码-html代码-BFW代码库

canvas实现自组织映射Self-organizing Map聚类算法可视化过程代码

代码语言：html

所属分类：其他

代码描述：canvas实现自组织映射Self-organizing Map聚类算法可视化过程代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html lang="en-us">

<head>
    <meta charset="utf-8">


</head>

<body>



    <div class="center">
        <article>
            <div class="social">

            </div>
            <h1 class="title">Self-Organizing Map</h1>


            <div class="content">
                <div>
                    <p>A visualization of a <a href="http://en.wikipedia.org/wiki/Self-organizing_map">Self-Organizing Map</a>.</p>
                    <style>
                        .post {
                            max-width: none;
                            width: 640px;
                            padding: 0;
                        }
                    </style>
                    <div>
                        <button onclick="doStep()">Step</button>
                        <button onclick="run()">Run</button>
                        <button onclick="stop()">Stop</button>
                        <button onclick="reset()">Reset</button>
                    </div>
                    <div style="margin-bottom:20px;">
                        <input id="data" value="200"></input>
                        <input id="nodes" value="50"></input>
                        <input id="range" value="10"></input>
                    </div>
                    <p><canvas id="canvas"></canvas></p>
                    <script>
                        var size = {x: 640, y:480};
                        var canvas = document.getElementById("canvas");
                        canvas.width = size.x;
                        canvas.height = size.y;
                        var TAU = Math.PI*2;
                        var draw = canvas.getContext("2d");
                        
                        var stepInterval = 0;
                        var state = {
                        	data : [], 
                        	nodes : [],
                        	buckets : [],
                        	lastData : 0,
                        	lastNodes: 0, 
                        	rate : 1.0, 
                        	range: 10,
                        	tick : 0 };
                        
                        function clone(obj){
                        	var res = {};
                        	for(var i in obj)
                        		if(typeof(obj[i]) == "object")
                        			res[i] = clone(obj[i])
                        		else
                        			res[i] = obj[i];
                        	return res;
                        }
                        
                        function stop(){
                        	clearInterval(stepInterval);
                        }
                        
                        function inputValue(inp){
                        	return parseInt(document.getElementById(inp).value);
                        }
                        
                        function reset(){
                        	state.tick = 0;
                        	state.rate = 1;
                        	state.data = generateData(inputValue("data"), 3, 255);
                        	state.nodes = generateData(inputValue("nodes"), 3, 255);
                        	state.range = inputValue("range");
                        	recalcBuckets();
                        	render(state);
                        }
                        function run(){
                        	stop();
                        	stepInterval = setInterval(doStep, 33);
                        }
                        
                        function toRgba(v){
                        	return "rgba(" + (v[0]|0) + "," + (v[1]|0) + "," + (v[2]|0) + ", 0.8)" ;
                        }
                        
                        function renderDataArray(data, x,y,w,h, chosen){
                        	var dx = w / data.length,
                        		cx = x + chosen * dx;
                        	for(var i = 0; i < data.length; i += 1){
                        		var v = data[i];
                        		draw.fillStyle = toRgba(v);
                        		draw.fillRect(x,y,dx,h);
                        		x += dx;
                        	}
                        
                        	draw.fillStyle = "rgba(255,0,0,0.5)";
                        	draw.lineWidth = 2;
                        	draw.beginPath();
                        	draw.fillRect(cx-2, y-4, dx+4, 8);
                        	draw.stroke();
                        }
                        
                        function renderBuckets(buckets, x,y,w,h){
                        	var mxBuckets = 1;
                        	for(var i = 0; i < buckets.length; i += 1)
                        		mxBuckets = Math.max(mxBuckets, buckets[i].length);
                        
                        	var dx = w / buckets.length,
                        		dy = h / mxBuckets;
                        	for(var i = 0; i < buckets.length; i += 1){
                        		var bucket = buckets[i],
                        			ty = y;
                        		for(k = 0; k < bucket.length; k += 1){
                        			var v = bucket[k];
                        			draw.fillStyle = toRgba(v);
                        			draw.fillRect(x,ty,dx,dy);
                        .........完整代码请登录后点击上方下载按钮下载查看