diff --git a/311_boston_data.csv b/311_boston_data.csv
new file mode 100644
index 0000000..076c2a2
--- /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,31812
+Employee & General Comments,2166
+Enforcement & Abandoned Vehicles,61541
+Environmental Services,4416
+Fire Hydrant,205
+General Request,196
+Generic Noise Disturbance,109
+Graffiti,1839
+Health,1349
+Highway Maintenance,25096
+Housing,7590
+MBTA,1
+Massport,8
+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
diff --git a/index.html b/index.html
index d80e631..86ec8d7 100644
--- a/index.html
+++ b/index.html
@@ -1 +1,21 @@
-
\ No newline at end of file
+
+
+
+
+
+
+
+ D3 Bar Chart - 311 Calls in Boston
+
+
+
+
+
+
+
+
+
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..e8770a3
--- /dev/null
+++ b/script.js
@@ -0,0 +1,70 @@
+// Load CSV data
+d3.csv('311_boston_data.csv').then(data => {
+ // Process the data
+ data.forEach(d => {
+ d.Count = +d.Count; // Convert Count to a number
+ });
+
+ // Sort the data by Count in descending order. first step to top 10
+ data.sort((a, b) => b.Count - a.Count);
+
+ // Take only the top 10 types
+ const top10Data = data.slice(0, 10);
+
+ // Set up SVG container
+ const svgWidth = 800;
+ const svgHeight = 500;
+ const margin = { top: 40, right: 40, bottom: 80, left: 200 };
+ const width = svgWidth - margin.left - margin.right;
+ const height = svgHeight - margin.top - margin.bottom;
+
+ const svg = d3.select('#chart_311')
+ .append('svg')
+ .attr('width', svgWidth)
+ .attr('height', svgHeight)
+ .append('g')
+ .attr('transform', `translate(${margin.left},${margin.top})`);
+
+ // Create scales
+ const yScale = d3.scaleBand()
+ .domain(top10Data.map(d => d.reason))
+ .range([0, height])
+ .padding(0.2);
+
+ const xScale = d3.scaleLinear()
+ .domain([0, d3.max(top10Data, d => d.Count)])
+ .range([0, width]);
+
+ // Create bars
+ svg.selectAll('rect')
+ .data(top10Data)
+ .enter()
+ .append('rect')
+ .attr('x', 0)
+ .attr('y', d => yScale(d.reason))
+ .attr('width', d => xScale(d.Count))
+ .attr('height', yScale.bandwidth())
+ .attr('fill', 'blue')
+ .on('mouseover', function (event, d) {
+ d3.select(this).attr('fill', 'orange'); // Change color on hover
+ })
+ .on('mouseout', function () {
+ d3.select(this).attr('fill', 'blue'); // Revert color on mouseout
+ });
+
+ // Add axes
+ svg.append('g')
+ .call(d3.axisLeft(yScale));
+
+ svg.append('g')
+ .attr('transform', `translate(0,${height})`)
+ .call(d3.axisBottom(xScale));
+
+ // Add attribution line at the bottom
+ svg.append('text')
+ .attr('x', width / 2)
+ .attr('y', height + margin.top + 20) // Adjust the y-coordinate for proper placement
+ .attr('text-anchor', 'left')
+ .style('font-size', '12px')
+ .text('Chart created by Aarushi Sahejpal. Data source: Boston.gov');
+});
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..c8f955d
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,45 @@
+/* Add any CSS styles here */
+body {
+ font-family: 'Roboto', sans-serif; /* Use Roboto font */
+ background-color: whitesmoke;
+ color: black;
+ margin: 20px;
+}
+
+header {
+ text-align: left;
+ margin-bottom: 10px; /* Adjust margin as needed for the header */
+}
+
+svg {
+ margin-top: 10px; /* Adjust margin as needed for the chart */
+}s
+
+h1 {
+ color: black;
+ font-size: 2em; /* Increase font size for the main header */
+ margin-bottom: 0; /* No margin at the bottom of the main header */
+ transition: color 0.3s; /* Smooth transition for color change on hover */
+}
+
+p {
+ line-height: 1.5;
+ font-size: 1.2em; /* Increase font size for the subheader */
+ margin-top: 0; /* sNo margin at the top of the subheader */
+ margin-bottom: 20px; /* Adjust margin as needed for the subheader */
+ font-weight: bold;
+ transition: color 0.3s; /* Smooth transition for color change on hover */
+}
+
+/* Hover styles */
+h1:hover,
+p:hover {
+ color: #007bff; /* Change the color on hover */
+}
+
+#attribution {
+ text-align: center;
+ position: absolute;
+ bottom: 10px;
+ width: 100%;
+}