From fe5ea7d26076082b9ded7b9b3a21740e1c5a6b38 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:02:36 +0000 Subject: [PATCH 1/9] Setting up GitHub Classroom Feedback From 4578d8281440a02e54b7b4dba4f48489586d7aa2 Mon Sep 17 00:00:00 2001 From: galdafadi Date: Mon, 8 Jan 2024 16:43:35 -0500 Subject: [PATCH 2/9] editing index.html --- index.html | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index d80e631..9f67f1c 100644 --- a/index.html +++ b/index.html @@ -1 +1,16 @@ - \ No newline at end of file + + + + + + 311 Boston Data Visualization + + + + +
+ + + + + From cc5457ef44e994ec84b6e3f21b940888ce31503d Mon Sep 17 00:00:00 2001 From: galdafadi Date: Mon, 8 Jan 2024 16:44:11 -0500 Subject: [PATCH 3/9] changing the data location --- 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..5d3070c --- /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,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 From 2620213f2bd308f83976c0c573bdc76c7a08864e Mon Sep 17 00:00:00 2001 From: galdafadi Date: Mon, 8 Jan 2024 16:44:24 -0500 Subject: [PATCH 4/9] script.js --- script.js | 72 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 72 insertions(+) create mode 100644 script.js diff --git a/script.js b/script.js new file mode 100644 index 0000000..35cb41a --- /dev/null +++ b/script.js @@ -0,0 +1,72 @@ +// Load data from CSV +d3.csv('311-basic/311_boston_data.csv').then(data => { + // Parse the count as numbers + data.forEach(d => { + d.Count = +d.Count; + }); + + // Sort the data by Count in descending order + data.sort((a, b) => b.Count - a.Count); + + // Take only the top 10 reasons + const top10Data = data.slice(0, 10); + + // Set up the SVG container + const svg = d3.select('#chart-container') + .append('svg') + .attr('width', 800) + .attr('height', 400); + + // Set up scales + const xScale = d3.scaleBand() + .domain(top10Data.map(d => d.reason)) + .range([0, 800]) + .padding(0.1); + + const yScale = d3.scaleLinear() + .domain([0, d3.max(top10Data, d => d.Count)]) + .range([400, 0]); + + // Create bars with pink fill color + svg.selectAll('rect') + .data(top10Data) + .enter() + .append('rect') + .attr('x', d => xScale(d.reason)) + .attr('y', d => yScale(d.Count)) + .attr('width', xScale.bandwidth()) + .attr('height', d => 400 - yScale(d.Count)) + .attr('fill', 'pink'); + + // Add text labels with black color + svg.selectAll('text') + .data(top10Data) + .enter() + .append('text') + .text(d => `${d.reason}: ${d.Count}`) + .attr('x', d => xScale(d.reason) + xScale.bandwidth() / 2) + .attr('y', d => yScale(d.Count) - 5) + .attr('text-anchor', 'middle') + .style('font-size', '12px') + .style('fill', 'black'); + + // Add x-axis + svg.append('g') + .attr('transform', 'translate(0,400)') + .call(d3.axisBottom(xScale)) + .selectAll('text') + .attr('transform', 'rotate(-45)') + .style('text-anchor', 'end'); + + // Add y-axis + svg.append('g') + .call(d3.axisLeft(yScale)); + + // Add chart title + svg.append('text') + .attr('x', 400) + .attr('y', 30) + .attr('text-anchor', 'middle') + .style('font-size', '18px') + .text('Top 10 Reasons for 311 in Boston (2023)'); +}); From b23466077231857634747cc4b3eb9cdd436a03d2 Mon Sep 17 00:00:00 2001 From: galdafadi Date: Mon, 8 Jan 2024 16:44:50 -0500 Subject: [PATCH 5/9] styles.css --- styles.css | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) create mode 100644 styles.css diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..fd0e5fb --- /dev/null +++ b/styles.css @@ -0,0 +1,26 @@ +body { + font-family: 'Arial', sans-serif; + margin: 20px; + background-color: #f2f2f2; /* Light grey background */ +} + +#chart-container { + width: 800px; + margin: 20px auto; +} + +h1 { + font-size: 32px; /* Bigger font size */ + font-weight: bold; /* Bold */ + text-align: center; +} + +/* Darker pink for bars */ +rect { + fill: #ff6699; +} + +/* Black text for labels */ +text { + fill: black; +} From cc9d8cacaa9ac35a5bf082ac7a036c512054016b Mon Sep 17 00:00:00 2001 From: galdafadi Date: Tue, 16 Jan 2024 17:18:36 -0500 Subject: [PATCH 6/9] html page --- index.html | 21 +++++++++++---------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/index.html b/index.html index 9f67f1c..2c5fbbd 100644 --- a/index.html +++ b/index.html @@ -1,16 +1,17 @@ - + - - - 311 Boston Data Visualization - + + 311 Calls Bar Chart + - -
- - - +

Top 10 Reasons for 311 Calls in the 2023 +
+ + + +

Source: https://data.boston.gov/dataset/311-service-requests | + Created by Gal and Louis using chatGPT-4
From 57fef9176f1f088cfdf99117797231d1e6e8af89 Mon Sep 17 00:00:00 2001 From: galdafadi Date: Tue, 16 Jan 2024 17:19:26 -0500 Subject: [PATCH 7/9] JS page --- script.js | 120 ++++++++++++++++++++++-------------------------------- 1 file changed, 49 insertions(+), 71 deletions(-) diff --git a/script.js b/script.js index 35cb41a..48b1c6e 100644 --- a/script.js +++ b/script.js @@ -1,72 +1,50 @@ -// Load data from CSV -d3.csv('311-basic/311_boston_data.csv').then(data => { - // Parse the count as numbers - data.forEach(d => { - d.Count = +d.Count; - }); - - // Sort the data by Count in descending order - data.sort((a, b) => b.Count - a.Count); - - // Take only the top 10 reasons - const top10Data = data.slice(0, 10); - - // Set up the SVG container - const svg = d3.select('#chart-container') - .append('svg') - .attr('width', 800) - .attr('height', 400); - - // Set up scales - const xScale = d3.scaleBand() - .domain(top10Data.map(d => d.reason)) - .range([0, 800]) - .padding(0.1); - - const yScale = d3.scaleLinear() - .domain([0, d3.max(top10Data, d => d.Count)]) - .range([400, 0]); - - // Create bars with pink fill color - svg.selectAll('rect') - .data(top10Data) - .enter() - .append('rect') - .attr('x', d => xScale(d.reason)) - .attr('y', d => yScale(d.Count)) - .attr('width', xScale.bandwidth()) - .attr('height', d => 400 - yScale(d.Count)) - .attr('fill', 'pink'); - - // Add text labels with black color - svg.selectAll('text') - .data(top10Data) - .enter() - .append('text') - .text(d => `${d.reason}: ${d.Count}`) - .attr('x', d => xScale(d.reason) + xScale.bandwidth() / 2) - .attr('y', d => yScale(d.Count) - 5) - .attr('text-anchor', 'middle') - .style('font-size', '12px') - .style('fill', 'black'); - - // Add x-axis - svg.append('g') - .attr('transform', 'translate(0,400)') - .call(d3.axisBottom(xScale)) - .selectAll('text') - .attr('transform', 'rotate(-45)') - .style('text-anchor', 'end'); - - // Add y-axis - svg.append('g') - .call(d3.axisLeft(yScale)); - - // Add chart title - svg.append('text') - .attr('x', 400) - .attr('y', 30) - .attr('text-anchor', 'middle') - .style('font-size', '18px') - .text('Top 10 Reasons for 311 in Boston (2023)'); +// 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)); }); From 31b1d4b216159245c94ad1f40c445f03436ddde8 Mon Sep 17 00:00:00 2001 From: galdafadi Date: Tue, 16 Jan 2024 17:19:45 -0500 Subject: [PATCH 8/9] CSS page --- styles.css | 34 ++++++++++++++++------------------ 1 file changed, 16 insertions(+), 18 deletions(-) diff --git a/styles.css b/styles.css index fd0e5fb..7dd2969 100644 --- a/styles.css +++ b/styles.css @@ -1,26 +1,24 @@ -body { - font-family: 'Arial', sans-serif; - margin: 20px; - background-color: #f2f2f2; /* Light grey background */ +/* Styles for the bar chart */ +.bar { + fill: steelblue; } -#chart-container { - width: 800px; - margin: 20px auto; +.bar:hover { + fill: lightpink; } -h1 { - font-size: 32px; /* Bigger font size */ - font-weight: bold; /* Bold */ - text-align: center; +.axis-label { + font-size: 14px; + font-family: Arial, sans-serif; } -/* Darker pink for bars */ -rect { - fill: #ff6699; +.axis path, +.axis line { + fill: none; + stroke: black; + shape-rendering: crispEdges; } -/* Black text for labels */ -text { - fill: black; -} +/* Adding light grey background */ +body { + background-color: #f0f0f0; /* Light grey color */ \ No newline at end of file From 27ad49c5e052173bc51da2344261e4d525f97956 Mon Sep 17 00:00:00 2001 From: galdafadi Date: Tue, 16 Jan 2024 19:55:50 -0500 Subject: [PATCH 9/9] chatgpt conversation --- chatgpt_conversation.txt | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 chatgpt_conversation.txt diff --git a/chatgpt_conversation.txt b/chatgpt_conversation.txt new file mode 100644 index 0000000..efd17cd --- /dev/null +++ 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 + +