반응형
2020년 R로 코딩해서 학회 제출 할 때가 어제 같은데 인공지능 나오고 너무 빨리 진화 하는 것 같다.
시리즈로 워드 클라우드 소스를 보여 드립니다. 확인 해보시고 연습도 해보시고. 파이썬 코딩도 해보시기 바랍니다.
소스는 HTML입니다.
| <!DOCTYPE html> |
| <html lang="ko"> |
| <head> |
| <meta charset="UTF-8"> |
| <title>한글 자동 생성 실시간 워드클라우드</title> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.min.js"></script> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-cloud/1.2.5/d3.layout.cloud.min.js"></script> |
| <style> |
| body { font-family: 'Segoe UI', 'Apple SD Gothic Neo', sans-serif; background: #f8f9fa; text-align: center; margin-top: 30px; } |
| h1 { color: #333; font-size: 24px; margin-bottom: 10px; } |
| #wordcloud { width: 90%; max-width: 1000px; height: 70vh; margin: 20px auto; background: #ffffff; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); overflow: hidden; } |
| .loading { line-height: 70vh; color: #888; font-size: 18px; } |
| </style> |
| </head> |
| <body> |
| <h1>모두비즈 실시간 워드클라우드</h1> |
| <div id="wordcloud"><div class="loading">자동 키워드를 생성 중...</div></div> |
| <script> |
| // 랜덤 한글 키워드 자동 생성 함수 |
| function generateRandomKeywords(count = 30) { |
| const syllables = [ |
| "인공지능", "데이터", "클라우드", "메타버스", "로봇", "자율주행", "스마트", "미래", |
| "글로벌", "웹", "앱", "디지털", "네트워크", "혁신", "트렌드", "AI", "VR", "IoT" |
| ]; |
| let keywords = []; |
| for (let i = 0; i < count; i++) { |
| const word = syllables[Math.floor(Math.random() * syllables.length)] |
| + syllables[Math.floor(Math.random() * syllables.length)]; |
| keywords.push({ |
| text: word, |
| size: Math.floor(Math.random() * 70) + 30 // 30~100 사이 랜덤 크기 |
| }); |
| } |
| return keywords; |
| } |
| function renderWordCloud(words) { |
| const container = document.getElementById("wordcloud"); |
| const width = container.offsetWidth; |
| const height = container.offsetHeight; |
| const layout = d3.layout.cloud() |
| .size([width, height]) |
| .words(words) |
| .padding(10) |
| .rotate(() => Math.floor(Math.random() * 90 - 45)) |
| .font("'Segoe UI', 'Apple SD Gothic Neo', sans-serif") |
| .fontSize(d => d.size) |
| .on("end", draw); |
| layout.start(); |
| function draw(words) { |
| const svg = d3.select("#wordcloud").html("") |
| .append("svg") |
| .attr("width", "100%") |
| .attr("height", "100%") |
| .attr("viewBox", `0 0 ${width} ${height}`) |
| .append("g") |
| .attr("transform", `translate(${width/2},${height/2})`); |
| const color = d3.scaleOrdinal(d3.schemeSet3); |
| svg.selectAll("text") |
| .data(words) |
| .enter().append("text") |
| .style("font-size", d => d.size + "px") |
| .style("font-weight", d => d.size > 70 ? "bold" : "normal") |
| .style("fill", (d,i) => color(i)) |
| .attr("text-anchor", "middle") |
| .attr("transform", d => `translate(${d.x},${d.y})rotate(${d.rotate})`) |
| .text(d => d.text); |
| } |
| } |
| // 초기 렌더링 |
| renderWordCloud(generateRandomKeywords()); |
| // 5초마다 자동 키워드 갱신 |
| setInterval(() => { |
| renderWordCloud(generateRandomKeywords()); |
| }, 5000); |
| // 브라우저 크기 변경 시 다시 렌더링 |
| window.onresize = () => { |
| renderWordCloud(generateRandomKeywords()); |
| }; |
| </script> |
| </body> |
| </html> |
'AI, 빅데이터, 클라우드 & 파이프라인' 카테고리의 다른 글
| AI 에이전트 제작 노하우를 가져다 쓰는 법 - 구글공개 (2) | 2026.07.03 |
|---|---|
| AI PM의 커리어를 설계하라. (0) | 2026.07.03 |
| 딥러닝과 머신러닝, 인공지능(AI)과 뭐가 다르고 차이가 무엇일까? (0) | 2026.06.29 |
| 데이터거래사 이력사항 통과 절차 (2) | 2026.06.23 |
| 백링크 - 알고 사용해야 합니다. (0) | 2026.06.21 |