This repository has been archived by the owner on Dec 22, 2024. It is now read-only.
generated from code4policy/dataviz-with-gpt
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
132c483
commit 229fccb
Showing
5 changed files
with
216 additions
and
1 deletion.
There are no files selected for viewing
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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)); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 | | ||
| || || |