+# Rochester Region Federal Funds Dashboard {toc-text="Introduction"}
-
How the Rochester Region Is Spending Federal Recovery Dollars
+#### How the Rochester Region Is Spending Federal Recovery Dollars
**This dashboard is a draft undergoing active development. It should not be shared or used for analysis.**
@@ -200,7 +200,7 @@ building blocks of an inclusive recovery and equitable growth, shown below.
[{fig-align="center"}](https://www.urban.org/research/publication/inclusive-recovery-us-cities)
+country](../www/images/building-blocks.png){fig-align="center"}](https://www.urban.org/research/publication/inclusive-recovery-us-cities)
The dashboard is laid out as follows:
@@ -309,11 +309,11 @@ pct_allocated_inclusive_recovery |>
)
```
-## These Data in Action
+### These Data in Action
These number have real effects on people’s lives. For example, [insert GI recipient’s name], seen below, received funding through the City of Rochester’s Guaranteed income pilot. This means that she received $X each month over [time period]. This helped her XYZ.
-
+
Out of the 65% of funds allocated to programs that align with the five building
blocks of an inclusive recovery, the most funding has been allocated to
@@ -374,11 +374,11 @@ data_reordered %>%
```
-## How might Rochester invest more in some of these building blocks?
+### How might Rochester invest more in some of these building blocks?
Other places have found ways to use federal funds to invest in stabilizing housing, building wealth, and creating jobs. For instance, the City of Boston is using ARPA funds to transform publicly-owned land into green, mixed income communities. One project in Chinatown, shown below, will include 83 affordable rental units and 36 affordable homeownership units. The property is a short walk to two train stops and is located in a walkable and bikeable neighborhood. The project was developed after extensive community engagement with nearby neighbors and will also be energy efficient and follow the City of Boston’s Carbon Free, Climate Resilient, and Healthy Community goals.
-
+
## What policy areas are being funded?
@@ -417,7 +417,7 @@ bottom3 <-
str_to_lower()
```
-::: panel-tabset
+::: {.panel-tabset .nav-pills}
## Allocated
```{r}
@@ -492,7 +492,7 @@ data %>%
```
:::
-## What subtopics are funded within each policy area?
+### What subtopics are funded within each policy area?
The figure below provides a more detailed breakdown of allocations to each
policy area. Each policy area tab breaks down the allocations into subtopics.
@@ -500,7 +500,7 @@ For example, most of the money allocated to community and economic development
has gone to workforce development.
::: panel-tabset
-### Community and Economic Development
+#### Community and Economic Development
```{r}
#| fig-cap: !expr source
@@ -528,7 +528,7 @@ data %>%
labs(x = NULL, y = "Total allocation")
```
-### Infrastructure
+#### Infrastructure
```{r}
#| fig-cap: !expr source
@@ -556,7 +556,7 @@ data %>%
labs(x = NULL, y = "Total allocation")
```
-### Housing
+#### Housing
```{r}
#| fig-cap: !expr source
@@ -584,7 +584,7 @@ data %>%
labs(x = NULL, y = "Total allocation")
```
-### Public Safety
+#### Public Safety
```{r}
#| fig-cap: !expr source
@@ -612,7 +612,7 @@ data %>%
labs(x = NULL, y = "Total allocation")
```
-### Social Services
+#### Social Services
```{r}
#| fig-cap: !expr source
@@ -640,7 +640,7 @@ data %>%
labs(x = NULL, y = "Total allocation")
```
-### Public Health
+#### Public Health
```{r}
#| fig-cap: !expr source
@@ -668,7 +668,7 @@ data %>%
labs(x = NULL, y = "Total allocation")
```
-### Operations
+#### Operations
```{r}
#| fig-cap: !expr source
@@ -697,7 +697,7 @@ data %>%
```
:::
-## What does this look like in action?
+### What does this look like in action?
PLACEHOLDER TEXT
@@ -760,7 +760,7 @@ pct_spent |>
)
```
-## How does funding align with the Rochester Area Community Foundation's priorities?
+### How does funding align with the Rochester Area Community Foundation's priorities?
```{r racf-funding-pct}
#| label: racf-funding-pct
@@ -880,7 +880,7 @@ data %>%
labs(x = NULL, y = "Total Allocation")
```
-## An example: RENEW
+### An example: RENEW
PLACEHOLDER TEXT
@@ -944,12 +944,14 @@ spending <-
genesee_spending <-
spending %>% filter(str_detect(`Street`, "873|Genesee"))
+Sys.setenv(PROJ_LIB = "")
project_locations <-
read_csv("data/data-raw/addresses-geocoded.csv") %>%
janitor::clean_names() %>%
- filter(longitude != 0) %>%
- sf::st_as_sf(coords = c("longitude", "latitude"), crs = 4326) %>%
- st_transform(st_crs(4326)) %>%
+ filter(longitude != 0) |>
+ st_as_sf(coords = c("longitude", "latitude"),
+ crs = 4326) |>
+ st_transform(crs = 4326) %>%
filter(type == "arpa_spending_status") %>%
distinct(match_addr, .keep_all = TRUE) %>%
left_join(spending, by = c("f_address" = "Street")) %>%
@@ -959,7 +961,8 @@ project_locations <-
`ARPA Funding` = if_else(str_detect(match_addr, "873|Genesee"), genesee_spending$`ARPA Funding`, `ARPA Funding`),
`Arpa funding numeric` = if_else(str_detect(match_addr, "873|Genesee"), genesee_spending$`Arpa funding numeric`, `Arpa funding numeric`)
) %>%
- drop_na(`Project name`)
+ drop_na(`Project name`) |>
+ mutate(type = if_else(type == "arpa_spending_status", "City of Rochester Capital Projects", type))
```
```{r}
@@ -1011,9 +1014,7 @@ my_label <- glue::glue("{project_locations$`Project name`} ({pr
map(htmltools::HTML)
project_location_map <-
- mapview(
- project_locations %>%
- mutate(type = if_else(type == "arpa_spending_status", "City of Rochester Capital Projects", type)),
+ mapview(project_locations,
zcol = "type", cex = "Arpa funding numeric", col.regions = "grey",
popup = my_popup,
label = my_label,
@@ -1156,11 +1157,11 @@ hispanic_map + project_location_map
-## What does this look like?
+### What does this look like?
HINGE EXAMPLE PLACEHOLDER TEXT
-
+
## Explore All Programs Funded {#programs-table}
@@ -1177,7 +1178,7 @@ table.
Data current as of: `r last_update_date`
```{r}
-#|label: "programs-table"
+#| label: "programs-table"
data %>%
# Should subtopic be included?
select(
diff --git a/style.css b/style.css
index 3e7a6ac..32f1a64 100644
--- a/style.css
+++ b/style.css
@@ -56,7 +56,7 @@ p.caption {
min-height: 44px; /* Minimum height is 44 pixels */
overflow-y: auto; /* Adds a scrollbar if the content overflows vertically */
background: white;
- border: 1px solid #ddd; /* Sets border around the element */
+ /* border: 1px solid #ddd; /* Sets border around the element */
border-radius: 4px; /* Rounds the corners of the element's border */
}
@@ -67,7 +67,7 @@ p.caption {
color: #ffffff; /* Sets the text color to white */
font-weight: bold; /* Sets the font weight to bold */
font-family: 'Proxima', serif; /* Sets the font family */
- font-size: 75%;
+ font-size: 90%;
}
@@ -80,7 +80,7 @@ p.caption {
/* Sets the color of text inside anchor tags that are children of list items, which are in .navbar-nav within .navbar-default */
.navbar-default .navbar-nav > li > a {
color: #FFFFFF; /* Sets the text color to white */
- border: 2px solid white; /* Adjust the border width and color as needed */
+ /* border: 2px solid white; /* Adjust the border width and color as needed */
box-shadow: 0px 0px 10px white; /* Optional: add a subtle shadow for depth */
}
diff --git a/styles.scss b/styles.scss
index 1783a3f..21ebc69 100644
--- a/styles.scss
+++ b/styles.scss
@@ -13,167 +13,75 @@ $yellow: #D6A123;
$pink: #ED0A72;
$light-pink: lighten($pink, 20%);
$magenta: #D442CF;
-$dark-gray: #696B4F;
-$light-gray: #8FAEBE;
$orange: #AB5833;
$yellow-brown: #978638;
$purple: #5D4E78;
-$dark-blue: #36689F;
+$blue: #36689F;
$light-green: #70910B;
-// Colors
-$dark-green: #858E79;
-$light-green: #D1D9CE;
+$gray-green: #858E79;
$cream: #FDFBF7;
$gray: #64605f;
+$dark-gray: #696B4F;
+$light-gray: #8FAEBE;
// Base document colors
$navbar-bg: $yellow; // navbar
-$navbar-fg: $magenta; // navbar foreground elements
-$navbar-hl: $purple; // highlight color when hovering over navbar links
+$navbar-fg: $cream; // navbar foreground elements
+$navbar-hl: $cream; // highlight color when hovering over navbar links
// $body-bg: $light-green; // page background
$body-color: $gray; // page text
$footer-bg: $cream; // footer
$link-color: $purple; // hyperlinks
-// Inline code
-$code-bg: $cream; // inline code background color
-$code-color: $purple; // inline code text color
-// Code blocks
-$code-block-bg: $cream; // code block background color
/*-- scss:rules--*/
+/* -------------- Global Formats -------------------*/
+
/* Sets the font family and size for elements with class .container-fluid (usually used for navbar text) */
.container-fluid {
font-family: 'Proxima Nova', serif;
- font-size: 1.5em;
+ font-size: 2em;
}
/* Sets the font family for body, table, and elements with class .chart */
body, table, .chart {
font-family: 'Proxima Nova', sans-serif; /* Sets the font family */
+ font-size: 1.5em;
+ margin: 5px 0 5px 0;
}
/* Sets the font family, color, font size, and margin for heading elements (h1 to h6) */
h1 {
font-family: $heading-font; /* Sets the font family */
- font-size: 2.25em;
- color: $dark-blue; /* Sets the font color to an orange shade */
+ font-size: 3em;
+ color: $blue; /* Sets the font color to an orange shade */
margin: 5.0 0 .5em; /* Sets the margin around the headings */
}
-h2, h3 {
+h2, h3, h4, h5, h6 {
font-family: $heading-font; /* Sets the font family */
font-size: 2.0em;
color: $yellow; /* Sets the font color to an orange shade */
margin: 5.0 0 .5em; /* Sets the margin around the headings */
}
-h4, h5, h6 {
- font-family: $heading-font; /* Sets the font family */
- font-size: 1.5em;
- color: $light-green; /* Sets the font color to an orange shade */
- margin: 5.0 0 .5em; /* Sets the margin around the headings */
-}
+
/* Sets the margin for paragraph elements */
p {
- margin: 0 0 8px 0; /* Sets the margin to 0 on top, 8 pixels on bottom, and 0 on the left and right */
-}
-
-p.caption {
- font-size: 8%;
-}
-
-/* Sets the display properties for elements with class .cols */
-.cols {
- display: flex; /* Makes this element a flexible box container */
- gap: 10px; /* Sets the gap between the child elements to 10 pixels */
-}
-
-/* Styles the tablist inside .nav-tabs which is inside .nav */
-.nav > .nav-tabs > .tablist {
- display: inline-table; /* The element is displayed as an inline-level table */
- max-height: 500px; /* Maximum height is 500 pixels */
- min-height: 44px; /* Minimum height is 44 pixels */
- overflow-y: auto; /* Adds a scrollbar if the content overflows vertically */
- background: $cream;
- border: 1px solid #ddd; /* Sets border around the element */
- border-radius: 4px; /* Rounds the corners of the element's border */
-}
-
-/* Styles for the navbar */
-.navbar {
- display: block; /* The element is displayed as a block-level element */
- background-color: $yellow; /* Sets background color to an orange shade */
- color: $cream; /* Sets the text color to white */
- font-weight: bold; /* Sets the font weight to bold */
- font-family: $font-family-sans-serif; /* Sets the font family */
- font-size: 75%;
-
-}
-
-
-/* Sets the color of text inside the .navbar-brand class inside .navbar-default */
-.navbar-default .navbar-brand {
- color: $cream; /* Sets the text color to white */
+ margin: 15px 0 15px 0; /* Sets the margin to 15 on top and bottom, 0 pixels on right/left */
}
-/* Sets the color of text inside anchor tags that are children of list items, which are in .navbar-nav within .navbar-default */
-.navbar-default .navbar-nav > li > a {
- color: $cream; /* Sets the text color to white */
- border: 2px solid $cream; /* Adjust the border width and color as needed */
- box-shadow: 0px 0px 10px $cream; /* Optional: add a subtle shadow for depth */
-}
-
-/* Sets the styles for the active state, focused state and hover state of anchor tags within list items in .navbar-nav within .navbar-default */
-.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover {
- color: $yellow; /* Sets the text color to an orange shade */
- background-color: $cream; /* Sets the background color to white */
- font-family: "Proxima Nova"; /* Sets the font family */
- border: 2px solid $cream; /* Adjust the border width and color as needed */
- box-shadow: 0px 0px 10px $cream; /* Optional: add a subtle shadow for depth */
-}
-
-/* Styles for primary buttons in different states (normal, hover, active, visited) */
-.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:visited {
- background-color: $yellow !important; /* Sets the background color to an orange shade, !important overrides other conflicting styles */
- border-radius: 8px !important; /* Sets rounded corners with 8 pixels radius, !important overrides other conflicting styles */
- border: 2px solid $cream; /* Adjust the border width and color as needed */
- box-shadow: 0px 0px 10px $cream; /* Optional: add a subtle shadow for depth */
-}
-
-/* Styles for primary outlined buttons in different states (normal, hover, active, visited) */
-.btn-outline-primary, .btn-outline-primary:hover, .btn-outline-primary:active, .btn-outline-primary:visited {
- background-color: $yellow !important; /* Sets the background color to an orange shade, !important overrides other conflicting styles */
- border-radius: 8px !important; /* Sets rounded corners with 8 pixels radius, !important overrides other conflicting styles */
- border: 2px solid $cream; /* Adjust the border width and color as needed */
- box-shadow: 0px 0px 10px $cream; /* Optional: add a subtle shadow for depth */
-}
-
-/* Styles for the first anchor tag in a list within .nav-pills inside .color-tabs */
-.color-tabs > .nav-pills > li:nth-of-type(1) > a {
- color: $pink; /* Sets the text color to black */
- background-color: $cream; /* Sets the background color to white */
- border-radius: 8px !important; /* Sets rounded corners with 8 pixels radius, !important overrides other conflicting styles */
-}
-
-/* Styles for hover, focus and active states of the first anchor tag in a list within .nav-pills inside .color-tabs */
-.color-tabs > .nav-pills > li:nth-of-type(1) > a:hover, .color-tabs > .nav-pills > li:nth-of-type(1) > a:focus, .color-tabs > .nav-pills > li:nth-of-type(1).active > a, .color-tabs > .nav-pills > li:nth-of-type(1).active > a:hover, .color-tabs > .nav-pills > li:nth-of-type(1).active > a:focus {
- color: $cream; /* Sets the text color to white */
- background-color: $pink; /* Sets the background color to a pink shade */
+/* Header image formatting */
+#header {
+ padding-top: 12px;
}
-/* Global Formats */
-
-/* Sets the font family for elements with class .main-container */
-.main-container {
- font-family: 'Proxima Nova', serif; /* Sets the font family */
-}
/* Adds margin at the bottom of elements with class .tab-content */
.tab-content {
- margin-bottom: 50px; /* Adds 50 pixels margin at the bottom */
+ margin-bottom: 30px; /* Adds 30 pixels margin at the bottom */
}
/* Sets color for unvisited links */
@@ -183,69 +91,73 @@ a:link {
/* Sets color for visited links */
a:visited {
- color: lighten($purple, 20%); /* Sets the text color to a shade of blue */
+ color: $light-pink; /* Sets the text color to a shade of blue */
}
/* Sets color for links when the mouse cursor is over them */
a:hover {
- color: lighten($pink, 20%); /* Sets the text color to a shade of pink */
+ color: $light-pink; /* Sets the text color to a shade of pink */
}
/* Sets color for links at the moment they are clicked */
a:active {
- color: $magenta; /* Sets the text color to a shade of pink */
+ color: $cream; /* Sets the text color to a shade of pink */
}
-/* Adds padding at the top of elements with id #header */
-#header {
- padding-top: 12px; /* Adds 12 pixels of padding at the top */
-}
-/* Sets the background color and border color for active .list-group-item elements */
-.list-group-item.active {
- background-color: $yellow; /* Sets the background color to an orange shade */
- border-color: $yellow; /* Sets the border color to an orange shade */
-}
+/* -------------- Navbar + Pills Formats -------------------*/
+
+/* Some terminology: */
+/* navtabs: the tabs displayed in panel-tabset */
+/* nav-link: the text inside the tabs */
+/* tab-content: the content displayed when a tab is clicked */
+
+/* Styles for the navbar */
+.navbar {
+ display: block; /* The element is displayed as a block-level element */
+ background-color: $blue; /* Sets background color to an orange shade */
+ color: $cream; /* Sets the text color to white */
+ font-weight: bold; /* Sets the font weight to bold */
+ font-family: $font-family-sans-serif; /* Sets the font family */
+ font-size: 100%;
-/* Sets the background color and border color for hovered active .list-group-item elements */
-.list-group-item.active:hover {
- background-color: #000000; /* Sets the background color to black */
- border-color: #000000; /* Sets the border color to black */
}
-/* Sets the border radius for elements with class .tocify */
-.tocify {
- border-radius: 0; /* Removes rounded corners */
+/* Make active navbar tab yellow and inactive ones cream */
+.navbar-nav .nav-link, .navbar-nav .nav-link.show {
+ color: $cream;
}
-/* Button Formatting */
-/* Sets the border radius for elements with class .btn */
-.btn {
- border-radius: 0; /* Removes rounded corners */
+.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
+ color: $yellow;
}
-/*pills formatting */
-
-/* Sets the background color for active anchor tags within a list in .nav-pills */
-.nav-pills > li.active > a {
- background-color: $yellow; /* Sets the background color to an orange shade */
+/* Styles the tablist inside .nav-tabs which is inside .nav */
+.nav > .nav-tabs > .tablist {
+ display: inline-table; /* The element is displayed as an inline-level table */
+ overflow-y: auto; /* Adds a scrollbar if the content overflows vertically */
+ background-color: $pink;
+ border: 1px solid #ddd; /* Sets border around the element */
+ border-radius: 4px; /* Rounds the corners of the element's border */
}
-/* Sets the background color for focused active anchor tags within a list in .nav-pills */
-.nav-pills > li.active > a:focus {
- background-color: $yellow; /* Sets the background color to an orange shade */
+/* Styles for the first anchor tag in a list within .nav-pills inside .color-tabs */
+.color-tabs > .nav-pills > li:nth-of-type(1) > a {
+ color: $pink; /* Sets the text color to black */
+ background-color: $cream; /* Sets the background color to white */
+ border-radius: 8px !important; /* Sets rounded corners with 8 pixels radius, !important overrides other conflicting styles */
}
-/* Sets the color and background color for focused anchor tags within a list in .nav */
-.nav > li > a:focus {
- color: $pink; /* Sets the text color to a pink shade */
- background-color: $cream; /* Sets the background color to white */
+/* Styles for hover, focus and active states of the first anchor tag in a list within .nav-pills inside .color-tabs */
+.color-tabs > .nav-pills > li:nth-of-type(1) > a:hover, .color-tabs > .nav-pills > li:nth-of-type(1) > a:focus, .color-tabs > .nav-pills > li:nth-of-type(1).active > a, .color-tabs > .nav-pills > li:nth-of-type(1).active > a:hover, .color-tabs > .nav-pills > li:nth-of-type(1).active > a:focus {
+ background-color: $pink; /* Sets the background color to a pink shade */
+ color: $pink; /* Sets the text color to white */
}
/* Sets the background color and text color for hovered anchor tags within a list in .nav */
.nav > li > a:hover {
- background-color: $pink; /* Sets the background color to a pink shade */
- color: $cream; /* Sets the text color to white */
+ color: $pink; /* Sets the background color to a pink shade */
+ background-color: $cream; /* Sets the text color to white */
}
/* Sets the text color for anchor tags with role attribute set to tab */
@@ -253,6 +165,19 @@ a[role=tab] {
color: $pink; /* Sets the text color to a pink shade */
}
+
+
+/* -------------- Misc Styling -------------------*/
+
+.quarto-title-block .quarto-title-banner {
+ background-image: url(www/images/act-logo.png);
+ background-size: 800px;
+ background-position: left;
+ background-repeat: no-repeat;
+ padding-left: 10px;
+ background-origin: content-box;
+}
+
/* Media query for print styling */
@media print {
/* Hide elements with ids #TOC, #toc, #header-pinned and class .nav-tabs, .exclude when printing */
@@ -277,17 +202,7 @@ a[role=tab] {
}
}
-.quarto-title-block .quarto-title-banner {
- background-image: url(www/images/act-logo.png);
- background-size: 800px;
- background-position: left;
- background-repeat: no-repeat;
- padding-left: 10px;
- background-origin: content-box;
-}
-
-
-/* -------------- div tips-------------------*/
+/* -------------- Div tips-------------------*/
div.warning, div.tip, div.tryit, div.challenge, div.explore {
border: 4px #dfedff; /* very light blue */