Data journalist/designer, Montana
Montana's 2022 election results, precinct by precinctMontana 2022 legislative election resultsMontana 2022 June primary election resultsMarijuana on the ballotMontana County population change, 2020 to 2021Montana PSC 2020 redistrictingMontana Public Service Commission District Representation, 2020Montana 2021 fire season in contextMontana Air Quality Summer 2021Montana vaccination rate trends by countyMontana proposed judicial districts under HB 321Montana COVID-19 graphics, state trendsMontana COVID-19 cases2020 Montana legislative primariesCARES Act Montana relief breakdown 5/5/2020What we know about local COVID-19 testing in Montana
Montana 2021 fires dashboard
class PointLayer {
constructor(opts) {
// required opts
this.geodata = opts.geodata
this.features = opts.geodata.features
// optional opts
this.featureStyle = opts.featureStyle || {}
this.labelStyle = opts.labelStyle
this.customMarker = opts.customMarker || null
this.hasTooltip = opts.hasTooltip || false
// calculated
this.style = {
radius: d => 2,
opacity: d => 1,
fill: d => '#222',
fillOpacity: d => 1,
stroke: d => null,
strokeWidth: d => 1,
strokeOpacity: d => 1,
...this.featureStyle
}
this.label = {
text: d => null,
fill: d => '#000',
fontSize: d=> '12px',
dx: d => '0.5em',
dy: d => '0.5em',
textAnchor: d => 'start',
...this.labelStyle
}
}
plot(parent, projection, tooltip){
const path = d3.geoPath().projection(projection);
const style = this.style
const label = this.label
// const shapes = parent.append('g').attr('class','feature-layer')
const customMarker = this.customMarker
const markerGroups = parent.append('g').attr('class','feature-layer')
.selectAll('.feature')
.data(this.features).enter()
.append('g')
.attr('transform', d => {
const point = path.centroid(d)
return `translate(${point[0]},${point[1]})`
})
if (customMarker) {
markerGroups.each(customMarker, label)
} else {
markerGroups.append('circle')
.attr('r', (f => style.radius(f.properties)))
.attr('cx', 0)
.attr('cy', 0)
.attr('class', 'feature')
.attr('opacity', (f => style.opacity(f.properties)))
.attr('fill', (f => style.fill(f.properties)))
.attr('fill-opacity', (f => style.fillOpacity(f.properties)))
.attr('stroke', (f => style.stroke(f.properties)))
.attr('stroke-width', (f => style.strokeWidth(f.properties)))
.attr('stroke-opacity', (f => style.strokeOpacity(f.properties)))
}
if (label) {
markerGroups.append('text')
.attr('pointer-events', 'none')
.attr('x',0)
.attr('y',0)
.attr('font-size', f => label.fontSize(f.properties))
.attr('text-anchor', f => label.textAnchor(f.properties))
.attr('dy', f => label.dy(f.properties))
.attr('dx', f => label.dx(f.properties))
.attr('fill', f => label.fill(f.properties))
.text(f => label.text(f.properties))
}
if (this.hasTooltip) {
markerGroups
.on("mouseover", event => tooltip.style("visibility", "visible"))
.on("mousemove", event => updateTooltip(tooltip, event))
.on("mouseout", event => tooltip.style("visibility", "hidden"))
}
}
}
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.
