Skip to content
This repository has been archived by the owner on Dec 22, 2024. It is now read-only.

Feedback #1

Open
wants to merge 2 commits into
base: feedback
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
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
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
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%;
}