Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feedback #1

Open
wants to merge 2 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
2 commits
Select commit Hold shift + click to select a range
2dff70c
Setting up GitHub Classroom Feedback
github-classroom[bot] Jan 8, 2024
59effcd
adding new analysis
Jan 14, 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
20 changes: 20 additions & 0 deletions new-analysis/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bar Chart</title>

</head>

<body>
<h1>TEST</h1>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="script.js"></script>
<!-- Your chart will be appended here -->
<div id="chart_311"></div>
</body>

</html>
<!-- Your HTML goes here -->
70 changes: 70 additions & 0 deletions new-analysis/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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');
});
46 changes: 46 additions & 0 deletions new-analysis/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
/* 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%;
}