번호 별자리
vanilla
- Canvas
- 데이터아트
- 마우스인터랙션
코드
1<!DOCTYPE html>
2<html lang="ko">
3 <head>
4 <meta charset="UTF-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 <title>번호 별자리</title>
7 <link rel="stylesheet" href="./style.css" />
8 </head>
9 <body>
10 <canvas id="stage">로또 당첨 번호 별자리</canvas>
11 <script src="./data.js"></script>
12 <script src="./script.js"></script>
13 </body>
14</html>
15아이디어
2002년 1회차부터 모은 1,216회차의 실제 당첨 데이터. 45개 번호가 별이 되고, 함께 뽑힌 횟수가 둘을 잇는 빛이 된다. 그 별자리 위에서 직접 여섯 개를 골라 내 조합을 그리고, 24년치 당첨 기록과 비교한다.
인터랙션
- 별에 커서를 올리면 — 그 번호가 다른 번호들과 얼마나 자주(따뜻한 선) 혹은 드물게(차가운 선) 함께 나왔는지 드러난다.
- 별을 클릭하면 — 여섯 개까지 고른다. 고른 별을 잇는 선이 곧 내 조합이다.
- 고를 때마다 — 합계·홀짝·고저·연속수가 1,216회차 분포와 즉시 비교된다. 여섯 개를 다 고르면, 그 조합이 과거에 당첨된 적이 있는지, 같은 형태가 몇 번 나왔는지까지.
- 빈 공간을 클릭하면 — 초기화.
- 가만히 두면 — 실제 과거 당첨 회차가 잔잔히 재생된다.
데이터가 말하는 것
여섯 개를 고르다 보면 알게 된다 — 8,145,060가지 조합 중 24년 동안 뽑힌 건 1,216가지뿐. 어떤 조합도 두 번 나온 적 없다. 그런데도 합은 종형으로 모이고, 홀짝은 3:3에 쏠린다. 무작위가 그리는 질서.
Index