Viewing a saved revision (read-only)
75e4de3ffc3b4f158cf04f449608cba1
Fork of React & D3 Vibecoding Starter
This interactive timeline visualizes the six steps for hosting a static website on AWS S3, with clickable circles revealing detailed instructions for each step. The visualization uses React for UI state management and D3.js v7 for SVG rendering, including `scalePoint` for horizontal positioning and `selection.join` for data binding. Steps are loaded from a local CSV file, with connecting lines between circles and completion markers indicating progress. The design adapts responsively to container dimensions using a custom `ResizeObserver` hook.
AI-generated descriptionS3 Static Website Hosting Steps Visualization
This visualization shows the 6 steps required to host a static website on AWS S3. Click on each bar to see more details about that step.
Features
- Interactive bar chart showing progression of steps
- Connected path showing the flow between steps
- Click on any step to view detailed instructions
- Responsive design that adapts to your screen size
Data
The visualization displays the following steps:
- Create S3 Bucket - Create a bucket and disable block public access
- Upload Files - Upload HTML, CSS, JS files
- Make Files Public - Set permissions or use bucket policy
- Enable Static Website Hosting - Set index.html and optional 404.html
- Set Bucket Policy - Add JSON policy for public access
- Enable HTTPS - Use CloudFront and ACM for SSL
Implementation
Built with:
- React for UI components
- D3.js for data visualization
- CSS for styling