Viewing a saved revision (read-only)
ada07955be804002868064a3c9d238c9
S3 bucket
This interactive visualization presents AWS S3 static website hosting through three tabbed views: a bar chart of hosting benefits, a table of requirements, and a step-by-step implementation diagram. Built with React and D3.js v7, it uses axisBottom, axisLeft, and scaleBand for the chart, with transitions animating bars, rows, and arrows. Custom tooltips appear on hover, and data loads from CSV files. A ResizeObserver hook enables responsive sizing across the interface.
AI-generated descriptionLetter Frequency Visualization
This project demonstrates a simple interactive data visualization using React and D3.js. It displays a bar chart showing the frequency count of different letters.
Features
- Responsive bar chart visualization
- Interactive selection of bars
- Clean, modern visual design
- Smooth transitions and animations
Technologies Used
- React 19.1.0
- D3.js 7.8.5
- Modern JavaScript (ES Modules)
- CSS for styling
Project Structure
- app.jsx: Main React component
- main.js: Entry point for D3 visualization
- renderSVG.js: Creates/updates the SVG container
- renderBars.js: Handles the bar chart layout
- renderBarElements.js: Renders individual bars with interactions
- renderTitle.js: Renders the chart title
- scales.js: Sets up D3 scales for data mapping
- axes.js: Renders the chart axes
- loadData.js: Loads and processes CSV data
- useDimensions.js: Custom hook for responsive sizing
Getting Started
- Clone this repository
- Open the project folder
- Serve the files with a local server (e.g.,
npx serve) - Open the local URL in your browser
Interaction
Click on any bar to select it. Click again to deselect. Selected bars are highlighted while others are dimmed.
Data Format
The visualization expects a CSV file with the following format: