[Powerful] D3.js visualizes the number of SSH brute force attacks

[Powerful] D3.js visualizes the number of SSH brute force attacks

This blog post is from 51CTO blogger Lao Xu_kevin. If you have any questions, please go to the blogger's page for interactive discussion!

Blog address: http://laoxu.blog..com/4120547/1618400

A server for mobile app applications is on a cloud. I am curious how many times it will be brute-force hacked every day if the ssh port is not changed. With this question in mind, check the log in /var/log/messages and grep for the number of log records containing "Failed". . .

Since the messages log will be logrotated, so:

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

The number of brute force cracking attempts from the 1st to the 7th of this month are:

  1.  2015-03-07,4126
  2.  2015-03-06,33499
  3.  2015-03-05,80096
  4.  2015-03-04,70208
  5.  2015-03-03,79273
  6.  2015-03-02,40995
  7.  2015-03-01,11845

Except for the relatively quiet day on the 7th, the average number of hacks was 50,000 to 60,000 per day. It seems that hackers are very busy every day.

Although the data is relatively small, it looks rather dull and there is no trend. To visualize the data, let’s use d3.js. Here is the code...

The d3 library file can be obtained directly from github.

index.html

  1.  <!DOCTYPE html >    
  2.  < html   lang = "en" >    
  3.      < head >    
  4.          < meta   charset = "utf-8" >    
  5.          < link   rel = "stylesheet"   href = "css/style.css"   media = "screen"   type = "text/css"   />    
  6.          < title > SSH blasting times </ title >    
  7.      </ head >    
  8.      < body >    
  9.          < center > < div   id = "container" > </ div > </ center >    
  10.          < script   type = "text/javascript"   src = "js/d3.v3.js" > </ script >    
  11.          < script   type = "text/javascript"   src = "js/index.js" > </ script >    
  12.      </ body >    
  13.  </ html >  

style.css

  1.  #container {
  2.  background : #eee ; //background color of the container
  3.  width : 600px ;
  4.  height : 270px ;
  5.  } 
  6.     
  7.  body { font : 12px   Arial ;} 
  8.     
  9.  path {
  10.  stroke: mediumturquoise; //The color of the curve can be debugged in the Chrome console using stroke TAB
  11.  stroke- width : 2 ;
  12.  fill: none ;
  13.  } 
  14.     
  15.  .axis path,
  16.  .axis line {
  17.  fill: none ;
  18.  stroke: gray ;
  19.  stroke -width : 1 ;
  20.     shape-rendering: crispEdges;
  21.  }

data.csv

  1.  date,close
  2.  2015-03-07,4126
  3.  2015-03-06,33499
  4.  2015-03-05,80096
  5.  2015-03-04,70208
  6.  2015-03-03,79273
  7.  2015-03-02,40995
  8.  2015-03-01,11845

index.js

  1.  var margin = {top: 30, right: 30, bottom: 50, left: 80},
  2.     width = 600 - margin.left - margin.right,
  3.     height = 270 - margin.top - margin.bottom; 
  4.     
  5.  var parseDate = d3.time.format( "%Y-%m-%d" ).parse; 
  6.     
  7.  var x = d3.time.scale().range([0, width]); 
  8.     
  9.  var y = d3.scale.linear().range([height, 0]); 
  10.     
  11.  var xAxis = d3.svg.axis().scale(x)
  12.     .orient( "bottom" ).ticks(7)
  13.     .tickFormat(d3.time.format( "%b/%d" )); 
  14.     
  15.  var yAxis = d3.svg.axis().scale(y)
  16.     .orient( "left" ).ticks(10); 
  17.     
  18.  var valueline = d3.svg.line()
  19.     .x( function (d) { return x(d.date); })
  20.     .y( function (d) { return y(d.close); })
  21.  .interpolate( "basis" ); 
  22.     
  23.     
  24.  var svg = d3.select( "#container" )
  25.  .append( "svg" )
  26.  .attr( "width" , width + margin.left + margin.right)
  27.  .attr( "height" , height + margin.top + margin.bottom)
  28.  .append( "g" )
  29.  .attr( "transform" , "translate(" + margin.left + "," + margin.top + ")" ); 
  30.     
  31.     
  32.  // Get the data  
  33.  d3.csv( "data/data.csv" , function (error, data) {
  34.      data.forEach( function (d) {
  35.      d.date = parseDate(d.date);
  36.  d.close = +d.close;
  37.  });
  38.  // Scale the range of the data  
  39.  x.domain(d3.extent(data, function (d) { return d.date; }));
  40.  y.domain([0, d3.max(data, function (d) { return d.close; })]);
  41.  svg.append( "path" ) // Add the valueline path.  
  42.  .attr( "class" , "line" )
  43.    .attr( "d" , valueline(data)); 
  44.     
  45.  svg.append( "g" ) // Add the X Axis  
  46.    .attr( "class" , "x axis" )
  47.    .attr( "transform" , "translate(0," + height + ")" )
  48.  .call(xAxis); 
  49.     
  50.  svg.append( "text" ) // text label for the x axis  
  51.  .attr( "x" , 265 )
  52.  .attr( "y" , 238 )
  53.    .style( "text-anchor" , "middle" )
  54.  .text( "date" ); 
  55.     
  56.  svg.append( "g" ) // Add the Y Axis  
  57.    .attr( "class" , "y axis" )
  58.  .call(yAxis); 
  59.     
  60.  svg.append( "text" )
  61.    .attr( "transform" , "rotate(-90)" )
  62.    .attr( "y" ,0 - margin.left)
  63.    .attr( "x" ,0 - (height / 2))
  64.  .attr( "dy" , "1em" )
  65.    .style( "text-anchor" , "middle" )
  66.  .text( "SSH blasting times" );
  67.  });

The above is the code of a page. Visit the page to see the data visualization effect of d3.js. . .

How is the effect? ​​D3 is pretty good, right? There are many cooler effects... Keep trying...

<<:  Is Android about to be taken away?

>>:  How to learn Android development? Android information sharing

Recommend

Perfect World Novel Free Reading Full Text: Is it necessary to promote the website during the holidays?

For many webmasters and enterprises, before the h...

Apple TV's new remote control: Equipped with a touchpad and only two buttons

Beijing time, May 5th morning news, according to ...

If the United States takes a historical reversal and cancels its electric vehicle policy, what will happen to China's new energy vehicles?

About two years ago, the global automotive indust...

Recommended by experts: iOS custom drop-down line animation

This is the second demo in this chapter. In this ...

Tooth-stuck warning! Be careful when buying these types of mangoes!

(Pictures are from the Internet) Mangoes are not ...

WeChat Mac version Beta 3.0.0.1 internal test: you can browse Moments

IT Home reported on March 11 that according to ne...

Don't be silly, are you really sure that you are not a robot? !

Yes, the heroine in "Westworld" once th...

Two species of gibbons have become extinct in the wild in my country. Can they come back?

On September 6, at the annual working meeting of ...

The main culprit of holiday syndrome is a drop in adrenaline secretion! Is that all?

Niu Niu: My vacation balance is insufficient and ...

Can mosquitoes be completely eliminated?

Recently, the National People's Congress repr...

If we knew a hundred years in advance that a giant planet was going to hit the Earth, could humans survive?

An International Planetary Defense Conference is ...

Douyin self-media operation and marketing course materials case

Do you also have the following confusion? 1. I en...

A structure that a child can make has puzzled the mathematical community for 50 years

Not long ago, the famous mathematician Richard Ev...

Ten thousand words long article: Hand in hand teaching you how to play with private domain traffic

There are many articles discussing the concept of...

7 important details of Toutiao’s information flow delivery can increase your conversion rate by 50%!

As WeChat and Weibo operations become increasingl...