数据可视化课程内容总结

最新推荐文章于 2023-08-03 08:00:00 发布

星空下码代码

最新推荐文章于 2023-08-03 08:00:00 发布

阅读量307

点赞数

本文链接：https://blog.csdn.net/weixin_44598933/article/details/117340065

版权

基于 JavaScript 和 SVG 的绘图

直方图

<body>
    <svg id="mySVG" width="800" height="600" version="1.1" xmlns=""></svg>
	<script type="text/javascript">
		var mysvg = document.getElementById("mySVG");
        var rec= new Array();
		for(var i=0;i<6;i++){
			rec[i] = document.createElement("rect");
			mysvg.appendChild(rec[i]);
			var h=Math.random()*300;
            //rec[i].outerHTML="<rect x="+(20+80*i)+" y="+(400-h)+" width=70 height="+h+" style='fill:red'/>";
			//rec[i].outerHTML="<rect x="+(60*i)+" y="+(400-h)+" width=55 height="+h+" style='fill:rgb(0,0,255)'/>";
			//rec[i].outerHTML="<rect x="+(60*i)+" y="+(400-h)+" width=55 height="+h+" style='fill:rgb(0,0,"+Math.floor(h)+")'/>";
			var r=Math.floor(Math.random()*255);
            var g=Math.floor(Math.random()*255);
            var b=Math.floor(Math.random()*255);
			rec[i].outerHTML="<rect x="+(45*i)+" y="+(400-h)+" width=42 height="+h+" style='fill:rgb("+r+","+g+","+b+")'/>";

		}
	</script>
</body>

树状词云

<svg id="mySvg" width=800 height=600 ></svg>
		<script>
			var w=window.innerWidth|| document.documentElement.clientWidth|| document.body.clientWidth;
			var h=window.innerHeight|| document.documentElement.clientHeight|| document.body.clientHeight;
			var mysvg = document.getElementById("mySvg");
			mysvg.setAttribute("width",w*0.96);
			mysvg.setAttribute("height",h*0.99);
			
			var rate=0.7;
			var x0=w/2;
			var y0=h;
			var count=7;
            var str="依依袅袅复青青";
			var fontsize=40;
			var length=str.length*fontsize;
			var iter=0
			function show(x0,y0,length,rate,a,count){
			    iter++;
				var x1=x0;
				var y1=y0;
				fontsize=count*3;
				length=str.length*fontsize;
				var x2=x1+length*Math.cos(a);
				var y2=y1+length*Math.sin(a);
				var myText=document.createElement("text");
				mysvg.appendChild(myText);
				//myText.outerHTML="<text x="+(x1)+" y="+y1+" style='fill:green;font-size:"+(count*2)+"' rotate=90 >"+str+"</text>";
				//myText.outerHTML="<text x="+(x1)+" y="+y1+" style='fill:green;font-size:"+(count*2)+"' transform='rotate(90,"+x1+","+y1+")' >"+str+"</text>";
				myText.outerHTML="<text id="+iter+" x="+(x1)+" y="+y1+
                  " style='fill:rgb(0,"+Math.floor(255*Math.random())+",0);font-size:"+(fontsize)+
                  "' transform='rotate("+(a*180/Math.PI)+","+x1+","+y1+")' >"+str+"</text>";						  
				var aL=a-Math.PI/4*(0.5+0.5*Math.random());
				var aR=a+Math.PI/4*(0.5+0.5*Math.random());
				if (count<=1){
					var myCircle=document.createElement("circle");
					mysvg.appendChild(myCircle);
					myCircle.outerHTML="<circle cx="+x1+" cy="+y1+" r="+(6*Math.random())+" fill='red'/>"
				}
				if(count>0){
					show(x2,y2,length*rate,rate,aL,count-1);
					show(x2,y2,length*rate,rate,aR,count-1);
				}
			}
			show(x0,y0,length,rate,-Math.PI/2,count);
			show(x0,y0,length,rate,-Math.PI*7/16,count);
			show(x0,y0,length,rate,-Math.PI*9/16,count);
		</script>
</body>

D3数据可视化基础

直方图

  <body>
	<script src="../d3.v3.min.js" charset="utf-8"></script> 
	<script>  
		
		var width=(window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth)*0.98;
		var height=(window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight)*0.9;
		var color = d3.scale.category10();

		var dataset =new Array(10);
		for (var i=0;i<dataset.length;i++){
			dataset[i]=height*Math.random();
		}
		var svg = d3.select("body")			//选择<body>
					.append("svg")			//在<body>中添加<svg>
					.attr("width", width)	//设定<svg>的宽度属性
					.attr("height", height);//设定<svg>的高度属性				
		//矩形所占的宽度（包括空白），单位为像素		
		var rectStep =width/dataset.length;
		//矩形所占的宽度（不包括空白），单位为像素
		var rectWidth =rectStep-10; 	
		var rect = svg.selectAll("rect")
						.data(dataset)		//绑定数据
						.enter()			//获取enter部分
						.append("rect")	    //添加rect元素，使其与绑定数组的长度一致
						.attr("x", function(d,i){		//设置矩形的x坐标
							return i * rectStep;
						})
						.attr("y", function(d){		//设置矩形的y坐标
							return height-d;
						})
						.attr("fill", function(i){
							return color(i);
						})
						.attr("width",rectWidth)		//设置矩形的宽度
						.attr("height",function(d){	//设置矩形的高度
							return d;
						});	
      var text = svg.selectAll("text")
				.data(dataset)			//绑定数据
				.enter()				//获取enter部分
				.append("text")			//添加text元素，使其与绑定数组的长度一致
				.attr("fill","green")
				.attr("font-size","24px")
				.attr("text-anchor","middle")
				.attr("x", function(d,i){
					return i * rectStep;
				})
				.attr("y", function(d){
					return height-d-26;
				})
				.attr("dx",rectWidth/2)
				.attr("dy","1em")
				.text(function(d){
					return Math.floor(d);
				});
						
	</script> 
  </body>

饼图

	<body>
		<script src="../d3.v4.min.js" charset="utf-8"></script>
		<script>	
		    var w=window.innerWidth|| document.documentElement.clientWidth|| document.body.clientWidth;
			var h=window.innerHeight|| document.documentElement.clientHeight|| document.body.clientHeight;
			var width = w*0.98;
			var height =h*0.96;
			var dataset = [["Chrome",39.49],["IE",29.06],["QQ",4.84],["2345",4.28],["搜狗高速",4.19],["猎豹",2.24],["其他",15.91]];
			var svg = d3.select("body")
						.append("svg")
						.attr("width", width)
						.attr("height", height);
			var pie = d3.pie()
						.value(function(d){return d[1];});
			var piedata = pie(dataset);
			var outerRadius = 150;	//外半径
			var innerRadius = 100;	//内半径，为0则中间没有空白
			var arc = d3.arc()	//弧生成器
						.innerRadius(innerRadius)	//设置内半径
						.outerRadius(outerRadius);	//设置外半径
			var color = d3.scaleOrdinal(d3.schemeCategory10);
			var arcs = svg.selectAll("g")
						  .data(piedata)
						  .enter()
						  .append("g")
						  .attr("transform","translate("+ (width/2) +","+ (height/2) +")");				
			arcs.append("path")//每个g元素都追加一个path元素用绑定到这个g的数据d生成路径信息
				.attr("fill",function(d,i){
					return color(i);
				})
				.attr("d",function(d){
					return arc(d);//将角度转为弧度（d3使用弧度绘制）
				});
		</script>
	</body>

力导向布局

	<body>
		<script src="../d3.v3.min.js"></script>
		<script>
		    var width=(window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth)*0.98;
		    var height=(window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight)*0.9;
			var color = d3.scale.category20();
			var force = d3.layout.force()
				.charge(-120)
				.linkDistance(200)
				.size([width, height]);
			var svg = d3.select("body").append("svg")
				.attr("width", width)
				.attr("height", height);
			d3.json("a.json", function(error, graph) {
				  console.log(graph);
				  force.nodes(graph.nodes)
					   .links(graph.links)
					   .start();
				  
				  var node = svg.selectAll(".node")
					  .data(graph.nodes)
					  .enter().append("circle")
					  .attr("class", "node")
					  .attr("r", 16)
					  .style("fill", function(d) { return color(d.group); })
					  .call(force.drag);
			      var link = svg.selectAll(".link")
					  .data(graph.links)
					  .enter().append("line")
					  .attr("class", "link")
					  .style("stroke-width", function(d) { return Math.sqrt(d.value); });
				  force.on("tick", function() {
					link.attr("x1", function(d) { return d.source.x; })
						.attr("y1", function(d) { return d.source.y; })
						.attr("x2", function(d) { return d.target.x; })
						.attr("y2", function(d) { return d.target.y; });

					node.attr("cx", function(d) { return d.x; })
						.attr("cy", function(d) { return d.y; });
				  });
				});

		</script>
	</body>

星空下码代码

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
数据可视化课程内容总结

基于 JavaScript 和 SVG 的绘图直方图<body> <svg id="mySVG" width="800" height="600" version="1.1" xmlns=""></svg> <script type="text/javascript"> var mysvg = document.getElementById("mySVG"); var rec= new Array(); for(var i
复制链接

扫一扫