diff --git a/311_boston_data.csv b/311_boston_data.csv
new file mode 100644
index 0000000..05c6307
--- /dev/null
+++ b/311_boston_data.csv
@@ -0,0 +1,45 @@
+Reason,Count
+Abandoned Bicycle,1318
+Administrative & General Requests,2025
+Air Pollution Control,35
+Alert Boston,3
+Animal Issues,4155
+Billing,6
+Boston Bikes,64
+Bridge Maintenance,8
+Building,5209
+Catchbasin,621
+Cemetery,29
+Code Enforcement,31811
+Employee & General Comments,2166
+Enforcement & Abandoned Vehicles,61541
+Environmental Services,4416
+Fire Hydrant,205
+General Request,196
+Generic Noise Disturbance,109
+Graffiti,1838
+Health,1349
+Highway Maintenance,25096
+Housing,7590
+Massport,8
+MBTA,1
+Needle Program,7413
+Neighborhood Services Issues,28
+Noise Disturbance,832
+Notification,607
+Office of The Parking Clerk,18
+Operations,283
+Park Maintenance & Safety,7932
+Parking Complaints,19
+Pothole,85
+Programs,6
+Recycling,9955
+Sanitation,59389
+Sidewalk Cover / Manhole,291
+Signs & Signals,11209
+Street Cleaning,45659
+Street Lights,8499
+Traffic Management & Engineering,751
+Trees,10390
+Valet,7
+Weights and Measures,52
\ No newline at end of file
diff --git a/index.html b/index.html
index d80e631..a25e284 100644
--- a/index.html
+++ b/index.html
@@ -1 +1,85 @@
-<!-- Your HTML goes here -->
\ No newline at end of file
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Top 10 Reasons for 311 Calls</title>
+  <script src="https://d3js.org/d3.v7.min.js"></script>
+  <style>
+    .bar {
+      fill: steelblue; /* Bar color */
+    }
+    .bar:hover {
+      fill: #4682B4; /* Hover color */
+    }
+    .axis text {
+      font-size: 12px; /* Axis text size */
+    }
+  </style>
+</head>
+<body>
+  <h1>Boston 311 Calls in 2023</h1>
+  <h2>Report for Top 10 Calls</h2>
+  <div id="chart"></div>
+ 
+  <script>
+    // Use D3.js to fetch the CSV data
+    d3.csv("311_boston_data.csv").then(function(data) {
+      // Process the data and convert count to numbers
+      data.forEach(function(d) {
+        d.Count = +d.Count;
+      });
+
+      // Sort the data by count in descending order and take the top 10 reasons
+      const topReasons = data.sort((a, b) => b.Count - a.Count).slice(0, 10);
+
+      // Set up SVG dimensions and margins
+      const margin = { top: 20, right: 20, bottom: 70, left: 40 };
+      const width = 600 - margin.left - margin.right;
+      const height = 400 - margin.top - margin.bottom;
+
+      // Create the SVG canvas
+      const svg = d3.select("#chart")
+        .append("svg")
+        .attr("width", width + margin.left + margin.right)
+        .attr("height", height + margin.top + margin.bottom)
+        .append("g")
+        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+
+      // Create x and y scales
+      const x = d3.scaleBand()
+        .range([0, width])
+        .domain(topReasons.map(d => d.Reason))
+        .padding(0.1);
+
+      const y = d3.scaleLinear()
+        .range([height, 0])
+        .domain([0, d3.max(topReasons, d => d.Count)]);
+
+      // Create x and y axis
+      svg.append("g")
+        .attr("transform", "translate(0," + height + ")")
+        .call(d3.axisBottom(x))
+        .selectAll("text")
+        .attr("transform", "rotate(-45)")
+        .style("text-anchor", "end")
+        .style("font-size", "12px"); // Adjust text size
+
+      svg.append("g")
+        .call(d3.axisLeft(y))
+        .selectAll("text")
+        .style("font-size", "12px"); // Adjust text size
+
+      // Create bars
+      svg.selectAll(".bar")
+        .data(topReasons)
+        .enter().append("rect")
+        .attr("class", "bar")
+        .attr("x", d => x(d.Reason))
+        .attr("y", d => y(d.Count))
+        .attr("width", x.bandwidth())
+        .attr("height", d => height - y(d.Count));
+    });
+  </script>
+  <p>Data source: The City of Boston</p> <!-- Citation information -->
+    <p><sup>[1]</sup> The City of Boston - Department of XYZ, Year of Data Collection, Emmanuel Sagoe</p> 
+</body>
+</html>
