OJS Choropleth With Data From R

A small Quarto project/document [GH Repo] that:

• (optional) grabs the latest NOAA watches/warnings/hazaards shapefile
• displays an AlbersUSA projected map
• uses synthesized data from R as the basis for county-level data
• fills by county based on ^^ data
• overlays the areas with current hazards/warnings/watches

Go to this project directory and do:

• quarto render or quarto render -P update:TRUE if you want a new NOAA shapefile

// this will let us add our own CSS to the resultant document
html`<style>
.d3-tip {
  background-color: white;
  color: black;
  border: 1px solid black;
  padding: 6px;
  font-size: 10pt;
  line-height: 0.9;
  border-radius: 6px;
  pointer-events: none;
}

.county {
}

.state {
  pointer-events: none;
}

</style>`

d3 = require('d3@7', 'd3-geo@3')
topojson = require('topojson-client@3')
d3tip = require('https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.9.1/d3-tip.js')

// for our legendary legend
import { Legend } from '@d3/color-legend'

projection = d3.geoAlbersUsa()
alb_path = d3.geoPath().projection(projection)
alt_us = await FileAttachment('current-all.geojson').json()

// this is the file we downloaded above in R. 
// It'll get embedded in the document.
us = await FileAttachment('counties-10m.json').json()

// this puts the data frame into a form we can more easily use
county_data_transposed = transpose(county_data)

// rather than stick the data into the `us` topojson object
// we will build a simple mapped object so we can use the 
// FIPS code as a key to retrieve a value. 
map_data = new Map(county_data_transposed.map(d => [ d.FIPS, d.value ]));

value_range = d3.extent(county_data_transposed.map(d => d.value))
scale_fill_viridis_cividis = d3.scaleSequential(d3.interpolateCividis).domain(value_range)

Legend(d3.scaleSequential(value_range, d3.interpolateCividis), {
  title: 'Some Descriptive Legend Title'
})

chart = {

  const width = 960
  const height = 600

  // this will help make our svg responsive
  const svg = d3.create("svg")
    .attr("width", width)
    .attr("height", height)
    .attr("viewBox", [0, 0, width, height])
    .attr("style", "width: 100%; height: auto; height: intrinsic;")

  // we will display the value from the data frame we created in the tooltip
  const tip = d3tip().attr('class', 'd3-tip')
                .html((evt, d) => map_data.get(d.id))

  // enable the tooltips
  svg.call(tip)

  // enable the tooltips
  svg.append("g")
    .attr("class", "county")
    .selectAll("path")
    .data(topojson.feature(us, us.objects.counties).features)
    .enter()
      .append("path")
        .style('fill', d => scale_fill_viridis_cividis(d.val = map_data.get(d.id)))
        .on('mouseover', tip.show)
        .on('mouseout' , tip.hide)
        // .on('click', (evt, d) => console.log(d)) //window.location.href = "https://kagi.com/search?q=" + d.id  }) // whatev
        .attr('stroke', '#c3c3c399')
        .attr('stroke-width', 0.5)
        .attr('d', alb_path) // projected path

  // overlay the state layer
  svg.append("path")
    .datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b))
    .attr('class', 'state')
    .attr('fill', 'none')
    .attr('stroke', '#ffffff')
    .attr('stroke-width', 2)
    .attr("d", alb_path) // projected path

  // overlay the hazards layer
  svg.append("g")
      .selectAll("path")
      .data(alt_us.features)
    .join('path')
    .attr('stroke', '#e31a1c')
    .attr('stroke-width', 0.5)
    .attr('fill', '#252525aa')
    .attr('d', alb_path) // projected path

  return(svg.node())

}