[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

What exactly is the “resonant copywriting” that leaders mention?

"Xiao Wang, your creative writing needs to r...

New policy on rural veterans’ subsidies in 2022: How much per month after age 60?

Soldiers are the defenders of our country. Since ...

Summary of the use of random numbers in Swift

In the process of development, we need to generat...

Overseas video marketing promotion: YouTube influencer marketing guide!

YouTube is quickly becoming one of the most popul...

To B products: How to build a complete product operation system?

For most operators , product operations are orien...

Dismantling the operation and promotion strategies of 360, Xiaomi, WeChat and Oasis

What I will share today are the product operation...

Operation and Promotion | Teach you step by step how to capture fans with an event!

How to attract fans to a public account by planni...

B station operation and traffic diversion strategy!

Let me first briefly introduce Bilibili, or B Sta...

Douyin traffic and fan increase methods and operation guide!

With the advent of the 5G era, short videos are s...

Tips for operating a wedding photography video account!

1. What is Video Account? Short content : It is a...

2022 Youth Olympic Games postponed to 2026

International Olympic Committee President Bach an...

What is red envelope promotion? How to do red envelope promotion in Alimama Taobao Alliance?

When Alimama launched the red envelope promotion ...

How to carry out promotion operations? Share 10 tips!

The era of the entire network has arrived, and on...

This is what an App Store chart manipulation studio looks like

You may have heard about App ranking manipulation...

Tik Tok Teacher Yu Yinuo's textbook unit synchronized composition class

Introduction to the resources of the textbook uni...