[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

Apple adjusts its product line layout: selling 4 iPhone models at the same time

The release of iPhone 6 has made headlines in maj...

Apple's event takes place this week: What to expect this year

The highly anticipated Apple conference will be h...

Xiaomi App Store CPD Cooperation Introduction

1. Platform Introduction 1. Service Introduction ...

Detailed explanation of Apple Developer Conference: What are the stories behind iOS 14? Why launch self-developed chips now?

In the early morning of June 23rd, Beijing time, ...

No open source, no reliability! AppCan will continue to open source

As cloud computing, big data, and mobile Internet...

Nature: The more you exercise, the smarter you are! Mice lying flat grow more brain cells

Coffee in the left hand and "happy water&quo...

Your color is quite nice! Do "chameleons" really exist among fish?

Produced by: Science Popularization China Author:...

2021 Tik Tok Hot-selling Live Broadcast Room Creation Plan Course

2021 Tik Tok Hot-selling Live Broadcast Room Crea...

Talking about the development of large iOS projects

The title is a bit scary, please don't be afr...

Lu Songsong’s Blog: How can website SEO surpass your competitors?

1. Whether it is optimized or not, you can see it...

When did "dog" become an adjective?

Do you know why "dog" is an adjective? ...

"91 Ten Articles" - A daily must-read briefing for the new energy vehicle industry (210210)

1. The California Department of Transportation (D...

How much energy was there at the time of the Big Bang? An incredible truth is deduced

A friend invited me to answer this question: The ...

What specific services does server hosting provide?

With the development of the Internet today, many ...

These 3 types of toothpaste are included in the "blacklist", do you have any at home?

When you wash your face and brush your teeth in t...