Skip to content
This repository has been archived by the owner on Dec 22, 2024. It is now read-only.

Feedback #1

Open
wants to merge 3 commits into
base: feedback
Choose a base branch
from
Open

Feedback #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4b83c84
Setting up GitHub Classroom Feedback
github-classroom[bot] Jan 8, 2024
dd9b8a6
made second version more manually
OscarBoochever Jan 15, 2024
a87703b
made second version more manually
OscarBoochever Jan 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .gitattributes
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
45 changes: 45 additions & 0 deletions boston_311_2023_by_reason.csv
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
3 changes: 3 additions & 0 deletions boston_311_2023_raw.csv
View file
Open in desktop
Git LFS file not shown
19 changes: 18 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,18 @@
<!-- 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">
<link rel="stylesheet" href="styles.css">
<title>311 Calls in Boston (2023)</title>
</head>
<body>

<div id="chart-container">
<!-- The D3 horizontal bar chart will be appended here -->
</div>

<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="script_oscar.js"></script>
</body>
</html>
45 changes: 45 additions & 0 deletions oscar_analysis/311_boston_data.csv
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
13 changes: 13 additions & 0 deletions oscar_analysis/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>D3.js Bar Chart</title>
<script src="https://d3js.org/d3.v6.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<h1> testing </h1>
</body>
</html>
98 changes: 98 additions & 0 deletions oscar_analysis/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);
Empty file added oscar_analysis/styles.css
View file
Open in desktop
Empty file.
89 changes: 89 additions & 0 deletions script_oscar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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");
});
9 changes: 9 additions & 0 deletions styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}

#chart-container {
margin: 20px;
}