D3.js the number of SSH burst breaks to visualize

A server to do mobile app application in a cloud, very curious if you do not modify the SSH port, how many times a day will be violently cracked? With this question, look at the/var/log/messages log, grep How many of the "Failed" in the log records ...

Because the messages log will have logrotate, so:

grep "^mar 1"/var/log/messages* | grep "Failed" | Wc-l

Get the number of violent hacks from 1th to 7th respectively this month, respectively:

2015-03-07,41262015-03-06,334992015-03-05,800962015-03-04,702082015-03-03,792732015-03-02,409952015-03-01,11845

In addition to 7th quiet point, an average of 5, 60,000 times a day, it seems that hackers are busy every day ...

Although the data is relatively small, but it looks more boring, do not see the trend, let the data visualization, then use D3.js Bar, on the code ...

650) this.width=650; "src=" http://s3.51cto.com/wyfs02/M01/5A/5F/wKioL1T8LNrx9-bJAACnSpOrbWs179.jpg "title=" d3.png "alt=" Wkiol1t8lnrx9-bjaacnsporbws179.jpg "/>

D3 library files are available directly from GitHub.

Index.html

<! DOCTYPE html>
Style.css
#container {background: #eee; The background color of the container width:600px;height:270px;} body {font:12px Arial;}  path {stroke:mediumturquoise;    The color of the curve, you can use the Stroke tab in Chrome's console to debug the Stroke-width:2; Fill:none;}.    Axis Path,.axis line {fill:none;    Stroke:gray;    Stroke-width:1; Shape-rendering:crispedges;}
Data.csv
Date,close2015-03-07, 41262015-03-06,334992015-03-05,800962015-03-04,702082015-03-03,792732015-03-02,409952015-03-01,11845
Index.js
VAR&NBSP;MARGIN&NBSP;=&NBSP;{TOP:&NBSP;30,&NBSP;RIGHT:&NBSP;30,&NBSP;BOTTOM:&NBSP;50,&NBSP;LEFT:&NBSP;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 (ten); 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 datad3.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  datax.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 ("date"); Svg.append ("G")           // add the  y axis &nbsP; .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 blast count");                           });
The above is the code of a page. Visit the page to see D3.js data visualization ...
650) this.width=650; "src=" http://s3.51cto.com/wyfs02/M02/5A/63/wKiom1T8MnWQ1wzxAAEhIKdYZAs344.jpg "title=" d3.png "alt=" Wkiom1t8mnwq1wzxaaehikdyzas344.jpg "/>
What's the effect? D3 's still good, right? There are many more cool effects ... Keep trying.
This article is from "Lao Xu's Private Cuisine" blog, please be sure to keep this source http://laoxu.blog.51cto.com/4120547/1618400
D3.js the number of SSH burst breaks to visualize