数据可视化课程内容总结(小学期实践)

安装环境:

1.tomcat安装和配置教程:https://jingyan.baidu.com/article/870c6fc33e62bcb03fe4be90.html

2.任意编译器(甚至可以使用TXT文件),本博客推荐使用pycharm以及Visual Studio;

3.安装完成tomcat之后,在/webapps目录文件下创建一个新文件夹,本文创建的是vis2021文件夹

4.在之后的调试过程中,即通过使用浏览器输入127.0.0.1:8080/vis2021/文件名.html来进行实时的预览,另外可以通过右键浏览器检查代码。(通过课程学习,也明白了每完成一部分内容一定要进行一个实时的预览,检查对应模块是否报错)

5.推荐课程:http://cuc.yingshinet.com/ch11/(适合初学者入门)

js直方图

 


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p id="demo"></p>
<script>
    var w=window.innerWidth||document.documentElement.clientWidth ||document.body.clientWidth;
    var h=window.innerHeight;
    x=document.getElementById("demo")
</script>
<svg id="histSvg" width="1520" height="721" >
</svg>
<script>
    var hist=document.getElementById("histSvg");
    hist.setAttribute("width",w*0.9);
    hist.setAttribute("height",h*0.9);
    var length=200;
    var gdp=new Array(15056,27148,11708,32142,32985,19363,13123,11180,14733,11417,35730,9459,12204,24645,6742,18463,12843,23663,16143,14011,17211,9527,25558,16164,65473,57431,7972,13361,12695,12809,11567);
    var gdpName=new Array("河南省","山东省","四川省","广东省","江苏省","河北省","湖南省","安徽省","湖北省","广西省","浙江省","云南省","江西省","辽宁省","贵州省","黑龙江","陕西省","福建省","山西省","重庆市","吉林省","甘肃省","内蒙古","新疆区","上海市","北京市","天津市","海南省","宁夏区","青海省","西藏区");
    var myRect=new Array(31);
    var txt=new Array(31);
    var pname=new Array(31);
    var histWidth=Math.round(w/myRect.length)
    for(var i=0;i<31;i++){
        var rand=Math.round(gdp[i]/120);
        var hiscolorA=Math.round(Math.random()*255);
        var hiscolorB=Math.round(Math.random()*255);
        var hiscolorC=Math.round(Math.random()*255);
        console.log(i);
        myRect[i]=document.createElement("rect");
        txt[i]=document.createElement("text");
        pname[i]=document.createElement("text");
        hist.appendChild(myRect[i]);
        myRect[i].outerHTML="<rect x="+(i*histWidth)+" y="+(600-rand-20)+" width="+(histWidth)+" height="+rand+" style='fill:rgb("+(hiscolorA)+","+(hiscolorB)+","+(hiscolorC)+")'>"
        hist.appendChild(txt[i]);
        txt[i].outerHTML="<text x="+(i*histWidth)+" y="+(600-rand-20)+" fill='block'>"+gdp[i]+"</text>>";
        hist.appendChild(pname[i]);
        pname[i].outerHTML="<text x="+(i*histWidth)+" y="+600+" fill='block'>"+gdpName[i]+"</text>>";
    }
</script>
</body>
</html>

 二叉树

<html>
	
        <head>
            <meta charset="utf-8">
            <text style="font-family:Georgia;font-size:35;font-weight:bold">
				D3.js works<br>
			</text>
			<text style="font-family:华文中宋;font-size:20;font-weight:bold">
				yourname
			</text>
        </head>
	
	<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.9);
			mysvg.setAttribute("height",h*0.9);
			var length=250;
			rate=0.6;
			var x0=w/2;
			var y0=h;
			var count=10;
			function show(x0,y0,length,rate,a,count){
				var x1=x0;
				var y1=y0;
                length=length*(0.8+0.5*Math.random());
                var colorR=Math.floor(Math.random()*255);
                var colorG=Math.floor(Math.random()*255);
                var colorB=Math.floor(Math.random()*255);
				var x2=x1+length*Math.cos(a);
				var y2=y1+length*Math.sin(a);
				svgline= document.createElement("line");
				mysvg.appendChild(svgline);
				svgline.outerHTML="<line x1="+x1+" y1="+y1+" x2="+x2+" y2="+y2+"  style='stroke:rgb("+colorR+","+colorG+","+colorG+"); stroke-width:"+count+";' />";
				var aL=a-Math.PI/4*(0.5+0.7*Math.random());
				var aR=a+Math.PI/4*(0.5+0.7*Math.random());
				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/2,count);
            
		</script>
	</body>
</html>

文字树

<html>
	
        <head>
            <meta charset="utf-8">
        </head>
	
	<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);
			mysvg.setAttribute("height",h);

			var length=250;
			rate=0.6;
			var x0=w/2;
			var y0=h;
			var count=9;
            var str="柳暗花明又一村"
			function show(x0,y0,length,rate,a,count){
				var x1=x0;
				var y1=y0;
                var fontsize=count*1.5;
                length=str.length*fontsize;
				var x2=x1+length*Math.cos(a);
				var y2=y1+length*Math.sin(a);
				var colorR=Math.floor(Math.random()*255);
                var colorG=Math.floor(Math.random()*255);
                var colorB=Math.floor(Math.random()*255);

				var word= document.createElement("text");
				mysvg.appendChild(word);
				word.outerHTML="<text x="+x1+" y="+y1+"  transform='rotate("+a*180/Math.PI+","+x1+","+y1+")'  style='font-size:"+fontsize+";fill:rgb("+colorR+","+colorG+","+colorG+");' >主体是大他者的言说</text>";
				var aL=a-Math.PI/6*(0.5+0.5*Math.random());
				var aR=a+Math.PI/6*(0.5+0.5*Math.random());
				if(count>0){
					show(x2,y2,length,rate,aL,count-1);
					show(x2,y2,length,rate,aR,count-1);
					if(count==1){
						var apple=document.createElement("circle");
						mysvg.appendChild(apple);
						apple.outerHTML="<circle cx="+x2+" cy="+y2+" r="+4*Math.random()+" fill='rgb("+colorR+","+colorG+","+colorG+")'/>";

						
					}
				}
			}
			show(x0,y0,length,rate,-Math.PI/2,count);
			show(x0,y0,length,rate,-Math.PI/2.4,count);
			show(x0,y0,length,rate,-Math.PI/1.6,count);
            
		</script>
	</body>
</html>

D3直方图

<html>
     <head >
          <meta charset="utf-8">
          <text style="font-family:Georgia;font-size:35;font-weight:bold">
              D3直方图<br>
          </text>
      </head>
    <body>

        <script src="https://d3js.org/d3.v5.min.js"></script>
        <script>

            var datasize=new Array(10);

            var w=window.innerWidth|| document.documentElement.clientWidth|| document.body.clientWidth;
			var h=window.innerHeight|| document.documentElement.clientHeight|| document.body.clientHeight;
			w=w*0.98;
			h=h*0.9;
            for(var i=0;i<10;i++){
                datasize[i]=500*Math.random();
            }
            var color=d3.schemeCategory10;
            var svg=d3.select("body")
                      .append("svg")
                      .attr("width",w)
                      .attr("height",h);
            /*
            svg.append("rect")
               .attr("x",0)
               .attr("y",0)
               .attr("width",100)
               .attr("height",200);
            */
            svg.selectAll("rect")
               .data(datasize)
               .enter()
               .append("rect")


               .attr("x",function(d,i){
                    return i*(w/datasize.length);
               })
               .attr("y",function(d){
                    return h-d;
               })
               .attr("width",(w/datasize.length-10))
               .attr("height",function(d){
                    return d;
               })
               .attr("fill",function(d,i){
                    return color[i];
               });

               var text=svg.selectAll("text")
               .data(datasize)
               .enter()

               .append("text")
               .text(function(d,i){
                    return String(Math.floor(datasize[i]));
               })

               .attr("x",function(d,i){
                    return i*(w/datasize.length);
               })
               .attr("y",function(d){
                    return h-d;
               })
               .attr("width",(w/datasize.length-10))
               .attr("height",function(d){
                    return d;
               })
               .attr("fill",function(d,i){
                    return color[i];
               });



        </script>
    </body>
</html>

交互环图

<html>
    <head >
        <meta charset="utf-8">
        <text style="font-family:Georgia;font-size:35;font-weight:bold">
           交互环图<br>
        </text>
    </head>
    <body>

        <script src="https://d3js.org/d3.v5.min.js"></script>
        <script>

           
            var w=window.innerWidth|| document.documentElement.clientWidth|| document.body.clientWidth;
			var h=window.innerHeight|| document.documentElement.clientHeight|| document.body.clientHeight;
			w=w*0.98;
			h=h*0.9;
    
            var color=d3.schemeCategory10;
            // var dataset=[{startAngle:0,endAngle:Math.PI*0.5,outerRadius:147},
            //              {startAngle:Math.PI*0.5,endAngle:Math.PI*1,outerRadius:247},
            //              {startAngle:Math.PI*1,endAngle:Math.PI*1.5,outerRadius:186},
            //              {startAngle:Math.PI*1.5,endAngle:Math.PI*2.0,outerRadius:0}

            //             ]

            var dataset=[["Chrome",39.49],["IE",29.06],["QQ",4.84],["2345",4.28],["搜狗高速",4.19],["猎豹",2.24],["其他",15.91]];
            var pie=d3.pie()
                      .value(function(d){return d[1];})
                
            var piedata=pie(dataset);
            
            var arcPath=d3.arc()
                          .innerRadius(200)
                          .outerRadius(300);
            
            var svg=d3.select("body")
                      .append("svg")
                      .attr("width",w)
                      .attr("height",h);


            
            svg.selectAll("path")
               .data(piedata)
               .enter()
               .append("path")
               .attr("d",function(d,i){
                    return arcPath(d);
               })
               .attr("fill",function(d,i){
                    return color[i];
               })
               //.attr("stroke","black")
               .attr("transform","translate("+w/2+","+h/2+")")
               .on("mouseover",function(d,i){
                   d3.select(this)
                   .attr("fill", d3.rgb(color[i]).brighter());	
                svg.append("text")
				   .attr("id","info")
				   .attr("x",w/2)
				   .attr("y",h/2-25)
				   .attr("text-anchor","middle")
				   .attr("font-size",36)
				   .text(d.data[0]);
				svg.append("text")
				   .attr("id","value")
				   .attr("x",w/2)
				   .attr("y",h/2+25)
				   .attr("text-anchor","middle")
				   .attr("font-size",36)
				   .text(d.value+"%");
               
                })
                .on("mouseout",function(d,i){
                   d3.select(this)
                       .attr("fill",function(d){
                           return color[i];
                       });
                  d3.select("#info")
				    .remove();
				  d3.select("#value")
				    .remove();
                })

    var text=svg.selectAll("text")
                .data(piedata)
                .enter()
                .append("text")
                .attr("transform",function(d,i){
                    return "translate("+w/2+","+h/2+")"+"translate("+arcPath.centroid(d)+")";
                })
                .text(function(d,i){
                    return d.value;
                 })
                .attr("fill","black");
                

                




        </script>
    </body>
</html>

力导向图

<html>
    <head >
        <meta charset="utf-8">
        <text style="font-family:Georgia;font-size:35;font-weight:bold">
            简易力导向图<br>
        </text>
        <style>
              
			.node {
			  stroke: #fff;
			  stroke-width: 1.5px;
			}
			.link {
			  stroke: #999;
			  stroke-opacity: .6;
			}
		
          </style>
    </head>
    <body>
          
        <script src="https://d3js.org/d3.v3.min.js"></script>
        <script src="a.json"></script>
        <script>

           
            var width=window.innerWidth|| document.documentElement.clientWidth|| document.body.clientWidth;
			var height=window.innerHeight|| document.documentElement.clientHeight|| document.body.clientHeight;
			
    
            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>
</html>

人物关系图

<html>
  <head>
      <meta charset="utf-8">
	<title>
		《Breaking Bad》人物关系
	</title>
  </head>
  <body style=" opacity:1">
    <script src="https://d3js.org/d3.v3.min.js"></script>
	<script type="text/javascript">
		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  img_h=50;
		var  img_w=50;
		var  radius=10;

		var svg=d3.select("body")
                .append("svg")
                .attr("width",width)
                .attr("height",height);
				
		var nodes=[{name:"沃尔特.怀特",intro:"身患癌症的大学教授,后为家人走上制毒贩毒道路,成为大毒枭。"},
				{name:"汉克.施拉德",intro:"美国缉毒局特勤副主管,警务能力出众,他最终侦破海森堡毒品案。"},
				{name:"斯凯勒",intro:"沃尔特的妻子,同时是疼爱自己两个孩子的母亲,最后为了孩子的安全帮助沃尔特洗钱。"},
				{name:"杰西.平克曼",intro:"大学时期是沃尔特的学生,后成为制毒的伙伴,但本性善良,没有太多头脑。"},
				{name:"索尔.古德曼",intro:"油嘴滑舌的律师,后成为沃尔特和杰西的生意伙伴。"},
				{name:"古斯塔沃.弗林",intro:"表面是一个连锁炸鸡店的老板,实际拥有一个庞大的贩毒集团,也是沃尔特的最大敌人。"},
	            {name:"迈克.厄门绍特",intro:"以前是一名警察,后成为职业杀手,为古斯塔沃工作。"},
				{name:"玛丽.施拉德",intro:"汉克的妻子,斯凯勒的妹妹,得知沃尔特是毒贩与斯凯勒关系破裂。"}];

		var edges=[{source:0,target:1,relation:"姐夫"},{source:0,target:2,relation:"夫妻"},{source:0,target:3,relation:"师生&同伙"},
	           {source:0,target:4,relation:"生意伙伴"},{source:0,target:5,relation:"敌人"}, {source:0,target:7,relation:"姐夫"},
			   {source:1,target:7,relation:"夫妻"},{source:1,target:4,relation:"抓捕关系"},{source:1,target:5,relation:"抓捕关系"},
			   {source:2,target:7,relation:"姐妹"}, {source:3,target:4,relation:"生意往来"},{source:3,target:5,relation:"上下级&敌人"},
			   {source:3,target:6,relation:"上下级&伙伴"}, {source:5,target:6,relation:"上下级"}];

		var force=d3.layout.force()
                .nodes(nodes)
				.links(edges)
				.size([width,height])
				.linkDistance(150)
				.charge(-600)
                .start();

		//绘制
		var color=d3.scale.category20();
		var lines=svg.selectAll(".forceLine")
	             .data(edges)
				 .enter()
          	     .append("line")
				 .attr("class","forceLine")
				 .style("stroke","gray")
				 .style("opacity",0.4)
                 .style("stroke-width",1);
		var edges_text = svg.selectAll(".linetext")
                                .data(edges)
                                .enter()
                                .append("text")
                                .attr("class","linetext")
                                .text(function(d){
                                    return d.relation;})
								.style("stroke","gray")
								.style("font-size",8);
		var circles=svg.selectAll("forceCircle")
	               .data(nodes)
				   .enter()
				   .append("circle")
				   .attr("class","forceCircle")
				   .attr("r",function(d,i){return d.weight*2;})
				   .style("stroke","DarkGray")
				   .style("stroke-width","1.0px")
				   .attr("fill",function(d,i){return color(i);})
				   .call(force.drag);
	    var texts=svg.selectAll(".forceText")
                 .data(nodes)
				 .enter()
				 .append("text")
				 .attr("class","forceText")
				 .attr("x",function(d){return d.x;})
				 .attr("y",function(d){return d.y;})
				 .style("stroke", "#336666")
				 .style("stroke-family","仿宋")
				 .style("font-size","10px")
                 .attr("dx","-1.5em")
				 .attr("dy","1.5em")
				 .text(function(d){return d.name;});

		force.on("tick",function(){
	          lines.attr("x1",function(d){return d.source.x;});
              lines.attr("y1",function(d){return d.source.y;});
              lines.attr("x2",function(d){return d.target.x;});
              lines.attr("y2",function(d){return d.target.y;});
			  circles.attr("cx",function(d){return d.x;});
			  circles.attr("cy",function(d){return d.y;});
			  texts.attr("x",function(d){return d.x;});
			  texts.attr("y",function(d){return d.y;});
			  edges_text.attr("x",function(d){ return (d.source.x + d.target.x) / 2 ; });
              edges_text.attr("y",function(d){ return (d.source.y + d.target.y) / 2 ; });
		});
	</script>
  </body>
</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值