code4policy · github-classroom · Jan 8, 2024 · Jan 15, 2024 · Jan 16, 2024
diff --git a/bar_chart.js b/bar_chart.js
@@ -0,0 +1,59 @@
+// Set the dimensions and margins of the graph
+var margin = { top: 30, right: 50, bottom: 70, left: 180 }, // Adjusted right margin
+    width = 960 - margin.left - margin.right,
+    height = 400 - margin.top - margin.bottom;
+
+// Append the svg object to the body of the page
+var 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})`);
+
+// Parse the Data
+d3.csv("boston_311_2023_by_reason.csv").then(function(data) {
+
+    // Sort the data and convert 'Count' to number
+    data.forEach(function(d) {
+        d.Count = +d.Count; // Convert 'Count' to a number
+    });
+
+    data.sort(function(a, b) {
+        return b.Count - a.Count; // Correct sorting order (largest to smallest)
+    });
+
+    // Slice the top 10 reasons
+    var top_reasons = data.slice(0, 10);
+
+    // X axis
+    var x = d3.scaleLinear()
+        .domain([0, d3.max(top_reasons, function(d) { return d.Count; }) * 1.05]) // Add 5% padding
+        .range([0, width]);
+
+    svg.append("g")
+        .attr("transform", `translate(0, ${height})`)
+        .call(d3.axisBottom(x))
+        .selectAll("text")
+            .style("text-anchor", "end");
+
+    // Y axis
+    var y = d3.scaleBand()
+        .range([0, height])
+        .domain(top_reasons.map(function(d) { return d.reason; }))
+        .padding(.1);
+
+    svg.append("g")
+      .call(d3.axisLeft(y));
+
+    // Bars
+    svg.selectAll("myRect")
+      .data(top_reasons)
+      .enter()
+      .append("rect")
+      .attr("x", x(0))
+      .attr("y", function(d) { return y(d.reason); })
+      .attr("width", function(d) { return x(d.Count); }) // Use the number value for 'Count'
+      .attr("height", y.bandwidth())
+      .attr("fill", "#69b3a2");
+});
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
diff --git a/index.html b/index.html
@@ -1 +1,27 @@
-<!-- Your HTML goes here -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>311 Calls Visualization</title>
+    <script src="https://d3js.org/d3.v6.min.js"></script>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <h1>Top 10 Reasons for 311 Calls in Boston (2023)</h1>
+    <h2>A count of calls of 311 in the city of Boston</h2>
+
+    <!-- The SVG chart with a responsive viewBox will be appended here -->
+    <div id="chart">
+        <svg viewBox="0 0 3000 500" preserveAspectRatio="xMidYMid meet">
+        </svg>
+    </div>
+
+    <footer>
+        Data Source: City of Boston 311 Calls Dataset <br>
+        Chart by: Kimihiro Nakamura
+    </footer>
+
+    <script src="bar_chart.js"></script>
+</body>
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,27 @@
+
+
+
+/* Make sure your SVG or chart adjusts to the parent container */
+svg {
+    width: 100%;
+    height: 100%;
+}
+
+/* Adjust font-sizes and other properties for smaller screens if necessary */
+h1 {
+        font-size: 20;
+}
+
+/* Adjust font-sizes and other properties for smaller screens if necessary */
+h2, footer {
+        font-size: 15;
+    }
+
+/* Existing styles for bars, if needed, should also be included in this CSS file */
+.bar {
+    fill: steelblue;
+}
+
+.bar:hover {
+    fill: orange;
+}