Colin's Blog
[javascript] D3.js를 이용하여 어떻게 사이버 보안 상태를 시각화하는가?

D3.js(D3는 Data-Driven Documents의 약어)는 웹 상에서 데이터를 시각화하는데 사용되는 강력한 JavaScript 라이브러리입니다. 그래프 및 차트 등 다양한 시각화 기능을 제공하여 데이터를 효과적으로 시각화할 수 있습니다. 이번 블로그에서는 D3.js를 사용하여 사이버 보안 상태를 시각화하는 방법에 대해 알아보겠습니다.

1. 데이터 수집하기

사이버 보안 상태를 시각화하기 위해서는 먼저 관련된 데이터를 수집해야 합니다. 이 데이터는 일반적으로 로그 파일, 모니터링 시스템 등에서 얻을 수 있습니다. 여기서는 예시로 가정하고, 일정 기간 동안의 공격 시도 수와 보안 조치 적용률 데이터를 사용한다고 가정하겠습니다.

2. 데이터 전처리하기

수집한 데이터를 시각화에 적합한 형태로 가공해야 합니다. 예를 들어, 일자별로 공격 시도 수와 보안 조치 적용률을 집계하여 각각의 값을 가지게 할 수 있습니다.

// 데이터 전처리 예시
const data = [
  { date: "2021-01-01", attackAttempts: 10, securityMeasures: 80 },
  { date: "2021-01-02", attackAttempts: 5, securityMeasures: 90 },
  // ...
];

const formattedData = data.map((d) => ({
  date: new Date(d.date),
  attackAttempts: d.attackAttempts,
  securityMeasures: d.securityMeasures,
}));

3. SVG 요소 생성하기

D3.js는 SVG(Scaleable Vector Graphics)를 사용하여 그래픽 요소를 생성하고 조작합니다. 먼저 SVG 요소를 생성하고 크기와 위치를 설정해야 합니다.

const margin = { top: 20, right: 20, bottom: 30, left: 50 };
const width = 600 - margin.left - margin.right;
const height = 400 - margin.top - margin.bottom;

const svg = d3
  .select("#chart")
  .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})`);

4. 축 생성하기

시간과 값을 표현하는 축을 생성하여 X축과 Y축에 대한 표시를 추가합니다.

const x = d3
  .scaleTime()
  .domain(d3.extent(formattedData, (d) => d.date))
  .range([0, width]);

const y = d3
  .scaleLinear()
  .domain([0, d3.max(formattedData, (d) => d.attackAttempts)])
  .range([height, 0]);

const xAxis = d3.axisBottom(x);
const yAxis = d3.axisLeft(y);

svg.append("g").attr("transform", `translate(0, ${height})`).call(xAxis);
svg.append("g").call(yAxis);

5. 데이터에 기반한 시각 요소 생성하기

실제 데이터에 기반하여 그래프나 차트 등 시각 요소를 생성합니다. 여기서는 선 그래프를 사용하여 공격 시도 수와 보안 조치 적용률의 추이를 보여줍니다.

const line = d3
  .line()
  .x((d) => x(d.date))
  .y((d) => y(d.attackAttempts));

svg
  .append("path")
  .datum(formattedData)
  .attr("fill", "none")
  .attr("stroke", "steelblue")
  .attr("stroke-width", 1.5)
  .attr("d", line);

6. 툴팁 추가하기

마우스를 이용하여 그래프 요소 위에 올렸을 때 해당 데이터에 대한 정보를 표시해주는 툴팁을 추가합니다.

const tooltip = d3
  .select("body")
  .append("div")
  .attr("class", "tooltip")
  .style("opacity", 0);

svg
  .selectAll("circle")
  .data(formattedData)
  .enter()
  .append("circle")
  .attr("cx", (d) => x(d.date))
  .attr("cy", (d) => y(d.attackAttempts))
  .attr("r", 5)
  .on("mouseover", (event, d) => {
    tooltip
      .html(`Date: ${d.date}<br/>Attack Attempts: ${d.attackAttempts}`)
      .style("left", event.pageX + "px")
      .style("top", event.pageY + "px")
      .style("opacity", 0.9);
  })
  .on("mouseout", () => {
    tooltip.style("opacity", 0);
  });

마무리

위의 단계를 따라가며 D3.js를 이용하여 사이버 보안 상태를 시각화할 수 있습니다. 데이터 수집부터 전처리, SVG 요소 생성, 축 생성 및 그래프 생성, 툴팁 추가까지의 단계를 이해하고 활용하면 다양한 데이터를 시각적으로 표현할 수 있습니다. D3.js의 강력한 기능을 적절히 사용하면 보다 효과적이고 인터랙티브한 사이버 보안 상태 시각화를 구현할 수 있습니다.

참고 자료

© 2018 Colin. All rights reserved.