Designer. Geek. Beer addict. Data queen.
Published
Edited
Sep 23, 2022
3 stars
container = html `<div style="height:400px"></div>`
cableGeo = FileAttachment("cable-geo.json").json()
landingPointGeo = FileAttachment("landing-point-geo.json").json()
{
const layers = [
new MyCustomLayer({
id: 'cables',
data: cableGeo,
lineWidthMinPixels: 1,
getColor: f => {
const hex = f.properties.color
return [
parseInt(hex.slice(1, 3), 16),
parseInt(hex.slice(3, 5), 16),
parseInt(hex.slice(5, 7), 16)
]
}
}),
new deck.GeoJsonLayer({
id: 'landing-points',
data: landingPointGeo,
pointType: 'circle',
pointRadiusMinPixels: 2
})
]
deckgl.setProps({layers})
return layers
}
MyCustomLayer = {
class MyCustomLayer extends deck.CompositeLayer {
static layerName = 'MyCustomLayer' + Date.now()
static defaultProps = {
getColor: {type: 'accessor', value: [0, 0, 0]}
}
updateState({props, oldProps, changeFlags}) {
const labels = [];
turfjs.segmentEach(props.data, f => {
const len = turfjs.length(f);
if (len > 500) {
const p0 = f.geometry.coordinates[0]
const p1 = f.geometry.coordinates[1]
const bearing = turfjs.rhumbBearing(p0, p1)
const midPoint = [
(p0[0] + p1[0]) / 2,
(p0[1] + p1[1]) / 2,
]
labels.push({
position: midPoint,
angle: bearing,
text: f.properties.name,
color: this.props.getColor(f)
})
}
});
this.setState({labels})
}
renderLayers() {
return [
new deck.GeoJsonLayer(this.getSubLayerProps({
id: 'lines',
data: this.props.data,
getLineColor: this.props.getColor,
getLineWidth: 1,
lineWidthUnits: 'pixels'
})),
new deck.TextLayer(this.getSubLayerProps({
id: 'labels',
data: this.state.labels,
getText: d => d.text,
getPosition: d => d.position,
getSize: 20000,
getAngle: d => 90 - d.angle,
getColor: [255, 255, 255],
background: true,
getBackgroundColor: d => d.color,
sizeUnits: 'meters'
}))
];
}
}
return MyCustomLayer
}
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.
