After my last blogpost I was a little frustrated at how poorly the title text resized using ggplot and ggsave. It was a minor issue to be honest, but I figured I could learn something new by exporting the data as geojson and plotting it using D3 js. So here it goes.

Precipitation in Colorado

The Scripts

<h3 style="text-align:center; margin-bottom:0; margin-top:1.5rem;">Precipitation in Colorado</h3>
<div class="hexplot">
<script src=""></script>

async function hexChart(){
    //Call the api
  var response = await fetch("");
  var hex_data = await response.json();
  const width = 960;
  const height = 600;
  const center = d3.geoCentroid(hex_data);
  const scale  = 7000;
  const offset = [width/2, height/2];
  const projection = d3.geoEquirectangular().scale(scale).center(center)
  const path = d3.geoPath().projection(projection);

  const colorScale = d3.scaleSequential()
    .domain([d3.max(hex_data.features, d =>, d3.min(hex_data.features, d =>])

  const svg =".hexplot")
      .attr("preserveAspectRatio", "xMinYMin meet")
      .attr("viewBox", "0 0 960 600")

        .attr("d", path)
        .attr("stroke", "white")
        .attr("stroke-width", "1.5")
        .attr("fill", function(d){return colorScale(});


It still needs a scale bar but we’re pretty close.