Skip to content

Commit

Permalink
complete assignment
Browse files Browse the repository at this point in the history
  • Loading branch information
@louis-costa
louis-costa committed Jan 15, 2024
1 parent 132c483 commit 229fccb
Show file tree
Hide file tree
Showing 5 changed files with 216 additions and 1 deletion.
0 311-basic/311_boston_data.csv → 311_boston_data.csv
View file
File renamed without changes.
19 changes: 18 additions & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
@@ -1 +1,18 @@
<!-- Your HTML goes here -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>D3 Bar Chart</title>
<link rel="stylesheet" href="styles.css">
<script src="https://d3js.org/d3.v6.min.js"></script>
</head>
<body>
<h1> Here's our chart: </h1>
<div id="chart"></div>
<script src="script.js"></script>
<break>
<p> Source: https://data.boston.gov/dataset/311-service-requests </p>

</body>
</html>
52 changes: 52 additions & 0 deletions script.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
// Load the CSV data
d3.csv("311_boston_data.csv", d => {
return {
reason: d.reason,
count: +d.Count // convert string to number
};
}).then(data => {
// Sort and slice the top 10 reasons
let topTenData = data.sort((a, b) => d3.descending(a.count, b.count)).slice(0, 10);

// Set up 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})`);

// X axis
const x = d3.scaleBand()
.range([0, width])
.domain(topTenData.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(topTenData, d => d.count)])
.range([height, 0]);
svg.append("g")
.call(d3.axisLeft(y));

// Bars
svg.selectAll("mybar")
.data(topTenData)
.join("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));
});
19 changes: 19 additions & 0 deletions styles.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
/* Add your styles here */
.bar {
fill: steelblue;
}

.bar:hover {
fill: orange;
}

.axis-label {
font-size: 14px;
}

.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
127 changes: 127 additions & 0 deletions wisethings.txt
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,127 @@
Q: What do they call the alphabet in Arkansas?
A: The impossible dream.
Green light in A.M. for new projects. Red light in P.M. for traffic tickets.
Q: Why does Washington have the most lawyers per capita and
New Jersey the most toxic waste dumps?
A: God gave New Jersey first choice.
So this is it. We're going to die.
You are taking yourself far too seriously.
_____________________________________
/ Q: What is the difference between a \
\ duck? A: One leg is both the same. /
-------------------------------------
\ ^__^
\ (oo)\_______
(__)\ )\/\
||----w |
|| ||
_______________________________________
/ The lunatic, the lover, and the poet, \
| Are of imagination all compact... |
| |
| -- Wm. Shakespeare, "A Midsummer |
\ Night's Dream" /
---------------------------------------
\ ^__^
\ (oo)\_______
(__)\ )\/\
||----w |
|| ||
_______________________________________
< You will be run over by a beer truck. >
---------------------------------------
\ ^__^
\ (oo)\_______
(__)\ )\/\
||----w |
|| ||
_________________________________________
/ In the plot, people came to the land; \
| the land loved them; they worked and |
| struggled and had lots of children. |
| There was a Frenchman who talked funny |
| and a greenhorn from England who was a |
| fancy-pants but when it came to the |
| crunch he was all courage. Those novels |
| would make you retch. |
| |
| -- Canadian novelist Robertson Davies, |
| on the generic Canadian |
| |
\ novel. /
-----------------------------------------
\ ^__^
\ (oo)\_______
(__)\ )\/\
||----w |
|| ||
_______________________________________
/ I dote on his very absence. \
| |
| -- William Shakespeare, "The Merchant |
\ of Venice" /
---------------------------------------
\ ^__^
\ (oo)\_______
(__)\ )\/\
||----w |
|| ||
________________________________________
/ Q: Why should you always serve a \
| Southern Carolina football man |
| |
| soup in a plate? A: 'Cause if you give |
\ him a bowl, he'll throw it away. /
----------------------------------------
\ ^__^
\ (oo)\_______
(__)\ )\/\
||----w |
|| ||
____________________________
< Just to have it is enough. >
----------------------------
\ ^__^
\ (oo)\_______
(__)\ )\/\
||----w |
|| ||
_________________________________________
/ There is an old time toast which is \
| golden for its beauty. "When you ascend |
| the hill of prosperity may you not meet |
| a friend." |
| |
\ -- Mark Twain /
-----------------------------------------
\ ^__^
\ (oo)\_______
(__)\ )\/\
||----w |
|| ||
_______________________________________
/ There will be big changes for you but \
\ you will be happy. /
---------------------------------------
\ ^__^
\ (oo)\_______
(__)\ )\/\
||----w |
|| ||
_______________________________________
/ Don't you wish you had more energy... \
\ or less ambition? /
---------------------------------------
\ ^__^
\ (oo)\_______
(__)\ )\/\
||----w |
|| ||
_________________________________
< You too can wear a nose mitten. >
---------------------------------
\ ^__^
\ (oo)\_______
(__)\ )\/\
||----w |
|| ||

0 comments on commit 229fccb

Please sign in to comment.