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">
</div>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>

hexChart();
async function hexChart(){
//Call the api
var response = await fetch("https://raw.githubusercontent.com/mschmidty/datasets/master/geo/co_precip_hex.geojson");
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)
.translate(offset);
const path = d3.geoPath().projection(projection);

const colorScale = d3.scaleSequential()
.domain([d3.max(hex_data.features, d => d.properties.total), d3.min(hex_data.features, d => d.properties.total)])
.interpolator(d3.interpolateInferno);

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

svg.append("g")
.selectAll("path")
.data(hex_data.features)
.enter().append("path")
.attr("d", path)
.attr("stroke", "white")
.attr("stroke-width", "1.5")
.attr("fill", function(d){return colorScale(+d.properties.total)});

};
</script>

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