From 8bc56c4239401baf77438403cde02cba6f2c4194 Mon Sep 17 00:00:00 2001 From: "github-classroom[bot]" <66690702+github-classroom[bot]@users.noreply.github.com> Date: Mon, 8 Jan 2024 23:27:20 +0000 Subject: [PATCH 1/3] Setting up GitHub Classroom Feedback From 802f5fefaec65447a47c6431d107bd055c96edcb Mon Sep 17 00:00:00 2001 From: brandon-martinez-source Date: Mon, 15 Jan 2024 21:11:23 -0500 Subject: [PATCH 2/3] Completed part 1 and 2 of the homework --- all-data/index.html | 23 ++++++++++++++ all-data/script.js | 76 +++++++++++++++++++++++++++++++++++++++++++++ all-data/styles.css | 12 +++++++ 3 files changed, 111 insertions(+) create mode 100644 all-data/index.html create mode 100644 all-data/script.js create mode 100644 all-data/styles.css diff --git a/all-data/index.html b/all-data/index.html new file mode 100644 index 0000000..4413130 --- /dev/null +++ b/all-data/index.html @@ -0,0 +1,23 @@ + + + + + + Extended Bar Chart + + + +

Boston 311 Calls

+

Reasons for 311 Calls in the City of Boston in 2023, by Count

+
+ + + + + + + diff --git a/all-data/script.js b/all-data/script.js new file mode 100644 index 0000000..fa9401f --- /dev/null +++ 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 new file mode 100644 index 0000000..8d2b6ea --- /dev/null +++ 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; +} \ No newline at end of file From 84e7dbb6795345da0eecb6587701263767700eb2 Mon Sep 17 00:00:00 2001 From: Hileamlak Mulugeta Yitayew Date: Tue, 16 Jan 2024 15:23:55 -0500 Subject: [PATCH 3/3] Add boston data --- boston_311_2023_by_reason.csv | 45 +++++++++++++++++++++++++++++++++++ 1 file changed, 45 insertions(+) create mode 100644 boston_311_2023_by_reason.csv 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