diff --git a/.gitattributes b/.gitattributes
new file mode 100644
index 0000000..9cb1e84
--- /dev/null
+++ b/.gitattributes
@@ -0,0 +1,2 @@
+/boston_311_2023.csv filter=lfs diff=lfs merge=lfs -text
+/boston_311_2023_raw.csv filter=lfs diff=lfs merge=lfs -text
diff --git a/boston_311_2023_by_reason.csv b/boston_311_2023_by_reason.csv
new file mode 100644
index 0000000..076c2a2
--- /dev/null
+++ b/boston_311_2023_by_reason.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/boston_311_2023_raw.csv b/boston_311_2023_raw.csv
new file mode 100644
index 0000000..4270909
--- /dev/null
+++ b/boston_311_2023_raw.csv
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e61770a3828f33ce330ab68973a9b82877b5629964b3feb9fde2fc308916d592
+size 182776667
diff --git a/index.html b/index.html
index d80e631..364b67c 100644
--- a/index.html
+++ b/index.html
@@ -1 +1,18 @@
-
\ No newline at end of file
+
+
+
+
+
+
+ 311 Calls in Boston (2023)
+
+
+
+
+
+
+
+
+
+
+
diff --git a/oscar_analysis/311_boston_data.csv b/oscar_analysis/311_boston_data.csv
new file mode 100644
index 0000000..5d3070c
--- /dev/null
+++ b/oscar_analysis/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/oscar_analysis/index.html b/oscar_analysis/index.html
new file mode 100644
index 0000000..6d1f129
--- /dev/null
+++ b/oscar_analysis/index.html
@@ -0,0 +1,13 @@
+
+
+
+
+
+ D3.js Bar Chart
+
+
+
+
+ testing
+
+
\ No newline at end of file
diff --git a/oscar_analysis/script.js b/oscar_analysis/script.js
new file mode 100644
index 0000000..459049d
--- /dev/null
+++ b/oscar_analysis/script.js
@@ -0,0 +1,98 @@
+// Function to create the enhanced bar chart with modern font and label on hover
+function createModernBarChart(data) {
+ // Convert 'Count' to numbers
+ data.forEach(d => {
+ d.Count = +d.Count;
+ });
+
+ // Sort the data by count
+ data.sort((a, b) => b.Count - a.Count);
+
+ // Select the top 10 entries
+ const top10Data = data.slice(0, 10);
+
+ // Calculate maxCount for yScale domain
+ const maxCount = d3.max(top10Data, d => d.Count);
+
+ // Set up SVG container
+ const svg = d3.select("body").append("svg").attr("width", 800).attr("height", 400);
+
+ // Create yScale
+ const yScale = d3.scaleLinear()
+ .domain([0, maxCount])
+ .range([400, 0]);
+
+ // Create bars with hover effect
+ svg.selectAll("rect")
+ .data(top10Data)
+ .enter()
+ .append("rect")
+ .attr("x", (d, i) => i * 80)
+ .attr("y", d => yScale(d.Count))
+ .attr("width", 75)
+ .attr("height", d => 400 - yScale(d.Count))
+ .attr("fill", "lightblue") // Set all bars to light blue
+ .on("mouseover", function (event, d) {
+ d3.select(this).attr("fill", "orange"); // Change color on hover to orange
+
+ // Add label on hover
+ svg.append("text")
+ .attr("id", "hoverLabel")
+ .attr("x", (d, i) => event.x)
+ .attr("y", event.y - 10)
+ .attr("font-family", "Roboto")
+ .attr("font-weight", "bold")
+ .attr("font-size", "12px")
+ .attr("fill", "black")
+ .attr("text-anchor", "middle")
+ .text(d.reason);
+ })
+ .on("mouseout", function () {
+ d3.select(this).attr("fill", "lightblue"); // Revert to original color on mouseout
+
+ // Remove label on mouseout
+ svg.select("#hoverLabel").remove();
+ });
+
+ // Add values at the top of the bars
+ svg.selectAll("text.value")
+ .data(top10Data)
+ .enter()
+ .append("text")
+ .text(d => d.Count)
+ .attr("x", (d, i) => i * 80 + 38)
+ .attr("y", d => yScale(d.Count) - 5) // Adjusted y-coordinate for better positioning
+ .attr("font-size", "14px") // Larger text labels
+ .attr("fill", "black")
+ .attr("text-anchor", "middle")
+ .attr("class", "value"); // Added a class for easier selection
+
+ // Add a title
+ svg.append("text")
+ .attr("x", 400)
+ .attr("y", 20)
+ .attr("text-anchor", "middle")
+ .style("font-size", "16px")
+ .style("font-weight", "bold")
+ .text("Top 10 Reasons in 311 Boston Data");
+
+ // Add x-axis label
+ svg.append("text")
+ .attr("x", 400)
+ .attr("y", 380)
+ .attr("text-anchor", "middle")
+ .style("font-size", "12px")
+ .text("Reasons");
+
+ // Add y-axis label
+ svg.append("text")
+ .attr("transform", "rotate(-90)")
+ .attr("x", -200)
+ .attr("y", 10)
+ .attr("text-anchor", "middle")
+ .style("font-size", "12px")
+ .text("Count");
+}
+
+// Load your dataset and call the createModernBarChart function
+d3.csv("311_boston_data.csv").then(createModernBarChart);
diff --git a/oscar_analysis/styles.css b/oscar_analysis/styles.css
new file mode 100644
index 0000000..e69de29
diff --git a/script_oscar.js b/script_oscar.js
new file mode 100644
index 0000000..2e3fb53
--- /dev/null
+++ b/script_oscar.js
@@ -0,0 +1,89 @@
+// Assuming you have D3.js loaded
+
+// Fetch the data
+d3.csv("boston_311_2023_by_reason.csv").then(function(data) {
+ // Process the data and create the bar chart
+
+ // Extract the top 10 reasons and their counts, ordered from biggest to smallest
+ const topReasons = data
+ .sort((a, b) => b.Count - a.Count)
+ .slice(0, 10)
+ .map(d => ({ reason: d.reason, count: +d.Count }));
+
+ // Set up SVG dimensions with margin
+ const margin = { top: 50, right: 500, bottom: 100, left: 0 };
+ const width = 1000 - margin.left - margin.right;
+ const height = 600 - margin.top - margin.bottom;
+
+ // Create SVG container
+ const svg = d3.select("#chart-container")
+ .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 + ")");
+
+ // Set up scales
+ const xScale = d3.scaleLinear()
+ .domain([0, d3.max(topReasons, d => d.count)])
+ .range([0, width]);
+
+ const yScale = d3.scaleBand()
+ .domain(topReasons.map(d => d.reason))
+ .range([0, height])
+ .padding(0.1);
+
+ // Create bars
+ svg.selectAll("rect")
+ .data(topReasons)
+ .enter()
+ .append("rect")
+ .attr("x", 0)
+ .attr("y", d => yScale(d.reason) + 10)
+ .attr("width", d => xScale(d.count))
+ .attr("height", yScale.bandwidth())
+ .attr("fill", "steelblue");
+
+ // Add labels for reason and Count
+ svg.selectAll("text")
+ .data(topReasons)
+ .enter()
+ .append("text")
+ .attr("x", d => xScale(d.count) + 10)
+ .attr("y", d => yScale(d.reason) + yScale.bandwidth() / 2 + 10)
+ .style("font-size", "12px")
+ .style("fill", "black")
+ .text(d => `${d.reason} (${d.count})`);
+
+ // Add headline and subheadline
+ svg.append("text")
+ .attr("x", width / 2)
+ .attr("y", -20)
+ .attr("text-anchor", "middle")
+ .style("font-size", "20px")
+ .text("Streets and Sanitation Give Reason to Dial");
+
+ svg.append("text")
+ .attr("x", width / 2)
+ .attr("y", 0)
+ .attr("text-anchor", "middle")
+ .style("font-size", "14px")
+ .text("Top 10 Reasons for 311 Calls in Boston (2023)");
+
+ // Add citation
+ svg.append("text")
+ .attr("x", width / 2)
+ .attr("y", height + 20)
+ .attr("text-anchor", "middle")
+ .style("font-size", "12px")
+ .style("fill", "gray")
+ .text("Data Source: boston.gov");
+
+ // Add authorship credit in footnotes
+ svg.append("text")
+ .attr("x", -margin.left)
+ .attr("y", height + margin.bottom - 10)
+ .style("font-size", "12px")
+ .style("fill", "gray")
+ .text("Chart Author: Oscar Boochever");
+});
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..c119e02
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,9 @@
+body {
+ font-family: Arial, sans-serif;
+ margin: 0;
+ padding: 0;
+}
+
+#chart-container {
+ margin: 20px;
+}