Colorado: Hex Plots, APIs, and D3js

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.