code4policy · github-classroom · Jan 8, 2024 · Jan 16, 2024 · Jan 16, 2024
diff --git a/all-data/index.html b/all-data/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Extended Bar Chart</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <h1>Boston 311 Calls</h1>
+    <h2>Reasons for 311 Calls in the City of Boston in 2023, by Count</h2>
+    <div id="extendedVisualization"></div>
+    <button onclick="goBack()">Go Back</button>
+
+    <script src="https://d3js.org/d3.v5.min.js"></script>
+    <script src="script.js"></script>
+    <script>
+        function goBack() {
+            window.location.href = "../index.html";
+        }
+    </script>
+</body>
+</html>
diff --git a/all-data/script.js b/all-data/script.js
@@ -0,0 +1,76 @@
+// extended_script.js
+
+const margin = { top: 20, right: 20, bottom: 80, left: 50 }; // Increased bottom margin
+const width = 800 - margin.left - margin.right;
+const height = 800 - margin.top - margin.bottom;
+
+
+d3.csv("../boston_311_2023_by_reason.csv").then(function(data) {
+    // Your D3.js code for extended bar chart
+    // Use the entire dataset (data) instead of top 10
+
+   // Sort data by Count in descending order
+    data.sort((a, b) => b.Count - a.Count);
+
+    // This is a simple example, and you can customize it based on your needs
+const svg = d3.select("#extendedVisualization")
+        .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 + ")");
+
+    const yScale = d3.scaleBand()
+        .domain(data.map(d => d.reason))
+        .range([0, height])
+        .padding(0.1);
+
+    const xScale = d3.scaleLinear()
+        .domain([0, d3.max(data, d => d.Count) * 6.3])
+        .range([0, width]);
+
+    const bars = svg.selectAll("rect")
+        .data(data)
+        .enter()
+        .append("rect")
+        .attr("y", d => yScale(d.reason))
+        .attr("x", 0)
+        .attr("width", d => xScale(d.Count))
+        .attr("height", yScale.bandwidth())
+        .attr("fill", "blue");
+
+    // Add y-axis
+    svg.append("g")
+        .call(d3.axisLeft(yScale))
+        .selectAll("text")
+        .style("text-anchor", "end")
+        .attr("dx", "-0.5em")
+        .attr("dy", "-0.15em")
+        .attr("transform", "rotate(-45)");
+
+    // Add x-axis
+    svg.append("g")
+        .attr("transform", "translate(0," + height + ")")
+        .call(d3.axisBottom(xScale))
+        .selectAll("text")
+        .style("text-anchor", "end")
+        .attr("dx", "-0.8em") // Adjusted dx for better spacing
+        .attr("dy", "0.15em")
+        .attr("transform", "rotate(-45)");
+
+    // Add y-axis label
+    svg.append("text")
+        .attr("transform", "rotate(-90)")
+        .attr("y", 0 - margin.left)
+        .attr("x", 0 - height / 2)
+        .attr("dy", "1em")
+        .style("text-anchor", "middle")
+        .text("Reasons");
+
+    // Add x-axis label
+    svg.append("text")
+        .attr("x", width / 2)
+        .attr("y", height + margin.bottom - 10)
+        .style("text-anchor", "middle")
+        .text("Number of Calls");
+});
diff --git a/all-data/styles.css b/all-data/styles.css
@@ -0,0 +1,12 @@
+body {
+    background-color: #f0f0f0; /* Grey background */
+    font-family: 'Times New Roman', Times, serif; /* Times New Roman font */
+}
+
+#visualization {
+    color: green; /* Green text color */
+}
+
+button {
+    margin-top: 20px;
+}
diff --git a/boston_311_2023_by_reason.csv 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