D3.js让ssh暴破次数可视化

一台做手机app应用的服务器在某云上,很好奇如果没有修改ssh端口的情况下,每天会被暴力破解多少次呢?带着这个疑问,查看一下/var/log/messages的日志,grep一下里面多少含有"Failed"的日志记录。。。

由于messages日志会有logrotate,所以:

grep "^Mar  1"  /var/log/messages* | grep "Failed" | wc -l

分别得到从本月1号到7号的暴力破解次数,分别是:

2015-03-07,4126
2015-03-06,33499
2015-03-05,80096
2015-03-04,70208
2015-03-03,79273
2015-03-02,40995
2015-03-01,11845

除了7号比较安静点,平均每天5、6万次,看来黑客每天都很忙碌。。。

虽然数据比较少,但是看起来比较枯燥,看不出趋势,让数据可视化,那就用d3.js吧,上代码。。。

d3的库文件直接从github上获得即可。

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
        <title>SSH爆破次数</title>
    </head>
    <body>
        <center><div id="container"></div></center>
        <script type="text/javascript" src="js/d3.v3.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
    </body>
</html>

style.css

#container {
background:#eee;    //容器的背景色
width:600px;
height:270px;
}

body { font: 12px Arial;}

path {
    stroke: mediumturquoise;  //曲线的颜色,可以在chrome的控制台里使用stroke TAB后调试
    stroke-width: 2;
    fill: none;
}

.axis path,
.axis line {
    fill: none;
    stroke: gray;
    stroke-width: 1;
    shape-rendering: crispEdges;
}

data.csv

date,close
2015-03-07,4126
2015-03-06,33499
2015-03-05,80096
2015-03-04,70208
2015-03-03,79273
2015-03-02,40995
2015-03-01,11845

index.js

var margin = {top: 30, right: 30, bottom: 50, left: 80},
    width = 600 - margin.left - margin.right,
    height = 270 - margin.top - margin.bottom;

var parseDate = d3.time.format("%Y-%m-%d").parse;

var x = d3.time.scale().range([0, width]);

var y = d3.scale.linear().range([height, 0]);

var xAxis = d3.svg.axis().scale(x)
    .orient("bottom").ticks(7)         
    .tickFormat(d3.time.format("%b/%d"));

var yAxis = d3.svg.axis().scale(y)
    .orient("left").ticks(10);

var valueline = d3.svg.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.close); })
    .interpolate("basis");

var svg = d3.select("#container")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform","translate(" + margin.left +"," + margin.top + ")");

// Get the data
d3.csv("data/data.csv", function(error, data) {
     data.forEach(function(d) {
     d.date = parseDate(d.date);
     d.close = +d.close;
                        });
// Scale the range of the data
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) { return d.close; })]);
svg.append("path")       // Add the valueline path.
   .attr("class", "line")
   .attr("d", valueline(data));

svg.append("g")          // Add the X Axis
   .attr("class", "x axis")
   .attr("transform", "translate(0," + height + ")")
   .call(xAxis);

svg.append("text")                // text label for the x axis
   .attr("x", 265 )
   .attr("y", 238 )
   .style("text-anchor", "middle")
   .text("日期");

svg.append("g")          // Add the Y Axis
   .attr("class", "y axis")
   .call(yAxis);

svg.append("text")
   .attr("transform", "rotate(-90)")
   .attr("y",0 - margin.left)
   .attr("x",0 - (height / 2))
   .attr("dy", "1em")
   .style("text-anchor", "middle")
   .text("SSH爆破次数");
                         });

以上就是一个页面的代码。访问页面看看d3.js的数据可视化效果吧。。。

效果如何?d3还是不错的吧?还有很多更cool的效果。。。Keep trying。。

时间: 2024-10-10 10:42:55

D3.js让ssh暴破次数可视化的相关文章

【 D3.js 入门系列 --- 9 】 常见可视化图形

本人的个人博客为: www.ourd3js.com csdn博客为: blog.csdn.net/lzhlzz 转载请注明出处,谢谢. Layout ,直译为"布局,安排".但在 D3 中不是这个意思. D3 中有很多 Layout 函数,它们不是为了在画面中布局什么,在 D3 中是对输入的数据进行转换,转换成比较容易进行可视化的数据.实际进行可视化时,需要其他的代码.我们可以简单地把 Layout 理解为"制作常见图形的函数",比如饼状图等等. D3 中一共提供了

d3.js:数据可视化利器之快速入门

hello,data! 在进入d3.js之前,我们先用一个小例子回顾一下将数据可视化的基本流程. 任务 用横向柱状图来直观显示以下数据: var data = [10,15,23,78,57,29,34,71]; 简单地思考一下,要完成这个任务有两个问题需要解决: 用什么可视元素来表现横向柱? 数据对应到可视元素的什么属性? 这个不算困难,我们使用HTML的DIV元素来实现,代码参见http://www.hubwiz.com/course/54fd40cfe564e50d50dcf284/:快速

[资料搜集狂]D3.js数据可视化开发库

偶然看到一个强大的D3.js,存档之. D3.js 是近年来十分流行的一个数据可视化开发库. 采用BSD协议 源码:https://github.com/mbostock/d3 官网:http://d3js.org/ 中文资料:http://www.ourd3js.com/ C3.js是一个基于D3.js的图表库. https://github.com/masayuki0812/c3 http://c3js.org/ 附:

前端编程提高之旅(八)----D3.js数据可视化data join解析

   D3.js作为一门轻型的可视化类库,非常便于将数据与web界面元素绑定,实现可视化.乐帝d3.js入门是大体看了一遍<d3js数据可视化实战>这本书,D3操作非常类似于jquery的使用,具体体现在两点: 选择器模块都采用CSS3标准 方法可以链式调用    有了jquery使用基础,相信再加上以上书籍的例子,调试很容易上手使用D3.js,乐帝目前认为D3.js与jquery区别在于:D3.js独有的数据结构概念及对SVG操作方便的实现.而深入理解D3原理,以上皮毛的理解就不够用了.  

D3.js数据可视化(二)——绘制弦图(Chord Layout)

树图网可视化实验 1. 实验要求 要求通过树,或者图.网的可视化聚类,分析某个公司的邮件社交网络.根据要求设计可视化方案,并利用D3工具实现可视化效果. 2. 过程 2.1. 可视化方案的设计思路 2.1.1. 可视化要求 1) 可视化该邮件社交网络. 2) 该可视化中的每个Edge都对应着一个权重(Emails per month或者weight),要求将该权重属性映射到一个图形化的属性,比如,color,types of line,size or shapes. 3) 可视化方案中要体现每个

《D3.js数据可视化实战手册》即将上市!

内容提要 如今这个互联网时代,人们每天都生产海量的数据,如果直接面对这些数据,可能让人无从下手.将数据可视化,用形象立体的形式将其展现,有利于分析其中的关联,攫取可能存在的商业机会.本书意图通过大量的示例和代码,向读者讲述如何利用D3.js来实现数据可视化.只要您了解Javascript,就能完全掌握本书的内容. 本书一共13章,从如何搭建D3.js的开发环境开始,逐步介绍D3中的各种操作,包括选集.数据的初步处理.数据映射.坐标轴组件.动画过渡效果.SVG相关介绍.绘制图表.安排布局.可视化交

数据可视化与D3.js

数据可视化 数据可视化是如何把数据更好的展现出来的一个课题,在大数据出现后,它变得更为重要和迫切. 以前使用excel进行柱状图.饼状图.折线图等是最常用的数据可视化手段之一,而在WEB端,使用流行的extjs.fusioncharts.jfreechart,或者相对不太流行的amchart.highcharts.Bootstrap里的charts.jquery的一些插件等等都可以实现饼状图等的展示. 然而我这里说的数据可视化并不是这种传统的.简单的图形,而是更为复杂,能够在有限的空间里展示更多

实战大数据可视化库:D3.js

实战大数据可视化库:D3.js网盘地址:https://pan.baidu.com/s/1Sir6qnU7Hdz5l3IHNjdNEQ 提取码:vmdi D3.js 是一个 JavaScript 库,它主要用于对数据的动态图表展示.通过 HTML.SVG 以及 CSS,D3 可以让数据展现得更加鲜活.D3 使得数字的图形化展示变得异常单,可以说,它是当下最强大的基于网络的数据可视化技术. 本教程理论与实践结合,力图向读者全方位地展示 D3 大数据可视化技术,帮助读者快速利用 D3 创建可视化程序

【D3.js数据可视化实战】--(3)桑基图(sankey)的绘制

什么是桑基图 用D3绘制简单的Sankey图 添加文字 圆形节点 添加交互效果 注:本文未经作者允许严禁转载和演绎 1 什么是桑基图? 桑基图是流图 (flow diagram )的一种,用来描述能量,人口,经济等的流动情况.最早由爱尔兰人Matthew Henry Phineas Riall Sankey 提出.Sankey是一名船长也是工程师,1898年Sankey在土木工程师学会会报纪要的一篇关于蒸汽机能源效率的文章中首次推出了第一个能量流动图,后来被命名为Sankey图,中文音译为桑基图