Data journalist/designer, Montana
Public
Edited
Apr 23, 2024
Importers
6 stars
montanaMap = () => map({
width: largeMapWidth(),
height: largeMapWidth() * 0.6,
margin: {top: 10, left: 10, right: 10, bottom: 10},
projection: d3.geoAlbers().rotate([110, 0, 0]),
tooltipEnabled: true,
layers: [
new FeatureLayer({
geodata: state, // geojson
featureStyle: {
fill: d => 'none',
stroke: d => 'none',
strokeWidth: d => 1,
},
}),
new FeatureLayer({
geodata: counties, // geojson
featureStyle: {
fill: d => '#d9d1b8',
stroke: d => '#fff',
strokeWidth: d => 1,
zIndex: d => 1,
},
renderTooltip: renderTooltip,
}),
new FeatureLayer({
geodata: lakes,
featureStyle: {
fill: d => '#fff',
stroke: d => 'none',
}
}),
new FeatureLayer({
geodata: highways,
featureStyle: {
fill: d => 'none',
stroke: d => '#a18c4d',
opacity: d => 0.5,
pointerEvents: d => 'none', // prevents mouse interaction
}
}),
new PointLayer({
geodata: cities,
labelStyle: {
text: d => (width > 500) ? d.NAME : '',
dx: d => d.offset ? d.offset[0] : '0.5em',
dy: d => d.offset ? d.offset[1] : '0.5em',
},
}),
// new PointLayer({
// geodata: countiesWithTestData,
// featureStyle: {
// radius: d => sizeScale(d.testsPer1kPopulation),
// fill: d => '#2c7fb8',
// fillOpacity: d => 0.7,
// // stroke: d => '#CA532B',
// stroke: d => '#2c7fb8',
// strokeWidth: d => 2,
// },
// labelStyle: {
// // text: d => (d.tests > 0) ? `${d3.format('.2s')(d.tests)}` : ``,
// text: d => (d.tests > 0) ? `${d3.format(',.0f')(d.testsPer1kPopulation)}` : ``,
// dx: d => 0,
// dy: d => '0.3em',
// textAnchor: d => 'middle',
// fontSize: d => '11px',
// fill: d => '#fff',
// },
// }),
new FeatureLayer({
geodata: state, // geojson
featureStyle: {
fill: d => 'none',
stroke: d => 'black',
strokeWidth: d => 2,
},
}),
],
})
class RasterLayer {
// plots a geotiff image
// WORK IN PROGRESS
constructor(opts) {
this.geoTiff = opts.geoTiff
// required opts
// this.geodata = opts.geodata
// this.features = opts.geodata.features
// // optional opts
// this.featureStyle = opts.featureStyle || {}
// this.handleFeatureClick = opts.handleFeatureClick || ((e) => null)
// this.featureOrder = opts.featureOrder || ((a,b) => true)
// calculated
this.style = {
opacity: d => 1,
fill: d => '#ddd',
fillOpacity: d => 1,
stroke: d => '#fff',
strokeWidth: d => 1,
strokeOpacity: d => 1,
strokeDasharray: d => 'none',
pointerEvents: d => 'auto',
...this.featureStyle
}
}
plot(parent, projection, tooltip){
const path = d3.geoPath().projection(projection);
const style = this.style
const image = parent.append('image')
.attr('href', this.geoTiff.getImage())
// .attr('height', this.geoTiff.getImage().getHeight())
// .attr('width', this.geoTiff.getImage().getWidth())
}
}
hillshade = FileAttachment("mt-hillshade-small.tif").arrayBuffer()
.then(buffer => GeoTIFF.fromArrayBuffer(buffer))
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.
