I’ve been (mostly) keeping up with annual updates for my R/{sf} U.S. foliage post which you can find on GH. This year, we have Quarto, and it comes with so many batteries included that you’d think it was Christmas. One of those batteries is full support for the Observable runtime. These are used in {ojs} Quarto blocks, and rendered versions can run anywhere.
The Observable platform is great for both tinkering and publishing (we’re using it at work for some quick or experimental vis work), and with a few of the recent posts, here, showing how to turn Observable notebooks into Quarto documents, you’re literally two clicks or one command line away from using any public Observable notebook right in Quarto.
I made a version of the foliage vis in Observable and then did the qmd conversion using the Chrome extension, tweaked the source a bit and published the same in Quarto.
The interactive datavis uses some foundational Observable/D3 libraries:
- d3/choropleth: for making the choropleth map
- mbostock/scrubber: for making the slider/play control
- d3/color-legend: for displaying a color swatch legend
In the JS code we set some datavis-centric values:
foliage_levels = [0.01, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6]
foliage_colors = ["#83A87C", "#FCF6B4", "#FDCC5C", "#F68C3F", "#EF3C23", "#BD1F29", "#98371F"]
foliage_labels = ["No Change", "Minimal", "Patchy", "Partial", "Near Peak", "Peak", "Past Peak"]
week_label = ["Sept 5th", "Sept 12th", "Sept 19th", "Sept 26th", "Oct 3rd", "Oct 10th", "Oct 17th", "Oct 24th", "Oct 31st", "Nov 7th", "Nov 14th", "Nov 21st"]
We then borrow the U.S. Albers-projected topojson file from the Choropleth example notebook and rebuild the outline mesh and county geometry collections, since we need to get rid of Alaska and Hawaii (they’re not present in the source data). We do this by filtering out two FIPS codes:
counties = {
var cty = topojson.feature(us, us.objects.counties);
cty.features = cty.features.filter(
(d) => (d.id.substr(0, 2) != "02") & (d.id.substr(0, 2) != "15")
);
return cty;
}
I also ended up modifying the source CSV a bit to account for missing counties.
After that, it was a straightforward call to our imported Choropleth function:
chart = Choropleth(rendered2022, {
id: (d) => d.id.toString().padStart(5, "0"), // this is needed since the CSV id column is numeric
value: (d) => d[week_label.indexOf(week) + 1], // this gets the foliage value based on which index the selected week is at
scale: d3.scaleLinear, // this says to map foliage_levels to foliage_colors directly
domain: foliage_levels,
range: foliage_colors,
title: (f, d) =>
`${f.properties.name}, ${statemap.get(f.id.slice(0, 2)).properties.name}`, // this makes the county hover text the county + state names
features: counties, // this is the counties we modified
borders: statemesh, // this is the statemesh
width: 975,
height: 610
})
and placing the legend and scrubbing slider.
The only real difference between the notebook and qmd is the inclusion of the source functions rather than use Observable’s import (I’ve found that there’s a slight load delay for imports when network conditions aren’t super perfect and the inclusion of the source — WITH copyrights — makes up for that).
I’ve set up the Quarto project so that renders go to the docs/ directory, which makes it easy to publish as a GH page.
FIN
Drop issues on GH if anything needs clarifying or fixing and go experiment! You can’t break anything either on Observable or locally that version control can’t fix (yes, Observable has version control!).
Some things to consider modifying/adding:
- have a click take you to a (selectable?) mapping service, so folks can get driving directions
- turn the hover text into a proper tooltip
- speed up or slow down the animation when ‘Play’ is tapped
- use different colors
- bring in older datasets (see the
foliageGH repo) and make multiple maps or let the user select them or have them compare across years
Saying The Quiet Part Out Loud On Juneteenth
I realize you have to be living under a rock in the U.S. to not know that yesterday, was Juneteenth (a portmanteau of “June Nineteenth”). Still, I feel compelled to explain that said date marks the day when federal troops arrived in Galveston, Texas in 1865 to take control of the state and ensure that all enslaved people be freed. (See, Texas has always been kinda horrible when it comes to basic human decency). The arrival of said troops came ~2.5 years after the signing of the Emancipation Proclamation. The day honors the end to slavery in the United States.
GreyNoise (my employer) — like an increasing number of organizations in the U.S. — observes Juneteenth as a company-wide holiday, and I’ll be spending part of today pondering that word, “end”, in the last sentence of the previous paragraph.
There are two major political parties in the U.S. and one just decided, this past Juneteenth weekend, we no longer need the Voting Rights Act of 1965. March 7th of that year was a Sunday, known today as “Bloody Sunday” (it turns out there have been far too many of those kinds of Sundays). It was a day when Alabama state troopers beat & whipped voting rights advocates with nightsticks, and also used chemical weapons on them, in an effort to keep in place discriminatory practices that were extensively used to prevent African Americans from exercising their right to vote.
The act banned literacy tests for voting, required federal oversight over voter registration in areas where less than 50 percent of the non-white population had registered to vote, and authorized the U.S. attorney general to investigate the use of poll taxes in state and local elections. (In 1964, the 24th Amendment made poll taxes illegal in federal elections; poll taxes in state elections were banned in 1966 by the U.S. Supreme Court.)
I’m fairly certain (~95%) — regardless of the party in power — we’ll see the current Supreme Court overturn the state poll tax decision within the next 5-10 years (thankfully, constitutional amendments are a bit harder to wipe way). You can definitely say goodbye to the voting rights act if Republicans gain control of Congress and especially if they regain Congress and the POTUS seat.
Both of those events will make it possible for ~21 states to become even more evil than they already are, and set the stage for a few, awful decades.
I know gas is expensive.
I know food is more expensive than ever.
I know some shelves are bare.
I know lines are longer.
I know we’re still in a pandemic.
I also know that I don’t want to see the devolution of America back to when it was so “great” that we cheered on police when they were treating innocent, peaceful citizens like armed, enemy combatants, and ensured the reign of evil men by making it impossible for large swaths of Americans to vote.
In the fall of 2022 and fall of 2024, we’ll know if we, as a nation, care more about convenience than conscience.
Which side of Juneteenth will you be on when the time comes to choose the path forward?