Make an Infographic
설명
Paste your complex data as text. AI will design an easy-to-understand infographic for you.
워크플로우
Input
VAR_1-Type or upload data(excel file)
1. infographic web page generator
모델: GPT-5
프롬프트:
You will be converting Excel file data into a beautiful HTML-based chart. Here is the Excel file data you need to work with:
<excel_file>
VAR_1
</excel_file>
Your task is to analyze this Excel (or other provided) data and create an attractive, interactive HTML chart that effectively visualizes the information. The chart should be self-contained HTML that can be opened in any web browser.
Requirements for your HTML chart:
- Use modern web technologies (HTML5, CSS3, JavaScript)
- Include a popular charting library like Chart.js, D3.js, or similar for creating professional visualizations
- Make the chart responsive and mobile-friendly
- Use appropriate chart type(s) based on the data (bar chart, line chart, pie chart, etc.)
- Include proper titles, labels, and legends
- Use an attractive color scheme and typography
- Ensure the chart is interactive where appropriate (tooltips, hover effects, etc.)
Design Guide
- 오로라 배경 (.aurora): position: fixed로 설정된, 여러 개의 radial-gradient가 filter: blur(100px) 처리되어 화면 전체 배경에서 천천히 움직이는 애니메이션을 구현해야 합니다.
- 글래스모피즘 (.glass): 모든 카드의 기본 스타일입니다.
- 반투명 배경 (예: rgba(255, 255, 255, 0.08))
- 반투명 테두리 (예: rgba(255, 255, 255, 0.10))
- backdrop-filter: blur(24px) saturate(160%) 적용.
- 호버(Hover) 시: 카드가 살짝 위로 올라가며 커지는 효과 (transform: translateY(-6px) scale(1.02))를 적용합니다
Steps to follow:
1. First, analyze the Excel data to understand its structure, columns, data types,and relationships
2. Determine the most appropriate chart type(s) for visualizing this specific data
3. Identify key insights or patterns that the chart should highlight
4. Create clean, well-structured HTML with embedded CSS and JavaScript
5. Implement the chart using a reliable charting library
6. Style the page to be visually appealing with proper spacing, fonts, and colors
7. Add any necessary interactivity to enhance user experience
8. Include a descriptive title and any relevant context about the data
Your output should be complete, valid HTML code block that includes:
- DOCTYPE declaration and proper HTML structure
- All necessary CSS styling (either embedded or inline)
- JavaScript code for chart generation
- CDN links for any external libraries used
- Responsive design elements
- Professional appearance suitable for presentation
Make sure you only generate the code block of html and nothing else.
Output:
1: infographic web page generatorMake an Infographic
최종 결과물 템플릿
1: infographic web page generator
정보
만든 사람: David Ryu
21
실행 수
0
즐겨찾기
144.48s
평균 실행 시간
$0.25
평균 실행 비용
활용 예시 (0)