From 106926aa349f210eabb7dbcd57d624131b80c359 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:00 +0000 Subject: [PATCH 1/3] Setting up GitHub Classroom Feedback From 3e6dc28e3a9eef45b6c9b30480386ba78cc86b17 Mon Sep 17 00:00:00 2001 From: sgrucza Date: Mon, 15 Jan 2024 17:42:35 -0500 Subject: [PATCH 2/3] Trying again to upload this! Apoligies, I've been having issues --- index.html | 22 ++++++++++++++++- script.js | 70 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ styles.css | 45 +++++++++++++++++++++++++++++++++++ 3 files changed, 136 insertions(+), 1 deletion(-) create mode 100644 script.js create mode 100644 styles.css diff --git a/index.html b/index.html index d80e631..86ec8d7 100644 --- a/index.html +++ b/index.html @@ -1 +1,21 @@ - \ No newline at end of file + + + + + + + + D3 Bar Chart - 311 Calls in Boston + + + +
+

311 Calls in Boston in 2023

+

Broken down by the top 10 types

+
+
+ + + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..e8770a3 --- /dev/null +++ b/script.js @@ -0,0 +1,70 @@ +// Load CSV data +d3.csv('311_boston_data.csv').then(data => { + // Process the data + data.forEach(d => { + d.Count = +d.Count; // Convert Count to a number + }); + + // Sort the data by Count in descending order. first step to top 10 + data.sort((a, b) => b.Count - a.Count); + + // Take only the top 10 types + const top10Data = data.slice(0, 10); + + // Set up SVG container + const svgWidth = 800; + const svgHeight = 500; + const margin = { top: 40, right: 40, bottom: 80, left: 200 }; + const width = svgWidth - margin.left - margin.right; + const height = svgHeight - margin.top - margin.bottom; + + const svg = d3.select('#chart_311') + .append('svg') + .attr('width', svgWidth) + .attr('height', svgHeight) + .append('g') + .attr('transform', `translate(${margin.left},${margin.top})`); + + // Create scales + const yScale = d3.scaleBand() + .domain(top10Data.map(d => d.reason)) + .range([0, height]) + .padding(0.2); + + const xScale = d3.scaleLinear() + .domain([0, d3.max(top10Data, d => d.Count)]) + .range([0, width]); + + // Create bars + svg.selectAll('rect') + .data(top10Data) + .enter() + .append('rect') + .attr('x', 0) + .attr('y', d => yScale(d.reason)) + .attr('width', d => xScale(d.Count)) + .attr('height', yScale.bandwidth()) + .attr('fill', 'blue') + .on('mouseover', function (event, d) { + d3.select(this).attr('fill', 'orange'); // Change color on hover + }) + .on('mouseout', function () { + d3.select(this).attr('fill', 'blue'); // Revert color on mouseout + }); + + // Add axes + svg.append('g') + .call(d3.axisLeft(yScale)); + + svg.append('g') + .attr('transform', `translate(0,${height})`) + .call(d3.axisBottom(xScale)); + + // Add attribution line at the bottom + svg.append('text') + .attr('x', width / 2) + .attr('y', height + margin.top + 20) // Adjust the y-coordinate for proper placement + .attr('text-anchor', 'left') + .style('font-size', '12px') + .text('Chart created by Aarushi Sahejpal. Data source: Boston.gov'); +}); diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..c8f955d --- /dev/null +++ b/styles.css @@ -0,0 +1,45 @@ +/* Add any CSS styles here */ +body { + font-family: 'Roboto', sans-serif; /* Use Roboto font */ + background-color: whitesmoke; + color: black; + margin: 20px; +} + +header { + text-align: left; + margin-bottom: 10px; /* Adjust margin as needed for the header */ +} + +svg { + margin-top: 10px; /* Adjust margin as needed for the chart */ +}s + +h1 { + color: black; + font-size: 2em; /* Increase font size for the main header */ + margin-bottom: 0; /* No margin at the bottom of the main header */ + transition: color 0.3s; /* Smooth transition for color change on hover */ +} + +p { + line-height: 1.5; + font-size: 1.2em; /* Increase font size for the subheader */ + margin-top: 0; /* sNo margin at the top of the subheader */ + margin-bottom: 20px; /* Adjust margin as needed for the subheader */ + font-weight: bold; + transition: color 0.3s; /* Smooth transition for color change on hover */ +} + +/* Hover styles */ +h1:hover, +p:hover { + color: #007bff; /* Change the color on hover */ +} + +#attribution { + text-align: center; + position: absolute; + bottom: 10px; + width: 100%; +} From caa0998c40b19b77da84782f5c86a8ba1e935f8e Mon Sep 17 00:00:00 2001 From: Hileamlak Mulugeta Yitayew Date: Tue, 16 Jan 2024 15:34:26 -0500 Subject: [PATCH 3/3] Add filtered data --- 311_boston_data.csv | 45 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 45 insertions(+) create mode 100644 311_boston_data.csv diff --git a/311_boston_data.csv b/311_boston_data.csv new file mode 100644 index 0000000..076c2a2 --- /dev/null +++ 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,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