[D3.js] 로또볼 만들기

계속 함수에 관한 내용만 다루다 보니 뭔가 재미가 없어 보여요. 로또볼을 만들면 좋을 것 같아서 예전에 따로 만들어 놓은 실제 로또 코딩을 했던 일부분인 로또볼만 가져와서 간단히 실험을 해보도록 하겠습니다.

1. 로또 사이트 실제 로또볼 이미지 관찰

alt

로또 번호를 본지가 오래 되어서 827회까지 회차가 나왔나 보네요. 당첨 번호를 보면 6개의 구슬이 나와 있네요.

6개의 구슬을 보시면 오렌지, 파랑, 빨강, 검정, 그린 이렇게 5개의 색으로 나뉜 6개의 구슬을 만들어야 합니다.

그럼 본격적으로 6개의 로또볼을 만들어 볼까요.

2. 로또볼 5개의 Color 만들기

로또볼을 5개의 Color로 만들려면 어떻게 해야 할까요. 지난 시간에 배웠던 내용 중의 Scale 함수를 사용하면 쉽게 나눌 수 있습니다.

 var ColorScale =  d3.scaleQuantize().domain([1,50]) //color 범위 지정함
      .range(["orange","blue","red","black","green"]);

scaleQuantize()함수를 사용하였으면 로또 번호는 1~45까지이지만 Color 범위를 지정하기 위해서 1~50의 기준을 잡았습니다. 그리고 rangle()범위가는 5개의 색으로 각각 순서대로 지정을 하였습니다. 이렇게 하면 색은 5개로 나뉘게 됩니다.

1~10 : orange
11~20 : blue
21~30 : red
31~40 : black
41~50 : green

대충 이렇게 로또볼의 Color가 지정 됩니다. 총 5개의 Color이기 때문에 로또 번호가 45까지이지만 50까지 숫자를 지정하게 되었습니다. 만약 45를 max값으로 지정하게 되면 1~45까지의 숫자 범위를 5등분해야 합니다. 그러면 로또볼의 Color는 정상적으로 나오지 않게 됩니다. 50까지 해야 5등분 할 때 정상적으로 로또볼의 Color가 나오게 됩니다.

3. 6개의 로또볼 구슬 만들기

캔버스에 6개의 구슬을 만든다면 어떻게 해야 할까요. 바로 circle를 이용해서 원을 그리면 됩니다. 그리고 그 원의 fill의 색을 방금 ColorScale값으로 지정해 주면 6개의 로도볼 구슬을 만들 수 있게 됩니다.

var data= [3,15,23,33,39,41];

var svg = d3.select("body").append("svg")
      .attr("width",1000)
      .attr("height",50)
      //.style("background-color","yellow")
      .append("g")
      .attr("transform", "translate(" + 20 + "," + 20 + ")");

      var circle = svg.selectAll("circle").data(data) //볼 circle
          circle.enter().append("circle")
            .attr("cx",function(d,i){ return i*50+100;})
            .attr("cy",5)
            .attr("r",20)
            .attr("fill",function(d){return ColorScale(d); })
          circle.exit().remove();

data 갯수 만큼 원(circle) 위처럼 그리면 됩니다. 그리고 fill 속성에서 위에서 ColorScale 값으로 색을 채우면 6개의 로또볼에 색을 입힌 구슬을 완성 됩니다.

alt

이상태로 하면 로또 번호에 대한 색 구슬을 만들지만 해당 구슬이 몇번인지 알 수 없습니다. 그래서 해당 구슬 위치에 숫자를 텍스트로 만들어 넣어 보겠습니다.

     var text = svg.selectAll("text").data(data) //번호 text
          text.enter().append("text")
          .attr("x",function(d,i){ return i*50+90;})
          .attr("y",15)
          .attr("fill","white")
          .attr("font-size","25px")
          .text(function(d){return d;})
          text.exit().remove();

      var chtext = svg.append("text")  //회차 text
          .attr("x",0)
          .attr("y",15)
          .attr("fill","blue")
          .attr("font-size","25px")
          .text(1+"회");

구슬이 있는 위치에 숫자를 배치하게 됩니다.

4. 종합 소스

<body>
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <script>

    var ColorScale =  d3.scaleQuantize().domain([1,50]) //color 범위 지정함
      .range(["orange","blue","red","black","green"]);

    var data= [3,15,23,33,39,41];

    var svg = d3.select("body").append("svg")
      .attr("width",1000)
      .attr("height",50)
      //.style("background-color","yellow")
      .append("g")
      .attr("transform", "translate(" + 20 + "," + 20 + ")");

      var circle = svg.selectAll("circle").data(data) //볼 circle
          circle.enter().append("circle")
            .attr("cx",function(d,i){ return i*50+100;})
            .attr("cy",5)
            .attr("r",20)
            .attr("fill",function(d){return ColorScale(d); })
          circle.exit().remove();

      var text = svg.selectAll("text").data(data) //번호 text
          text.enter().append("text")
          .attr("x",function(d,i){ return i*50+90;})
          .attr("y",15)
          .attr("fill","white")
          .attr("font-size","25px")
          .text(function(d){return d;})
          text.exit().remove();

      var chtext = svg.append("text")  //회차 text
          .attr("x",0)
          .attr("y",15)
          .attr("fill","blue")
          .attr("font-size","25px")
          .text(1+"회");

  </script>
</body>

[결과]

alt

결과가 좀 맘에 안들게 텍스트 배치 되었네요.

마무리

오늘은 쉬어가는 시간으로 간단히 로또볼을 만들어 보았습니다. 원래 예전에 v4버전을 기초 공부를 할 때 로또 사이트에서 받은 지금까지의 로또 당첨번호를 엑셀파일로 받고 그 파일에서 로또 번호만 추출하여 데이터 파일을 만들고 그 데이터 파일을 기준으로 모든 로또 번호를 구슬로 만들었는데 거기까지 내용을 설명하면 좀 길어지기 때문에 간단히 로또볼 이미지만 만들어 시각화 해 봤네요.