Skip to content

Commit db3440a

Browse files
authored
US dams example dashboard (#1350)
Adds US dams showcase example
1 parent 27a0bd6 commit db3440a

File tree

12 files changed

+3959
-0
lines changed

12 files changed

+3959
-0
lines changed

docs/assets/us-dams-dark.webp

28.4 KB
Binary file not shown.

docs/assets/us-dams.webp

25.6 KB
Binary file not shown.

examples/README.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,12 @@
3535

3636
[Source](./mortgage-rates) · This dashboard visualizes Freddie Mac’s historical mortgage rates data. The included data loader demonstrates how to retrieve CSV data from Freddie Mac and visualize the result as a zoomable chart with Observable Plot. The larger time-series line chart at the bottom allows brushing to select an arbitrary time range, while the smaller visualization above zooms to show the selected range.
3737

38+
### [`us-dams`](https://observablehq.observablehq.cloud/framework-example-us-dams/) - U.S. dam conditions
39+
40+
<a href="https://observablehq.observablehq.cloud/framework-example-us-dams/"><img src="../docs/assets/us-dams.webp" alt="U.S. dams" width="312" height="237"></a>
41+
42+
[Source](./us-dams) · This dashboard visualizes locations and conditions for 90k+ dams in the U.S. with data from the National Inventory of Dams (NID). An R data loader accesses the data directly from the NID and generates a simplified CSV. Maps created with deck.gl allow a user to zoom and scroll while exploring dam locations nationwide, or by state. Bar and bubble charts made in Observable Plot highlight dam conditions and hazard potential.
43+
3844
## Technique examples 🛠️
3945

4046
### Charts

examples/us-dams/.gitignore

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
.DS_Store
2+
dist/
3+
src/.observablehq/cache/
4+
node_modules/
5+
yarn-error.log
6+
src/.observablehq/deploy.json
7+
.Rhistory
8+
.Rdata

examples/us-dams/README.md

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
[Framework examples →](../)
2+
3+
# U.S. dams
4+
5+
View live: <https://observablehq.observablehq.cloud/framework-example-us-dams/>
6+
7+
This Observable Framework example explores data for 90,000+ dams in the United States from the [National Inventory of Dams](https://nid.sec.usace.army.mil/) (NID).
8+
9+
The pages feature nationwide and state-by-state summaries of dam locations, highlighting dam conditions and hazard assessment.
10+
11+
Interactive maps are created with [deck.gl](https://deck.gl/). To create your own maps with deck.gl in Observable Framework, see our [documentation](https://observablehq.com/framework/lib/deckgl). All other charts are built with [Observable Plot](https://observablehq.com/plot/), and searchable tables are created with Observable Inputs by combining [Inputs.search and Inputs.table](https://observablehq.com/framework/inputs/search).
12+
13+
## Implementation
14+
15+
```
16+
.
17+
├── README.md
18+
├── observablehq.config.js
19+
├── package.json
20+
└── src
21+
├── data
22+
│   ├── county_fips_master.csv
23+
│   ├── dam-simple.csv.R
24+
│   └── us-state-capitals.csv
25+
├── by-state.md
26+
└── index.md
27+
```
28+
29+
The R data loader `dam-simple.csv.R` accesses data directly from the NID (at https://nid.sec.usace.army.mil/api/nation/csv) and generates the `dam-simple.csv` snapshot used in both pages. To run the data loader, you need to have [R](https://www.r-project.org/) installed, along with the [data.table](https://github.com/Rdatatable/data.table), [dplyr](https://github.com/tidyverse/dplyr), and [readr](https://github.com/tidyverse/readr) packages (e.g. with `install.packages("dplyr")`).
30+
31+
### Data
32+
33+
- Dam records are accessed from the NID API as a CSV, then minimally wrangled by the `dam-simple.csv.R` data loader to produce the static file with dam records used in our dashboard (`dam-simple.csv`)
34+
35+
- County FIPS codes (`src/data/county_fips_master.csv`) are from https://github.com/kjhealy/fips-codes/blob/master/county_fips_master.csv
36+
37+
- US state capitals and locations (`src/data/us-state-capitals.csv`) are from https://github.com/jasperdebie/VisInfo/blob/master/us-state-capitals.csv
38+
39+
- County, state, and nation-level spatial polygons are accessed from the [us-atlas](https://www.npmjs.com/package/us-atlas?activeTab=readme) repository
Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
export default {
2+
root: "src",
3+
title: "U.S. dams overview",
4+
theme: "wide",
5+
sidebar: true,
6+
pager: false,
7+
toc: false
8+
};

examples/us-dams/package.json

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"type": "module",
3+
"private": true,
4+
"scripts": {
5+
"clean": "rimraf src/.observablehq/cache",
6+
"build": "rimraf dist && observable build",
7+
"dev": "observable preview",
8+
"deploy": "observable deploy",
9+
"observable": "observable"
10+
},
11+
"dependencies": {
12+
"@observablehq/framework": "^1.7.1",
13+
"d3-dsv": "^3.0.1",
14+
"d3-time-format": "^4.1.0",
15+
"topojson-client": "^3.1.0",
16+
"topojson-simplify": "^3.0.3"
17+
},
18+
"devDependencies": {
19+
"rimraf": "^5.0.5"
20+
},
21+
"engines": {
22+
"node": ">=18"
23+
}
24+
}

0 commit comments

Comments
 (0)