DC School BudgetsZIP codesMy U.S. Map (Canvas)Planes IIPIREPMy U.S. Map (SVG)Earthquakes on Mapbox GLMapzen DEMMapbox + ThreeChoropleth with OpenLayersdevicePixelRatioHello, LeafletMy Zoom to Bounding BoxD3 + LeafletProject to Bounding BoxZoom to CountyBrushable earthquakesStinkyMapLibre quakesHello, MapLibre!MapLibre earthquake slider
Hot spots
map = {
const div = d3.select(DOM.element('div')).style('width', width + 'px').style('height', height + 'px');
const svg = div.append('svg').style('position', 'absolute').attr('width', '100%').attr('height', '100%');
div.node().insertBefore(basemap.canvas, svg.node());
d3.select(basemap.canvas).style('position', 'absolute');
div.select('svg').selectAll("circle")
.data(data)
.join("circle")
// .sort(function(a,b) { return Math.abs(b.properties[budget]) - Math.abs(a.properties[budget]) })
.attr("fill", d => loan_rate(d) > 0.04 ? '#c55147' : '#007697')
.attr('fill-opacity', d => loan_rate(d) > 0.04 ? .8 : .5)
.attr('cx', d => d[1].x)
.attr('cy', d => d[1].y)
.attr("r", d => d[1].households > 1000 ? 70 * loan_rate(d) : null)
// .on('mouseover click', (d) => div.property("value", d.properties).dispatch("input"))
// .on('mouseout', () => div.property("value", "").dispatch("input"))
// div.property("value", "").dispatch('input');
return div.node();
}
loan_rate = (d) => d[1].households ? d[1][radioValue.year] / d[1].households : null
data = {
let data = await d3.json("https://pbogden.github.io/single/data/irs_data.json");
data = Object.entries(data);
data = data.filter(d => projection([d[1].lon, d[1].lat]) != null) // removes Puerto Rico
data.forEach(d => {
let xy = projection([d[1].lon, d[1].lat]);
d[1].x = xy[0];
d[1].y = xy[1];
return d;
});
return data
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
