Data Engineer and aspiring Data Visualization Journalist, you can reach me at rjhontomin@gmail.com
map = {
const container = html`<div style="height:500px; background-color:#191a1a;">`; //Create map container
yield container;
const map = new mapboxgl.Map({
container,
center: [-20.276018, 50.220830],
zoom: 1.9,
pitch: 90,
bearing: 0,
renderWorldCopies: 1,
style: "mapbox://styles/mapbox/dark-v9",
scrollZoom: false
});
map.on('load', () => {
map.addLayer(arcsLayer); // add arc layer
map.style.stylesheet.layers.forEach(function(layer) { //remove labels
if (layer.type === 'symbol') {
map.removeLayer(layer.id);
}
});
});
invalidation.then(() => map.remove());
}
// const {coef} = this.state;
// const = {speed} = this.props || 0.005;
// const animationInterval = setInterval(()=> {
// coef += 0.005;
// if (coef >= 1.0) {
// clearInterval(animationInterval);
// }
// this.setState({
// coef,
// })
// }, 10);
// setInterval function to 'animate' arcs
function animateArcs(layer) {
var coef = 0;
const animationInterval = setInterval(()=> {
coef += 0.005;
if (coef >= 1.0) {
coef = 0;
clearInterval(animationInterval)
}
layer.setProps({coef});
}, 10);
}
arcsLayer = {
const arcsLayer = new deck.MapboxLayer({
type: ArcBrushingLayer,
id: `arcs`,
data: data,
opacity: 1,
coef: 0,
getSourcePosition: d => [d.longitude_source, d.latitude_source],
getTargetPosition: d => [d.longitude_target, d.latitude_target],
getSourceColor: d => colorScale(d.category),
getTargetColor: d => colorScale(d.category),
getStrokeWidth: 3
});
return arcsLayer;
}
// Deck.gl arc layer with custom shader
class ArcBrushingLayer extends deck.ArcLayer {
getShaders() {
// here comes our custom shader
// we will use step function to create opacity gradient with colorA and color B
// for more information see https://thebookofshaders.com/05/
return Object.assign({}, super.getShaders(), {
inject: {
'vs:#decl': `
uniform float coef;
`,
'vs:#main-end': `
if (coef > 0.0) {
vec4 pct = vec4(segmentRatio);
pct.a = step(coef, segmentRatio) - step(coef + 0.9, segmentRatio);
vec4 colorA = instanceTargetColors;
vec4 colorB = vec4(instanceTargetColors.r, instanceTargetColors.g, instanceTargetColors.b, 0.0);
vec4 color = mix(colorA, colorB, pct) / 255.;
vColor = color;
}
`,
'fs:#main-start': `
if (vColor.a == 0.0) discard;
`
}
});
}
draw(opts) {
const {coef} = this.props;
// add uniforms
const uniforms = Object.assign({}, opts.uniforms, { coef: coef });
super.draw(Object.assign({}, opts, {uniforms}));
}
}
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.
