code4policy · github-classroom · Jan 8, 2024 · Jan 8, 2024 · Jan 8, 2024 · Jan 8, 2024
diff --git a/311_boston_data.csv 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
diff --git a/chatgpt_conversation.txt b/chatgpt_conversation.txt
@@ -0,0 +1,5 @@
+Here is the link to the chatGPT-4 conversation that Louis and I developed in class (using Louis's account). I used this code as a base and then made additions and edits to the design.
+
+https://chat.openai.com/share/b9b041d2-b7e0-4d5a-a2ec-a427501c85e2
+
+
diff --git a/index.html b/index.html
@@ -1 +1,17 @@
-<!-- Your HTML goes here -->
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>311 Calls Bar Chart</title>
+    <link rel="stylesheet" type="text/css" href="styles.css">
+</head>
+<body>
+<h2> Top 10 Reasons for 311 Calls in the 2023
+    <div id="chart"></div>
+    <script src="https://d3js.org/d3.v6.min.js"></script>
+    <script src="script.js"></script>
+</body>
+
+<h6> Source: <a> https://data.boston.gov/dataset/311-service-requests | </a> 
+     Created by Gal and Louis using chatGPT-4</h6>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,50 @@
+// Set the dimensions and margins of the graph
+const margin = {top: 30, right: 30, bottom: 70, left: 60},
+    width = 460 - margin.left - margin.right,
+    height = 400 - margin.top - margin.bottom;
+
+// Append the svg object to the body of the page
+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})`);
+
+// Parse the Data
+d3.csv("311_boston_data.csv").then( data => {
+
+    // Sort and keep top 10 reasons
+    data.sort((a, b) => d3.descending(+a.Count, +b.Count));
+    let topData = data.slice(0, 10);
+
+    // X axis
+    const x = d3.scaleBand()
+      .range([0, width])
+      .domain(topData.map(d => d.reason))
+      .padding(0.2);
+    svg.append("g")
+      .attr("transform", `translate(0, ${height})`)
+      .call(d3.axisBottom(x))
+      .selectAll("text")
+        .attr("transform", "translate(-10,0)rotate(-45)")
+        .style("text-anchor", "end");
+
+    // Add Y axis
+    const y = d3.scaleLinear()
+      .domain([0, d3.max(topData, d => +d.Count)])
+      .range([height, 0]);
+    svg.append("g")
+      .call(d3.axisLeft(y));
+
+    // Bars
+    svg.selectAll("mybar")
+      .data(topData)
+      .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));
+});
diff --git a/styles.css b/styles.css
@@ -0,0 +1,24 @@
+/* Styles for the bar chart */
+.bar {
+    fill: steelblue;
+}
+
+.bar:hover {
+    fill: lightpink;
+}
+
+.axis-label {
+    font-size: 14px;
+    font-family: Arial, sans-serif;
+}
+
+.axis path,
+.axis line {
+    fill: none;
+    stroke: black;
+    shape-rendering: crispEdges;
+}
+
+/* Adding light grey background */
+body {
+    background-color: #f0f0f0; /* Light grey color */