[D3.js] 로또볼 만들기
[D3.js] 로또볼 만들기
계속 함수에 관한 내용만 다루다 보니 뭔가 재미가 없어 보여요. 로또볼을 만들면 좋을 것 같아서 예전에 따로 만들어 놓은 실제 로또 코딩을 했던 일부분인 로또볼만 가져와서 간단히 실험을 해보도록 하겠습니다.
1. 로또 사이트 실제 로또볼 이미지 관찰
로또 번호를 본지가 오래 되어서 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개의 로또볼에 색을 입힌 구슬을 완성 됩니다.
이상태로 하면 로또 번호에 대한 색 구슬을 만들지만 해당 구슬이 몇번인지 알 수 없습니다. 그래서 해당 구슬 위치에 숫자를 텍스트로 만들어 넣어 보겠습니다.
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>
[결과]
결과가 좀 맘에 안들게 텍스트 배치 되었네요.
마무리
오늘은 쉬어가는 시간으로 간단히 로또볼을 만들어 보았습니다. 원래 예전에 v4버전을 기초 공부를 할 때 로또 사이트에서 받은 지금까지의 로또 당첨번호를 엑셀파일로 받고 그 파일에서 로또 번호만 추출하여 데이터 파일을 만들고 그 데이터 파일을 기준으로 모든 로또 번호를 구슬로 만들었는데 거기까지 내용을 설명하면 좀 길어지기 때문에 간단히 로또볼 이미지만 만들어 시각화 해 봤네요.
Sponsored ( Powered by dclick )
DCLICK: An Incentivized Ad platform by Proof of Click - 스팀 기반 애드센스를 소개합니다.
안녕하세요 스티미언 여러분. 오늘 여러분께 스팀 블록체인 기반 광고 플랫폼 DCLICK을 소개...
이 글은 스팀 기반 광고 플랫폼
dclick 에 의해 작성 되었습니다.
와우 재밌네요 이번건 ㅎㅎ
뭔가 보여지는게 있어야 재미있는데 기초 다지기 기간이라서 최근 post 재미 없네요.
빨리 아두이노로 복귀해야지 재밌는데 말이죠.
오 저런 그림도 코딩으로 가능하군요.
CSS 능력만 뛰어나다면 3D 로도볼도 만들 수 있을거에요.
번호가 45면 정상적으로 나오질 않는군요 딱 맞아 떨어 자는게 결과가 좋게 나오나 보군요
볼 중심에 숫자 배치도 조정이 가능 한거죠?
Scale를 자동으로 범위를 잡아 주기 때문에 실제 사용하지 않는 50까지의 숫자의 범위를 잡아줘야 정확히 5등분이 되더군요.
숫자의 위치는 캔버스 가로x세로 영역을 기준으로 특정 좌표에 출력하면 돼요. 그래서 조정이 가능하고요.
Scale 함수를 이용하면 영역이 변경 되더라고 그 변경 된 영역을 기준으로 배치되니깐 수동 조정도 되고 자동 조정도 가능해요.