数据可视化

　　数据可视化技术是关于数据视觉表现形式的科学技术研究，这种数据的视觉表现形式被定义为，一种以某种概要形式抽提出来的信息，包括相应信息单位的各种属性和变量。主要指的是技术上较为高级的技术方法，而这些技术方法允许利用图形、图像处理、计算机视觉以及用户界面，通过表达、建模以及对立体、表面、属性以及动画的显示，对数据加以可视化解释。

　　可视化的形式丰富多彩，本博客主要对正在学习的几种形式进行详细记录。实现可视化的技术为——d3/js.

二、JS直方图

1.将可视化图像适应全屏

var w = window.innerWidth
            || document.documentElement.clientWidth
            || document.body.clientWidth;
var h = window.innerHeight
            || document.documentElement.clientHeight
            || document.body.clientHeight;
var svg = document.getElementById("mysvg");
w = w*0.98 ;
h = h*0.9 ;

2.定义数组存数据

var rec = new Array(10);//定义矩阵数组
var txt = new Array(10);//定义文字注释数组
var height = [387, 361.02, 276.7, 250.19, 250.02, 201.7, 177.16, 161.05, 156.16, 148.17];
//定义直方图数据大小

3.输出直方图矩阵和数字

for(var i=0;i<10;i++)
        {
	        rec[i]=document.createElement("rect");
            svg.appendChild(rec[i]);
            txt[i] = document.createElement("text");
            svg.appendChild(txt[i]);
            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=" + (i * w / rec.length) + " y=" + (h - height[i]) + " width=" +
                (0.9 * w / rec.length) + " height=" + height[i] + " fill='rgb(" + r + "," + g + "," + b + ")'>";    //更改矩阵颜色
            txt[i].outerHTML = "<text x=" + (i * w / rec.length + 10) + " y=" + (h - height[i] - 10) +">"+ height[i] + "</text>";    //输出文字
        }

4.完整代码

<html>
<head>
    <title>直方图</title>
</head>
<body>
    <h1 style="text-align:center">2020年全国城市GDP排名（1-10）</h1>
    <h3 style="text-align:right">  单位：十亿</h3>
    <svg id="mysvg">
    </svg>
    <script>
        var w = window.innerWidth
            || document.documentElement.clientWidth
            || document.body.clientWidth;
        var h = window.innerHeight
            || document.documentElement.clientHeight
            || document.body.clientHeight;
        var svg = document.getElementById("mysvg");
        w = w ;
        h = h ;
        svg.setAttribute("width", w);
        svg.setAttribute("height", h);
       
        var rec = new Array(10);
        var txt = new Array(10);
        var txt1 = new Array;
        txt1 = document.createElement("text");
        svg.appendChild(txt1);
      //  txt1.outerHTML = "<text x=50 y=100>2020年全国城市GDP排名（1-10）  单位：十亿</text>";

        var height = [387, 361.02, 276.7, 250.19, 250.02, 201.7, 177.16, 161.05, 156.16, 148.17];
        for(var i=0;i<10;i++)
        {
	        rec[i]=document.createElement("rect");
            svg.appendChild(rec[i]);
            txt[i] = document.createElement("text");
            svg.appendChild(txt[i]);
            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=" + (i * w / rec.length) + " y=" + (h - height[i]) + " width=" +
                (0.9 * w / rec.length) + " height=" + height[i] + " fill='rgb(" + r + "," + g + "," + b + ")'>";
            txt[i].outerHTML = "<text x=" + (i * w / rec.length + 10) + " y=" + (h - height[i] - 10) +">"+ height[i] + "</text>";
        }
    </script>
</body>
</html>

5.呈现效果

6.小结

这是第一个也是第一次利用JavaScript构建可视化图像，在开始存储数据时比较茫然，后来发现可以利用一个数组将数据保存起来，在输出图形是调用即可。

三、动态D3直方图绘制

1.什么是D3

D3 是一个JavaScript的函数库，是用来做数据可视化的。

将数据变成图形，要想用原生的 HTML、SVG、Canvas 来实现是烦琐和困难的。D3 为我们封装好这些，让开发者能更注重图表的布局和逻辑。它的优点是封装层次很高，能够非常简单地制作图表，但封装层次高的技术缺少自由性，但D3在这方面取得了平衡。

2.将可视化图像适应全屏

var w = window.innerWidth
            || document.documentElement.clientWidth
            || document.body.clientWidth;
var h = window.innerHeight
            || document.documentElement.clientHeight
            || document.body.clientHeight;
var svg = document.getElementById("mysvg");
w = w*0.98 ;
h = h*0.9 ;

3.定义画布周围空白的地方

var padding = {left: 50, right:5, top: 20, bottom: 30};

4.定义一个数组，用来存储数据值

var dataset=[109.3,120.5,136.6,161.4,186.0,219.0,270.7,321.2,347.9,410.4,483.4,537.3,588.1,642.1,683.4,737.1,820.1,896.9,986.5,1016.0];

5.定义数组储存横轴坐标

var year=["2001年","2002年","2003年","2004年","2005年","2006年","2007年","2008年","2009年","2010年","2011年","2012年","2013年","2014年","2015年","2016年","2017年","2018年","2019年","2020年"];

6.建立比例尺

最低0.47元/天解锁文章

麋鹿Fei

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
3
评论
数据可视化

文章目录前言随着时代的不断更替，信息爆炸的今天，海量的数据如果仅仅利用表格的形式进行汇总，无法清晰明了地观察数据之间的联系，可视化应运而生。数据可视化利用不同的可视化图形手段，清晰且有效的传达信息，丰富的数据图片冲击人们的视觉，是一项非常重要的技术，因此想利用这篇博客记录自己，作为小白对于这门技术的入门学习过程。期待大家的点评和指教。一、数据可视化是什么？　　数据可视化技术是关于数据视觉表现形式的科学技术研究，这种数据的视觉表现形式被定义为，一种以某种概要形式抽提出来的...
复制链接

扫一扫