From 4b83c8490f91646fc0acddbb8d6f53e0b0592140 Mon Sep 17 00:00:00 2001 From: "github-classroom[bot]" <66690702+github-classroom[bot]@users.noreply.github.com> Date: Mon, 8 Jan 2024 17:01:30 +0000 Subject: [PATCH 1/3] Setting up GitHub Classroom Feedback From dd9b8a688c4b2d184008275bbbf6a969de8ba028 Mon Sep 17 00:00:00 2001 From: Oscar Boochever Date: Mon, 15 Jan 2024 18:37:17 -0500 Subject: [PATCH 2/3] made second version more manually --- .gitattributes | 2 + boston_311_2023.csv | 3 + boston_311_2023_by_reason.csv | 45 ++++++++++++++ boston_311_2023_raw.csv | 3 + index.html | 19 +++++- oscar_analysis/311_boston_data.csv | 45 ++++++++++++++ oscar_analysis/index.html | 13 ++++ oscar_analysis/script.js | 98 ++++++++++++++++++++++++++++++ oscar_analysis/styles.css | 0 script_oscar.js | 89 +++++++++++++++++++++++++++ styles.css | 9 +++ 11 files changed, 325 insertions(+), 1 deletion(-) create mode 100644 .gitattributes create mode 100644 boston_311_2023.csv create mode 100644 boston_311_2023_by_reason.csv create mode 100644 boston_311_2023_raw.csv create mode 100644 oscar_analysis/311_boston_data.csv create mode 100644 oscar_analysis/index.html create mode 100644 oscar_analysis/script.js create mode 100644 oscar_analysis/styles.css create mode 100644 script_oscar.js create mode 100644 styles.css 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.csv b/boston_311_2023.csv new file mode 100644 index 0000000..4270909 --- /dev/null +++ b/boston_311_2023.csv @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:e61770a3828f33ce330ab68973a9b82877b5629964b3feb9fde2fc308916d592 +size 182776667 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; +} From a87703bf410f94c28cef333018bc1a7ab9f48779 Mon Sep 17 00:00:00 2001 From: Oscar Boochever Date: Mon, 15 Jan 2024 18:42:23 -0500 Subject: [PATCH 3/3] made second version more manually --- boston_311_2023.csv | 3 --- 1 file changed, 3 deletions(-) delete mode 100644 boston_311_2023.csv diff --git a/boston_311_2023.csv b/boston_311_2023.csv deleted file mode 100644 index 4270909..0000000 --- a/boston_311_2023.csv +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:e61770a3828f33ce330ab68973a9b82877b5629964b3feb9fde2fc308916d592 -size 182776667