29:null 2a:["$","title",null,{"children":"Vizabi && Deck.GL reading from ddfcsv | Vizabi | Observable"}] 2f:T8122,{ if (!features) return; disposer.length && disposer.forEach(d => d()); disposer.length = 0; /* deckBubble.setProps({ onViewStateChange: ({viewState, oldViewState}) => { deckBubble.setProps({layers: getBubbleLayers(undefined, false, false, undefined, viewState.zoom)}) const oldScale = 2**oldViewState.zoom; const newScale = 2**viewState.zoom; if (oldScale != newScale) { viewState.target[0] = oldViewState.target[0] / newScale * oldScale; viewState.target[1] = oldViewState.target[1] / newScale * oldScale; } console.log("onViewStateChange", viewState); return viewState; }, }); const getMMatrix = (zoom) => [1/2 ** zoom, 0, 0, 0, 0, 1/2 ** zoom, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]; */ /*const zoom = d3.zoom() .scaleExtent([-6.9, 9.5]) // .translateExtent([[-100, -100], [width + 90, height + 100]]) // .filter(filter) .on("zoom", zoomed); const canvas = d3.select("#containerBubble").select("canvas").call(zoom); //canvas.call(zoom.transform, new d3.ZoomTransform(0, size.w * 0.5, size.h * 0.5)); function zoomed({ transform }) { console.log("zoomed", transform); requestAnimationFrame(function() { deckBubble.setProps({ viewState: { target: [-transform.x, transform.y, 0], maxZoom: 9.5, minZoom: -6.9, zoom: transform.k }, }); }); //view.attr("transform", transform); //gX.call(xAxis.scale(transform.rescaleX(x))); //gY.call(yAxis.scale(transform.rescaleY(y))); }*/ let activeObject = undefined; let labelOffset = {}; let labelDragged = {}; let dragX0, dragY0, dragX, dragY; let labelZScale; const _scales = {} disposer.push(mobx.autorun(() => { if (model.markers.bubble.state !== "fulfilled") return; _scales.x = model.markers.bubble.encoding.x.scale.d3Scale.range([0, size.w]); _scales.y = model.markers.bubble.encoding.y.scale.d3Scale.range([0, size.h]); _scales.size = model.markers.bubble.encoding.size.scale.d3Scale.range(getSizeRange()); _scales.z = d3.scaleLinear(model.markers.bubble.encoding.size.scale.d3Scale.domain(), [-0.1, -0.3]); _scales.color = model.markers.bubble.encoding.color.scale.d3Scale; })); let selectedKeys; let hasSelected; disposer.push(mobx.autorun(() => { if (model.markers.bubble.state !== "fulfilled") return; selectedKeys = [...model.markers.bubble.encoding.selected.data.filter.markers.keys()] hasSelected = !!model.markers.bubble.encoding.selected.data.filter.markers.size; Object.keys(labelOffset).forEach(key => { if (!selectedKeys.includes(key)) delete labelOffset[key]; }) Object.keys(labelDragged).forEach(key => { if (!selectedKeys.includes(key)) delete labelDragged[key]; }) })); const props = { getSourcePosition: (d) => { //console.log("src",d); if (!d) return; return [_scales.x(d.x), _scales.y(d.y), d.uz ? d.uz : _scales.z(d.z*1.01)] }, getTargetPosition: (_d, { data, index }) => { //console.log("trgt", _d, data[index + 1]); if (!_d) return; const d = _d[TRAIL_KEY] ? data[index + 1] ? data[index + 1] : _d : _d; if (!d) return; return [_scales.x(d.x), _scales.y(d.y), d.uz ? d.uz : _scales.z(d.z*1.01)] }, getLastLineSourcePosition: (d) => { //console.log("src",d); if (!d) return; return [_scales.x(d[0].x), _scales.y(d[0].y), _scales.z(d[0].z*1.01)] }, getLastLineTargetPosition: (d) => { //console.log("trgt", _d, data[index + 1]); if (!d) return; return [_scales.x(d[1].x), _scales.y(d[1].y), _scales.z(d[1].z*1.01)] }, getLabelText: (d) => { if (!d) return; return d.label.geo + " " + year(d.frame); //return ""+_scales.z(d.z)+" "+d.label.geo; }, getTooltipText: (d) => { if (!d) return; //return d[TRAIL_KEY] ? year(d.frame) : "z:"+ _scales.z(d.z) + " " + d.label.geo; return d[TRAIL_KEY] ? year(d.frame) : d.label.geo; //return ""+_scales.z(d.z)+" "+d.label.geo; }, getMapLabelText: (d) => { if (!d) return; return d.label.geo; //return ""+_scales.z(d.z)+" "+d.label.geo; }, getLabelPosition: (d) => { if (!d) return; //const z = d[KEY] == activeObject.?[KEY] ? 2: 1; //console.log(d[KEY],_scales.x(d.x), _scales.y(d.y)); //return [_scales.x(d.x), _scales.y(d.y)]; return [_scales.x(d.x), _scales.y(d.y)]; }, getLabelPositionZ: (d, { index }) => { if (!d) return; //const z = d[KEY] == activeObject.?[KEY] ? 2: 1; //console.log("posZ", d[KEY], index); //return [_scales.x(d.x), _scales.y(d.y)]; return [_scales.x(d.x), _scales.y(d.y), labelZScale(index)]; }, getMapLabelPosition: (d) => { if (!d) return; //const z = d[KEY] == activeObject.?[KEY] ? 2: 1; const feature = filteredFeatures[featureToIndex[d[TRAIL_KEY] || d[KEY]]]; //console.log(d[KEY],_scales.x(d.x), _scales.y(d.y)); return [feature.properties.centroid[0], feature.properties.centroid[1]]; }, getTooltipPixelOffset: (d) => { if (!d) return; const r = Math.sqrt(_scales.size(d.size)) / Math.sqrt(2) + 5; return [-r, -r]; }, getPixelOffset: (d) => { if (!d) return; const key = d[TRAIL_KEY] || d[KEY]; const offsetX = labelOffset[key] && labelOffset[key][0] || 0; const offsetY = labelOffset[key] && labelOffset[key][1] || 0; const r = Math.sqrt(_scales.size(d.size)) / Math.sqrt(2) + 15; return [offsetX || -r, offsetY || -r]; }, getDragged: (d) => { if (!d) return; const key = d[TRAIL_KEY] || d[KEY]; return labelDragged[key]; }, onLabelDragStart: ({ object:d, x, y, coordinate, sourceLayer, viewport }, evt, dragFlag) => { console.log("onLabelDragStart", d, x, y, coordinate, viewport, sourceLayer) if (!d) return; const key = d[TRAIL_KEY] || d[KEY]; if (!labelOffset[key]) { const r = Math.sqrt(_scales.size(d.size)) / Math.sqrt(2) + 15; labelOffset[key] = [-r, -r]; } //adjust label offset if label with current offset located outside of vieport const offset = labelOffset[key]; const pPos = viewport.project(props.getPosition(d).slice(0,2)); const vW = viewport.width; const vH = viewport.height; const [lW, lH] = sourceLayer.parent.state.labelSize; const [lPaddL, lPaddT, lPaddR = lPaddL, lPaddB = lPaddT] = sourceLayer.parent.props.backgroundPadding; if (!labelDragged[key]) { labelDragged[key] = 1.0; if(pPos[0] + offset[0] < lW + lPaddL) { offset[0] = lW - offset[0]; } if(pPos[1] + offset[1] < lH + lPaddT) { offset[1] = lH - offset[1]; } } if(pPos[0] + offset[0] < lW + lPaddL) { offset[0] = lW + lPaddL - pPos[0]; } else if(pPos[0] + offset[0] > vW - lPaddR) { offset[0] = vW - lPaddR - pPos[0]; } if(pPos[1] + offset[1] < lH + lPaddT) { offset[1] = lH + lPaddT - pPos[1]; } else if(pPos[1] + offset[1] > vH - lPaddB) { offset[1] = vH - lPaddB - pPos[1]; } console.log("offset", offset, "point", pPos, lW, lH, viewport); dragX0 = labelOffset[key][0] - x; dragY0 = labelOffset[key][1] - y; //deckBubble.setProps({layers: getBubbleLayers(undefined, false, false), controller: { dragPan: dragFlag }}); return true; }, onLabelDrag: ({ object:d, x, y, coordinate, sourceLayer, viewport }, evt, dragFlag) => { if (!d) return; dragX = dragX0 + x; dragY = dragY0 + y; const key = d[TRAIL_KEY] || d[KEY]; labelOffset[key][0] = dragX; labelOffset[key][1] = dragY; const pos = props.getPosition(d).slice(0,2); //console.log("offset", labelOffset[key], "point", sourceLayer.project(pos), viewport.getBounds(), viewport); deckBubble.setProps({layers: getBubbleLayers(undefined, false, false), views: getViews({ dragPan: dragFlag }),}); return true; }, onLabelClick: ({ object:d, layer, sourceLayer }) => { if (!d) return; if (sourceLayer.id !== "labelCloseTextLayer") return; const dataKey = {[KEY]: d[TRAIL_KEY || KEY]} console.log("click pretoggle", d, dataKey); mobx.runInAction(() => { model.markers.bubble.encoding.selected.data.filter.toggle(dataKey); console.log("click toggle", dataKey); }) layer.setState({closeData: []}); deckBubble.setProps({layers: getBubbleLayers(undefined, false, false)}); deckMap.setProps({layers: getMapLayers(undefined, false, false)}); }, getLabelLineTargetPixelOffset: (d) => { if (!d) return; const key = d[TRAIL_KEY] || d[KEY]; const offsetX = labelOffset[key] && labelOffset[key][0] || 0; const offsetY = labelOffset[key] && labelOffset[key][1] || 0; return [offsetX || 0, -offsetY || 0]; }, getPosition: (d) => { if (!d) return; let zHover = 0; if (activeObject && activeObject[KEY] == d[KEY]) { //zHover = -0.05; //console.log("zHover", zHover, d, activeObject) } //console.log(d[KEY],_scales.x(d.x), _scales.y(d.y), d.uz ? d.uz : _scales.z(d.z)) return [_scales.x(d.x), _scales.y(d.y), d.uz ? d.uz : _scales.z(d.z)] }, getPositionXY: (d) => { if (!d) return; //console.log(d[KEY],_scales.x(d.x), _scales.y(d.y), d.uz ? d.uz : _scales.z(d.z)) return [_scales.x(d.x), _scales.y(d.y)] }, getFillColor: (d) => { if (!d) return; const c = d3.color(_scales.color(d.color)).formatRgb().slice(4, -1).split(",").map(v=>+v); const alpha = activeObject ? d[KEY] == activeObject[KEY] ? options.opacitySelected : hasSelected ? selectedKeys.includes(d[TRAIL_KEY] || d[KEY]) ? options.opacitySelected : options.opacityNonSelected : options.opacityNonSelected : hasSelected ? selectedKeys.includes(d[TRAIL_KEY] || d[KEY]) ? options.opacitySelected : options.opacityNonSelected : options.opacityNormal; c[3] = alpha; return c; }, getLastLineFillColor: (d) => { if (!d) return; const c = d3.color(_scales.color(d[0].color)).formatRgb().slice(4, -1).split(",").map(v=>+v); const alpha = activeObject ? d[0][KEY] == activeObject[KEY] ? options.opacitySelected : hasSelected ? selectedKeys.includes(d[0][TRAIL_KEY] || d[0][KEY]) ? options.opacitySelected : options.opacityNonSelected : options.opacityNonSelected : hasSelected ? selectedKeys.includes(d[0][TRAIL_KEY] || d[0][KEY]) ? options.opacitySelected : options.opacityNonSelected : options.opacityNormal; c[3] = alpha; return c; }, getMapFillColor: (d) => { if (!d) return; //const color = _data[keyToIndex[d.properties.id]].color; const color = model.markers.bubble.dataMap.get(d.properties.id).color; const c = d3.color(_scales.color(color)).formatRgb().slice(4, -1).split(",").map(v=>+v); const alpha = activeObject ? d.properties.id == activeObject[KEY] ? options.opacitySelected : hasSelected ? selectedKeys.includes(d.properties.id) ? options.opacitySelected : options.opacityNonSelected : options.opacityNonSelected : hasSelected ? selectedKeys.includes(d.properties.id) ? options.opacitySelected : options.opacityNonSelected : options.opacityNormal; c[3] = alpha; return c; }, getLineColor: (d) => { if (!d) return; const c = [0, 0, 0, 127] const alpha = activeObject ? d[KEY] == activeObject[KEY] ? options.opacitySelected : hasSelected ? selectedKeys.includes(d[TRAIL_KEY] || d[KEY]) ? options.opacitySelected : options.opacityNonSelected : options.opacityNonSelected : hasSelected ? selectedKeys.includes(d[TRAIL_KEY] || d[KEY]) ? options.opacitySelected : options.opacityNonSelected : options.opacityNormal; c[3] = alpha; return c; }, getRadius: (d) => { if (!d) return; return Math.sqrt(_scales.size(d.size)) }, onHover: ({ object: d }) => { //console.log("onhover", d, activeObject); const invalidate = d?.[KEY] !== activeObject?.[KEY] activeObject = d; if (invalidate) { //setTimeout(() => { //console.log("invalidate", d, activeObject); deckBubble.setProps({layers: getBubbleLayers(undefined, false, false)}) deckMap.setProps({layers: getMapLayers(undefined, false, false)}) //}, 0); } }, onMapHover: ({ object: d }) => { //console.log("onhover", d, activeObject); const invalidate = d?.properties?.id !== activeObject?.[KEY] activeObject = d ? model.markers.bubble.dataMap.get(d.properties.id) : d; if (invalidate) { //setTimeout(() => { //console.log("invalid d?.properties?.idate", d, activeObject); deckBubble.setProps({layers: getBubbleLayers(undefined, false, false)}) deckMap.setProps({layers: getMapLayers(undefined, false, false)}) //}, 0); } }, onMapClick: ({ object: d }) => { if (!d) return; let dataKey = {[KEY]: d?.properties?.id} console.log("click pretoggle", d, dataKey); mobx.runInAction(() => { model.markers.bubble.encoding.selected.data.filter.toggle(dataKey); console.log("click toggle", dataKey); }) deckBubble.setProps({layers: getBubbleLayers(undefined, false, false)}) deckMap.setProps({layers: getMapLayers(undefined, false, false)}) }, onClick: ({ object:d, index }) => { //console.log("onhover", d, activeObject); if (!d) return; let dataKey = {[KEY]: d[KEY]} console.log("click pretoggle", d, dataKey); if (d[TRAIL_KEY]) { const nextIndex = index + 1; if (_data[nextIndex]?.[TRAIL_KEY] == d[TRAIL_KEY]) { return; } else { dataKey = {[KEY]: d[TRAIL_KEY]} } } //const invalidate = d?.[KEY] !== activeObject?.[KEY] mobx.runInAction(() => { model.markers.bubble.encoding.selected.data.filter.toggle(dataKey); console.log("click toggle", dataKey); }) //activeObject = d; //if (invalidate) { //setTimeout(() => { //console.log("invalidate", d, activeObject); deckBubble.setProps({layers: getBubbleLayers(undefined, false, false)}) deckMap.setProps({layers: getMapLayers(undefined, false, false)}) //}, 0); //} }, }; let playing; let transitionsObj = {}; disposer.push(mobx.autorun(() => { if (model.markers.bubble.state !== "fulfilled") return; playing = model.markers.bubble.encoding.frame.playing; transitionsObj = model.markers.bubble.encoding.frame.playing ? { getPosition: { duration: options.speed, getRadius: { duration: options.speed, }, getTargetPosition: { duration: options.speed, }, //getFillColor: { // duration: 60, //enter: ([r, g, b]) => [r, g, b, 0] //} } } : { //getFillColor: { // duration: 0, //enter: ([r, g, b]) => [r, g, b, 0] } })); const transitionsObj0 = { getPosition: { duration: 0, //enter: (d) => { // console.log("enter", d); // return d; //}, //onStart: t => { // console.log("onstart", t); //} }, getRadius: { duration: 0, }, getTargetPosition: { duration: 0, }, //getFillColor: { // duration: 0, //enter: ([r, g, b]) => [r, g, b, 0] //} } let _updateRanges; let _updateRangesLine; let _newUpdateRangesLine; const getMapLayers = function(__data, transitions = true, dataDiff = true) { return [ new deck.GeoJsonLayer({ id: "geoJsonLayer", data: filteredFeatures, pointType: "text", getText: f => f.properties.id, getFillColor: props.getMapFillColor, getLineColor: [255,255,255], getLineWidth: 0.5, lineWidthUnits: "pixels", pickable: true, onHover: props.onMapHover, onClick: props.onMapClick, updateTriggers: { getFillColor: [activeObject, _labelData], //getLineColor: [activeObject], //getPosition: [activeObject] }, //stroked: true, }), new deck.TextLayer({ id: 'tooltipMapTextLayer', _subLayerProps: { background: { type: LabelBackgroundLayer, cornerRadius: 5, edgeMaxCoord: 1.5 }, characters: { type: LabelMultiIconLayer, updateTriggers: { getPixelOffset: [dragX, dragY], getDragged: [dragX0, dragY0], }, } }, data: activeObject ? [activeObject] : [], getPosition: props.getMapLabelPosition, getPixelOffset: [-5, -5],//props.getPixelOffset, getText: props.getMapLabelText, getColor: [10, 10, 10], getSize: 16, getTextAnchor: 'end', getAlignmentBaseline: 'bottom', getDragged: props.getDragged, pickable: true, background: true, backgroundPadding: [5, 4], getBorderWidth: 1, characterSet: CHARACTER_SET, billboard: true, edgeMaxCoord: 1.5, //lineWidthUnits: 'pixels', //radiusUnits: 'pixels', //transitions: transitions ? transitionsObj : transitionsObj0 }), new LabelLayer({ //parameters: {depthTest: false}, id: 'labelMapTextLayer', _subLayerProps: { background: { type: LabelBackgroundLayer, cornerRadius: 5, edgeMaxCoord: 1.5 }, characters: { type: LabelMultiIconLayer, updateTriggers: { getPixelOffset: [dragX, dragY], getDragged: [dragX0, dragY0], }, } }, data: _labelData, fontSettings: { sdf: true, fontSize: 20, }, getPosition: props.getMapLabelPosition, getPixelOffset: [-5, -5],//props.getPixelOffset, getText: props.getMapLabelText, getColor: [10, 10, 10], getSize: 16, getTextAnchor: 'end', getAlignmentBaseline: 'bottom', getDragged: 0, //getPolygonOffset: null,//({layerIndex}) => [0, layerIndex * 100], //onDragStart: (info, e) => props.onLabelDragStart(info, e, false), //onDrag: (info, e) => props.onLabelDrag(info, e, false), //onDragEnd: (info, e) => props.onLabelDrag(info, e, true), //onHover: props.onLabelHover, onClick: props.onLabelClick, characterSet: CHARACTER_SET, pickable: true, outlineColor: [255, 255, 255], outlineWidth: 3, //background: true, backgroundPadding: [5, 4], getBorderWidth: 1, billboard: true, lineWidthUnits: 'pixels', radiusUnits: 'pixels', edgeMaxCoord: 1.5, //updateTriggers: { //getPixelOffset: [dragX, dragY] //}, //transitions: t ? transitionsObj : {}//transitionsObj0 }), ] }; //deckMap.setProps({layers: getMapLayers()}); const chunkCount = 500; const getBubbleLayers = function(__data = _data, t = true, dataDiff = true, __lastTrailLineData = []) { //console.log("__data",__data, t, dataDiff, __lastTrailLineData); /*const scatters = [0,500,1000,1500,2000,2500,3000,4500,4000,5000,5500,6000,6500].map(s => { return new deck.ScatterplotLayer({ //parameters: {depthTest: false}, id: "scatterPlotLayer_"+s, data: __data.slice(s, s+chunkCount), stroked: true, getPosition: props.getPosition, getRadius: props.getRadius, radiusUnits: 'pixels', getFillColor: props.getFillColor, getLineColor: props.getLineColor, getLineWidth: 1, lineWidthUnits: 'pixels', //billboard: true, pickable: true, onHover: props.onHover, onClick: props.onClick, updateTriggers: { getFillColor: [activeObject], getLineColor: [activeObject], //getPosition: [activeObject] }, transitions: t ? transitionsObj : transitionsObj0, //transitions: transitionsObj, //_dataDiff: (newData, oldData) => { // console.log("_datediff", newData, oldData, _updateRanges); //return dataDiff ? playing ? _updateRanges : null : null; //} }) })*/ return [//...scatters, new Axis({ xScale: _scales.x, yScale: _scales.y, dimLabels: !!activeObject,//this.props.hoveredFeature !== null, getXLabel: () => model.markers.bubble.encoding.x.data.conceptProps.name,//this.props.getXLabel, getYLabel: () => model.markers.bubble.encoding.y.data.conceptProps.name,//this.props.getYLabel, xFormat: "tkr",//this.props.xFormat, yFormat: "tkr",//this.props.yFormat, labelTextSize: 10,//this.props.axisLabelTextSize, tickTextSize: 10,//this.props.axisTickTextSize, //modelMatrix: getMMatrix(zoom) }), new deck.LineLayer({ id: 'lineLayer', data: _trailsData, getColor: props.getFillColor, getSourcePosition: props.getSourcePosition, getTargetPosition: props.getTargetPosition, getWidth: 2, getPolygonOffset: ({layerIndex}) => [0, layerIndex * 100], updateTriggers: { getColor: [activeObject], }, //transitions: t ? transitionsObj : {},//transitionsObj0, //pickable: true, //_dataDiff: (newData, oldData) => { // console.log("_datediff line", newData, oldData, _updateRangesLine); // return dataDiff ? playing ? _updateRangesLine : null : null; //} }), new deck.LineLayer({ id: 'lastLineLayer', data: __lastTrailLineData, getColor: props.getLastLineFillColor, getSourcePosition: props.getLastLineSourcePosition, getTargetPosition: props.getLastLineTargetPosition, getWidth: 2, updateTriggers: { //getColor: [activeObject], getTargetPosition: [t] }, transitions: t ? { getTargetPosition: { duration: options.speed, }, } : {}, //pickable: true, //_dataDiff: (newData, oldData) => { // console.log("_datediff line", newData, oldData, _updateRangesLine); // return dataDiff ? playing ? _updateRangesLine : null : null; //} }), new deck.ScatterplotLayer({ parameters: {depthTest: false}, id: "scatterPlotLayer",//_"+s, data: __data,//.slice(0),//.slice(s, s+chunkCount), stroked: true, getPosition: props.getPosition, getRadius: props.getRadius, radiusUnits: 'pixels', getFillColor: props.getFillColor, getLineColor: props.getLineColor, getLineWidth: 1, lineWidthUnits: 'pixels', //billboard: true, pickable: true, onHover: props.onHover, onClick: props.onClick, updateTriggers: { getFillColor: [activeObject], getLineColor: [activeObject], getPosition: [activeObject, t] }, //numInstances: 10, transitions: t ? { getPosition: { duration: options.speed, }, getRadius: { duration: options.speed, }, } : {}, //transitions: t ? transitionsObj : transitionsObj0, //transitions: transitionsObj, //_dataDiff: (newData, oldData) => { // console.log("_datediff", newData, oldData, _updateRanges); //return dataDiff ? playing ? _updateRanges : null : null; //} }), new deck.TextLayer({ id: 'tooltipTextLayer', _subLayerProps: { background: { type: LabelBackgroundLayer, cornerRadius: 5, getDragged: props.getDragged, updateTriggers: { getPixelOffset: [dragX, dragY], getDragged: [dragX0, dragY0], }, }, characters: { type: LabelMultiIconLayer, getDragged: props.getDragged, updateTriggers: { getPixelOffset: [dragX, dragY], getDragged: [dragX0, dragY0], }, } }, data: activeObject ? [activeObject] : [], getPosition: props.getLabelPosition, getPixelOffset: props.getTooltipPixelOffset, getText: props.getTooltipText, getColor: [10, 10, 10], getSize: 20, getTextAnchor: 'end', getAlignmentBaseline: 'bottom', getDragged: props.getDragged, pickable: true, background: true, backgroundPadding: [8, 5], getBorderWidth: 1.5, billboard: true, lineWidthUnits: 'pixels', radiusUnits: 'pixels', characterSet: CHARACTER_SET, //transitions: t ? transitionsObj : transitionsObj0 }), /*new LabelLineLayer({ id: 'labelLineLayer', data: _labelData, getColor: [102, 102, 102], getSourcePosition: props.getLabelPositionZ, getTargetPosition: props.getLabelPositionZ, getTargetPixelOffset: props.getLabelLineTargetPixelOffset, getSourceDashOffset: props.getRadius, getWidth: 1, updateTriggers: { //getColor: [activeObject], getTargetPixelOffset: [dragX, dragY] }, transitions: t ? { getSourcePosition: { duration: options.speed, }, getTargetPosition: { duration: options.speed, }, getTargetPixelOffset: { duration: options.speed, }, } : {}, //pickable: true, //_dataDiff: (newData, oldData) => { // console.log("_datediff line", newData, oldData, _updateRangesLine); // return dataDiff ? playing ? _updateRangesLine : null : null; //} }),*/ new LabelLayer({ //parameters: {depthTest: false}, id: 'labelTextLayer', _subLayerProps: { background: { type: LabelBackgroundLayer, cornerRadius: 5, getDragged: props.getDragged, updateTriggers: { getPixelOffset: [dragX, dragY], getDragged: [dragX0, dragY0], }, }, characters: { type: LabelMultiIconLayer, getDragged: props.getDragged, updateTriggers: { getPixelOffset: [dragX, dragY], getDragged: [dragX0, dragY0], }, } }, data: _labelData, //fontSettings: { // sdf: true, // fontSize: 24, //}, getPosition: props.getLabelPositionZ, getPixelOffset: props.getPixelOffset, getText: props.getLabelText, getLineSourceFillOffset: props.getRadius, getRadius: props.getRadius, getColor: [10, 10, 10], getSize: 16, getTextAnchor: 'end', getAlignmentBaseline: 'bottom', getDragged: props.getDragged, //getPolygonOffset: null,//({layerIndex}) => [0, layerIndex * 100], onDragStart: (info, e) => props.onLabelDragStart(info, e, false), onDrag: (info, e) => props.onLabelDrag(info, e, false), onDragEnd: (info, e) => props.onLabelDrag(info, e, true), //onHover: props.onLabelHover, onClick: props.onLabelClick, characterSet: CHARACTER_SET, pickable: true, background: true, backgroundPadding: [8, 5], getBorderWidth: 1, billboard: true, lineWidthUnits: 'pixels', radiusUnits: 'pixels', //outlineColor: [255, 255, 255], //outlineWidth: 0, updateTriggers: { getPixelOffset: [dragX, dragY], getDragged: [dragX0, dragY0], }, transitions: t ? transitionsObj : {}//transitionsObj0 }), ] } let _data; let _newData; let _labelData; let _trailsData; let _newTrailsData; let _lastLineTrailData; let _newLastLineTrailData; let keyToIndex = null; let featureToIndex = null; let filteredFeatures = []; disposer.push(mobx.autorun(() => { if (model.markers.bubble.state !== "fulfilled") return; console.log("data", stepCount, model.markers.bubble.dataArray); //const trailsData = []; const trailsCount = stepCount + 2; const _endChunkIndexes = []; let trailChunkIndex = 0; let deltaTrailChunkIndex = 0; let currentTrailKey = null; _updateRanges = []; _newUpdateRangesLine = []; _labelData = []; _newTrailsData = []; _lastLineTrailData = []; _newLastLineTrailData = []; let _trailsZ = {}; let dataTrailChunkIndex; _newData = !hasSelected ? model.markers.bubble.dataArray //.map(d => Object.assign({}, d)) : model.markers.bubble.dataArray.reduce((res, d, i) => { if (d[TRAIL_KEY]) { if (!currentTrailKey) { currentTrailKey = d[TRAIL_KEY]; _newTrailsData.length += trailsCount + 1; _newTrailsData[trailChunkIndex++] = d; dataTrailChunkIndex = res.length; res.length += trailsCount; _labelData.push(Object.assign({}, d)); } _newTrailsData[trailChunkIndex++] = d; res[dataTrailChunkIndex++] = d; } else { if (currentTrailKey) { _trailsZ[currentTrailKey] = d.z; //_newTrailsData[trailChunkIndex] = Object.assign({}, _newTrailsData[trailChunkIndex - 1]); _newTrailsData.fill(d, trailChunkIndex - 1, _newTrailsData.length); _newUpdateRangesLine.push({startRow: trailChunkIndex - 2, endRow: trailChunkIndex}); //_newTrailsData[trailChunkIndex - 1] = d; _lastLineTrailData.push([_newTrailsData[trailChunkIndex - 2], _newTrailsData[trailChunkIndex - 2]]); _newLastLineTrailData.push([_newTrailsData[trailChunkIndex - 2], d]); trailChunkIndex = _newTrailsData.length; res.fill(Object.assign({uz: -15000}, res[dataTrailChunkIndex - 1]), dataTrailChunkIndex, res.length - 1); res[res.length - 1] = d; currentTrailKey = null; } else { res.push(d); } } return res; }, []); labelZScale = d3.scaleLinear([0, _labelData.length - 1],[-0.09, -0.05]); if (_newTrailsData.length) { _newTrailsData.forEach(d => { if (!d[TRAIL_KEY]) return; d.z = _trailsZ[d[TRAIL_KEY]]; }); } console.log("_data", _data, _newData, _trailsData, _newTrailsData); if (model.markers.bubble.encoding.frame.playing) { console.log("playing"); const _oldData = resortData(_data, _newData, trailsCount - 2); _data = _newData; requestAnimationFrame(function() { deckBubble.setProps({layers: getBubbleLayers(_oldData, false, undefined, _lastLineTrailData)}) requestAnimationFrame(function() { deckBubble.setProps({layers: getBubbleLayers(_oldData, true, undefined, _lastLineTrailData)}) requestAnimationFrame(function() { deckBubble.setProps({layers: getBubbleLayers(_newData, true, undefined, _newLastLineTrailData)}) _trailsData = _newTrailsData; _updateRangesLine = _newUpdateRangesLine; }); }); }); } else { console.log(_labelData); _trailsData = _newTrailsData; _updateRangesLine = _newUpdateRangesLine; _data = _newData; deckBubble.setProps({layers: getBubbleLayers(_data, false)}); } //deckMap.setProps({layers: getMapLayers(_data)}); })) disposer.push(mobx.autorun(() => { if (keyToIndex) return; if (model.markers.bubble.state !== "fulfilled") return; keyToIndex = {}; featureToIndex = {}; _data.forEach((d, i) => { keyToIndex[d[KEY]] = i; }); filteredFeatures = features.features.filter(f => { return keyToIndex[f.properties.id] !== undefined; }); filteredFeatures.forEach((f, i) => { featureToIndex[f.properties.id] = i; }); deckMap.setProps({layers: getMapLayers()}); })); function getSizeRange() { const extent = [0, 1]; let minArea = VizabiSharedComponents.LegacyUtils.radiusToArea(Math.max(options.maxRadiusPx * extent[0], options.minRadiusPx)); let maxArea = VizabiSharedComponents.LegacyUtils.radiusToArea(Math.max(options.maxRadiusPx * extent[1], options.minRadiusPx)); return [minArea, maxArea]; } }30:T1b40,class LabelLineLayer extends deck.LineLayer { static defaultProps = { getTargetPixelOffset: {type: 'accessor', value: [0, 0]}, getSourceDashOffset: {type: 'accessor', value: 0}, getBoundingRect: {type: 'accessor', value: [0, 0, 0, 0]}, getSize: {type: 'accessor', value: 0}, getRadius: {type: 'accessor', value: 0}, getDragged: {type: 'accessor', value: 0.0}, }; initializeState() { super.initializeState(); this.getAttributeManager().addInstanced({ instanceTargetPixelOffsets: { size: 2, transition: true, accessor: 'getTargetPixelOffset' }, instanceSourceDashOffsets: { size: 1, transition: true, accessor: 'getSourceDashOffset', defaultValue: 1 }, instanceRects: { size: 4, accessor: 'getBoundingRect' }, instanceSizes: { size: 1, transition: true, accessor: 'getSize', defaultValue: 0 }, instanceRadius: { size: 1, transition: true, accessor: 'getRadius', defaultValue: 1 }, instanceDragged: { size: 1, transition: false, accessor: 'getDragged' } }); } draw(params) { const { edgeMaxCoord = 1.0 } = this.props; let { padding = [0.0, 0.0, 0.0, 0.0] } = this.props; if (padding.length < 4) { padding = [padding[0], padding[1], padding[0], padding[1]]; } params.uniforms.padding = padding; params.uniforms.edgeMaxCoord = edgeMaxCoord; super.draw(params); } getShaders() { return Object.assign({}, super.getShaders(), { vs: `\ #version 300 es #define SHADER_NAME line-layer-vertex-shader in vec3 positions; in vec3 instanceSourcePositions; in vec3 instanceTargetPositions; in vec3 instanceSourcePositions64Low; in vec3 instanceTargetPositions64Low; in vec2 instanceTargetPixelOffsets; in vec4 instanceColors; in vec3 instancePickingColors; in vec4 instanceRects; in float instanceSizes; in float instanceWidths; in float instanceRadius; in float instanceSourceDashOffsets; in float instanceDragged; uniform float opacity; uniform float widthScale; uniform float widthMinPixels; uniform float widthMaxPixels; uniform float useShortestPath; uniform int widthUnits; uniform vec4 padding; uniform float edgeMaxCoord; out vec4 vColor; out vec2 uv; // offset vector by strokeWidth pixels // offset_direction is -1 (left) or 1 (right) vec2 getExtrusionOffset(vec2 line_clipspace, float offset_direction, float width) { // normalized direction of the line vec2 dir_screenspace = normalize(line_clipspace * project_uViewportSize); // rotate by 90 degrees dir_screenspace = vec2(-dir_screenspace.y, dir_screenspace.x); return dir_screenspace * offset_direction * width / 2.0; } vec3 splitLine(vec3 a, vec3 b, float x) { float t = (x - a.x) / (b.x - a.x); return vec3(x, mix(a.yz, b.yz, t)); } void main(void) { geometry.worldPosition = instanceSourcePositions; geometry.worldPositionAlt = instanceTargetPositions; vec3 source_world = instanceSourcePositions; vec3 target_world = instanceTargetPositions; vec3 source_world_64low = instanceSourcePositions64Low; vec3 target_world_64low = instanceTargetPositions64Low; if (useShortestPath > 0.5 || useShortestPath < -0.5) { source_world.x = mod(source_world.x + 180., 360.0) - 180.; target_world.x = mod(target_world.x + 180., 360.0) - 180.; float deltaLng = target_world.x - source_world.x; if (deltaLng * useShortestPath > 180.) { source_world.x += 360. * useShortestPath; source_world = splitLine(source_world, target_world, 180. * useShortestPath); source_world_64low = vec3(0.0); } else if (deltaLng * useShortestPath < -180.) { target_world.x += 360. * useShortestPath; target_world = splitLine(source_world, target_world, 180. * useShortestPath); target_world_64low = vec3(0.0); } else if (useShortestPath < 0.) { // Line is not split, abort gl_Position = vec4(0.); return; } } // Position vec4 source_commonspace; vec4 target_commonspace; vec4 source = project_position_to_clipspace(source_world, source_world_64low, vec3(0.), source_commonspace); vec4 target = project_position_to_clipspace(target_world, target_world_64low, vec3(0.), target_commonspace); vec2 targetPixelOffsets = project_pixel_size_to_clipspace(instanceTargetPixelOffsets); vec2 dimensions = instanceRects.zw * instanceSizes + padding.xy; vec2 clip_padd_right_bottom = project_pixel_size_to_clipspace(padding.zw); vec2 clip_dimensions = project_pixel_size_to_clipspace(dimensions); vec2 dimensions_wo_pad = instanceRects.zw * instanceSizes; vec2 clip_dimensions_wo_pad = project_pixel_size_to_clipspace(dimensions_wo_pad); //default pos switch on edge if (instanceDragged < 0.5) { vec2 clip_offset = abs(targetPixelOffsets); targetPixelOffsets += (vec2(1.0, 0.0) - step(vec2(-edgeMaxCoord, edgeMaxCoord), target.xy + targetPixelOffsets * vec2(1.0, -1.0) + vec2(-1.0, 1.0) * clip_dimensions)) * (clip_offset * 2.0 + clip_dimensions_wo_pad) * vec2(1.0,-1.0); } target.xy += targetPixelOffsets * vec2(1.0,-1.0); //edge check target.x = clamp(target.x, -edgeMaxCoord + clip_dimensions.x, edgeMaxCoord - clip_padd_right_bottom.x); target.y = clamp(target.y, -edgeMaxCoord + clip_padd_right_bottom.y, edgeMaxCoord - clip_dimensions.y); // 8point target.xy -= 0.5 * clip_dimensions_wo_pad * (step(0., vec2(1.0, -1.0) * (target.xy - source.xy)) + step(0., vec2(1.0, -1.0) * (target.xy - source.xy) - clip_dimensions_wo_pad)) * vec2(1.0, -1.0); //dash source offset vec2 line = target.xy - source.xy; float lineLength = length(line); vec2 clip_dash = project_pixel_size_to_clipspace(vec2(instanceSourceDashOffsets, instanceSourceDashOffsets)); float dashOffset = min( lineLength / sqrt(pow(line.x / clip_dash.x, 2.0) + pow(line.y / clip_dash.y, 2.0)), lineLength ) / lineLength; source = mix(source, target, dashOffset); // linear interpolation of source & target to pick right coord float segmentIndex = positions.x; vec4 p = mix(source, target, segmentIndex); geometry.position = mix(source_commonspace, target_commonspace, segmentIndex); uv = positions.xy; geometry.uv = uv; geometry.pickingColor = instancePickingColors; // Multiply out width and clamp to limits float widthPixels = clamp( project_size_to_pixel(instanceWidths * widthScale, widthUnits), widthMinPixels, widthMaxPixels ); // extrude vec3 offset = vec3( getExtrusionOffset(target.xy - source.xy, positions.y, widthPixels), 0.0); DECKGL_FILTER_SIZE(offset, geometry); DECKGL_FILTER_GL_POSITION(p, geometry); gl_Position = p + vec4(project_pixel_size_to_clipspace(offset.xy), 0.0, 0.0); // Color vColor = vec4(instanceColors.rgb, instanceColors.a * opacity); DECKGL_FILTER_COLOR(vColor, geometry); } `, }); } } 31:T16b3,class LabelMultiIconLayer extends deck._MultiIconLayer { static defaultProps = { getBoundingRect: {type: 'accessor', value: [0, 0, 0, 0]}, getDragged: {type: 'accessor', value: 0.0}, }; initializeState() { super.initializeState(); this.getAttributeManager().addInstanced({ instanceRects: { size: 4, //accessor: 'getBoundingRect' accessor: (object, info) => { return this.parent.getBoundingRect(object, info); } }, instanceDragged: { size: 1, transition: false, accessor: "getDragged", //accessor: (object, info) => { // console.log("dragged",this.id, this.parent.props.getDragged(object, info)); // return this.parent.props.getDragged(object, info); //} }, }); } draw(params) { const {edgeMaxCoord = 1.0 } = this.parent.props; let { backgroundPadding: padding = [0.0, 0.0, 0.0, 0.0] } = this.parent.props; if (padding.length < 4) { padding = [padding[0], padding[1], padding[0], padding[1]]; } params.uniforms.padding = padding; params.uniforms.edgeMaxCoord = edgeMaxCoord; super.draw(params); } getShaders() { return { ...super.getShaders(), vs: `\ #version 300 es #define SHADER_NAME label-icon-layer-vertex-shader in vec2 positions; in vec3 instancePositions; in vec3 instancePositions64Low; in float instanceSizes; in float instanceAngles; in vec4 instanceColors; in vec3 instancePickingColors; in vec4 instanceIconFrames; in float instanceColorModes; in vec2 instanceOffsets; in vec2 instancePixelOffset; in vec4 instanceRects; in float instanceDragged; uniform float sizeScale; uniform vec2 iconsTextureDim; uniform float sizeMinPixels; uniform float sizeMaxPixels; uniform bool billboard; uniform int sizeUnits; uniform vec4 padding; uniform float edgeMaxCoord; out float vColorMode; out vec4 vColor; out vec2 vTextureCoords; out vec2 uv; vec2 rotate_by_angle(vec2 vertex, float angle) { float angle_radian = angle * PI / 180.0; float cos_angle = cos(angle_radian); float sin_angle = sin(angle_radian); mat2 rotationMatrix = mat2(cos_angle, -sin_angle, sin_angle, cos_angle); return rotationMatrix * vertex; } void main(void) { geometry.worldPosition = instancePositions; geometry.uv = positions; geometry.pickingColor = instancePickingColors; uv = positions; vec2 iconSize = instanceIconFrames.zw; // convert size in meters to pixels, then scaled and clamp // project meters to pixels and clamp to limits float sizePixels = clamp( project_size_to_pixel(instanceSizes * sizeScale, sizeUnits), sizeMinPixels, sizeMaxPixels ); // scale icon height to match instanceSize float instanceScale = iconSize.y == 0.0 ? 0.0 : sizePixels / iconSize.y; // scale and rotate vertex in "pixel" value and convert back to fraction in clipspace vec2 pixelOffset = positions / 2.0 * iconSize + instanceOffsets; pixelOffset = rotate_by_angle(pixelOffset, instanceAngles) * instanceScale; vec2 offset_icon = pixelOffset; pixelOffset += instancePixelOffset; pixelOffset.y *= -1.0; if (billboard) { gl_Position = project_position_to_clipspace(instancePositions, instancePositions64Low, vec3(0.0), geometry.position); DECKGL_FILTER_GL_POSITION(gl_Position, geometry); vec3 offset = vec3(pixelOffset, 0.0); DECKGL_FILTER_SIZE(offset, geometry); gl_Position.xy += project_pixel_size_to_clipspace(offset.xy); vec2 dimensions_wo_padd = instanceRects.zw * instanceSizes; vec2 clip_paddLT = project_pixel_size_to_clipspace(padding.xy); vec2 clip_paddRB = project_pixel_size_to_clipspace(padding.zw); vec2 positions0 = (positions + vec2(1.)) * 0.5; vec2 clip_offset_icon = project_pixel_size_to_clipspace(offset_icon); vec2 clip_dimensions_wo_padd = project_pixel_size_to_clipspace(dimensions_wo_padd); //default pos switch on edge if (instanceDragged < 0.5) { vec2 clip_offset = project_pixel_size_to_clipspace(abs(instancePixelOffset)); gl_Position.x += (1.0 - step(-edgeMaxCoord + clip_paddLT.x, gl_Position.x - clip_dimensions_wo_padd.x - clip_offset_icon.x)) * (clip_offset.x * 2.0 + clip_dimensions_wo_padd.x); gl_Position.y += (-step(edgeMaxCoord - clip_paddLT.y, gl_Position.y + clip_dimensions_wo_padd.y + clip_offset_icon.y)) * (clip_offset.y * 2.0 + clip_dimensions_wo_padd.y); } //edge check vec2 a = vec2(0.); vec2 b = vec2(0.); a.x = clamp(gl_Position.x, -edgeMaxCoord + clip_paddLT.x + clip_dimensions_wo_padd.x + clip_offset_icon.x , edgeMaxCoord - clip_paddRB.x + clip_offset_icon.x); b.x = clamp(gl_Position.x, -edgeMaxCoord + clip_paddLT.x + clip_dimensions_wo_padd.x + clip_offset_icon.x , edgeMaxCoord - clip_paddRB.x + clip_offset_icon.x); a.y = clamp(gl_Position.y, -edgeMaxCoord + clip_paddRB.y - clip_offset_icon.y, edgeMaxCoord - clip_paddLT.y - clip_dimensions_wo_padd.y - clip_offset_icon.y); b.y = clamp(gl_Position.y, -edgeMaxCoord + clip_paddRB.y - clip_offset_icon.y, edgeMaxCoord - clip_paddLT.y - clip_dimensions_wo_padd.y - clip_offset_icon.y); gl_Position.x = mix(a.x, b.x, positions0.x); gl_Position.y = mix(a.y, b.y, 1. - positions0.y); } else { vec3 offset_common = vec3(project_pixel_size(pixelOffset), 0.0); DECKGL_FILTER_SIZE(offset_common, geometry); gl_Position = project_position_to_clipspace(instancePositions, instancePositions64Low, offset_common, geometry.position); DECKGL_FILTER_GL_POSITION(gl_Position, geometry); } vTextureCoords = mix( instanceIconFrames.xy, instanceIconFrames.xy + iconSize, (positions.xy + 1.0) / 2.0 ) / iconsTextureDim; vColor = instanceColors; DECKGL_FILTER_COLOR(vColor, geometry); vColorMode = instanceColorModes; } ` } } }32:T14b0,class LabelBackgroundLayer extends deck._TextBackgroundLayer { static defaultProps = { getDragged: {type: 'accessor', value: 0.0}, }; initializeState() { super.initializeState(); this.getAttributeManager().addInstanced({ instanceDragged: { size: 1, transition: false, accessor: "getDragged", //accessor: (object, info) => { // return this.parent.props.getDragged(object, info); //} }, }); } draw(params) { const {cornerRadius = 0} = this.props; const {edgeMaxCoord = 1.0 } = this.parent.props; params.uniforms.cornerRadius = cornerRadius; params.uniforms.edgeMaxCoord = edgeMaxCoord; super.draw(params); } getShaders() { return { ...super.getShaders(), vs: `\ #version 300 es #define SHADER_NAME label-text-background-layer-vertex-shader in vec2 positions; in vec3 instancePositions; in vec3 instancePositions64Low; in vec4 instanceRects; in float instanceSizes; in float instanceAngles; in vec2 instancePixelOffsets; in float instanceLineWidths; in vec4 instanceFillColors; in vec4 instanceLineColors; in vec3 instancePickingColors; in float instanceDragged; uniform bool billboard; uniform float opacity; uniform float sizeScale; uniform float sizeMinPixels; uniform float sizeMaxPixels; uniform vec4 padding; uniform int sizeUnits; uniform float edgeMaxCoord; out vec4 vFillColor; out vec4 vLineColor; out float vLineWidth; out vec2 uv; out vec2 dimensions; vec2 rotate_by_angle(vec2 vertex, float angle) { float angle_radian = radians(angle); float cos_angle = cos(angle_radian); float sin_angle = sin(angle_radian); mat2 rotationMatrix = mat2(cos_angle, -sin_angle, sin_angle, cos_angle); return rotationMatrix * vertex; } void main(void) { geometry.worldPosition = instancePositions; geometry.uv = positions; geometry.pickingColor = instancePickingColors; uv = positions; vLineWidth = instanceLineWidths; // convert size in meters to pixels, then scaled and clamp // project meters to pixels and clamp to limits float sizePixels = clamp( project_size_to_pixel(instanceSizes * sizeScale, sizeUnits), sizeMinPixels, sizeMaxPixels ); dimensions = instanceRects.zw * sizePixels + padding.xy + padding.zw; vec2 pixelOffset = (positions * instanceRects.zw + instanceRects.xy) * sizePixels + mix(-padding.xy, padding.zw, positions); pixelOffset = rotate_by_angle(pixelOffset, instanceAngles); pixelOffset += instancePixelOffsets; pixelOffset.y *= -1.0; if (billboard) { gl_Position = project_position_to_clipspace(instancePositions, instancePositions64Low, vec3(0.0), geometry.position); DECKGL_FILTER_GL_POSITION(gl_Position, geometry); vec3 offset = vec3(pixelOffset, 0.0); DECKGL_FILTER_SIZE(offset, geometry); gl_Position.xy += project_pixel_size_to_clipspace(offset.xy); vec2 clip_dimensions = project_pixel_size_to_clipspace(dimensions); //default pos switch on edge if (instanceDragged < 0.5) { vec2 clip_dimensions_wo_padd = project_pixel_size_to_clipspace(instanceRects.zw * sizePixels); vec2 clip_offset = project_pixel_size_to_clipspace(abs(instancePixelOffsets)); gl_Position.xy += (vec2(1.0, 0.0) - step(vec2(-edgeMaxCoord, edgeMaxCoord), gl_Position.xy + vec2(-1.0, 1.0) * clip_dimensions * positions)) * (clip_offset * 2.0 + clip_dimensions_wo_padd); } //edge check vec2 a = clamp(gl_Position.xy, vec2(-edgeMaxCoord), vec2(edgeMaxCoord) - clip_dimensions); vec2 b = clamp(gl_Position.xy, clip_dimensions - edgeMaxCoord, vec2(edgeMaxCoord)); //flip y gl_Position.xy = mix(a, b, vec2(positions.x, 1.0 - positions.y)); } else { vec3 offset_common = vec3(project_pixel_size(pixelOffset), 0.0); DECKGL_FILTER_SIZE(offset_common, geometry); gl_Position = project_position_to_clipspace(instancePositions, instancePositions64Low, offset_common, geometry.position); DECKGL_FILTER_GL_POSITION(gl_Position, geometry); } // Apply opacity to instance color, or return instance picking color vFillColor = vec4(instanceFillColors.rgb, instanceFillColors.a * opacity); DECKGL_FILTER_COLOR(vFillColor, geometry); vLineColor = vec4(instanceLineColors.rgb, instanceLineColors.a * opacity); DECKGL_FILTER_COLOR(vLineColor, geometry); } `, fs: `\ #version 300 es #define SHADER_NAME label-text-background-layer-fragment-shader precision highp float; uniform bool stroked; uniform float cornerRadius; in vec4 vFillColor; in vec4 vLineColor; in float vLineWidth; in vec2 uv; in vec2 dimensions; out vec4 fragColor; float RectSDF(vec2 p, vec2 b, float r) { vec2 d = abs(p) - b + vec2(r); return min(max(d.x, d.y), 0.0) + length(max(d, 0.0)) - r; } void main() { geometry.uv = uv; vec2 pixelPosition = uv * dimensions; if (stroked) { float fDist = RectSDF(pixelPosition-dimensions/2.0, dimensions/2.0 - vLineWidth/2.0-1.0, cornerRadius); float fBlendAmount = smoothstep(-1.0, 1.0, abs(fDist) - vLineWidth / 2.0); vec4 v4FromColor = vLineColor; vec4 v4ToColor = (fDist < 0.0) ? vFillColor : vec4(0.0); fragColor = mix(v4FromColor, v4ToColor, fBlendAmount); } else { fragColor = vFillColor; } DECKGL_FILTER_COLOR(fragColor, geometry); } ` }} }33:T174a,class LabelLayer extends deck.TextLayer { static defaultProps = { getLineSourceFillOffset: {type: 'accessor', value: 0}, getRadius: {type: 'accessor', value: 0}, getDragged: {type: 'accessor', value: 0.0}, } getPickingInfo(e) { const {info, sourceLayer} = e; //console.log("bounds", this.getBoundingRect(info.object, info)); if (info.index !== -1) { if (this.state.closeData?.[0]?.dataIndex !== info.index) { const labelSize = this.getBoundingRect(info.object, info).slice(2).map(b => b * this.props.getSize); this.setState({ labelSize, closeData: [Object.assign({labelSize, viewportW: info.viewport.width, viewportH: info.viewport.height, dataIndex: info.index }, info.object)]}); } } else { this.setState({closeData: []}) } return info; } //shouldUpdateState({props, oldProps, context, changeFlags}) { // console.log("label shouldUpdateState", props, oldProps, context, changeFlags); //} /* updateState(e) { const {props, changeFlags} = e; if (changeFlags.dataChanged) { } console.log("updateState", props, changeFlags); return super.updateState(e); } */ renderLayers() { /*const sLayers = super.renderLayers(); const layers = sLayers.map(l => { return l && l.clone({ updateTriggers: {...l.props.updateTriggers, getDragged: this.props.updateTriggers["getDragged"]}, getDragged: this.props.getDragged }) }); */ //console.log("LabelLayer", sLayers, layers); return [ new LabelLineLayer(this.getSubLayerProps({ id: 'labelLineLayer', data: this.props.data, getColor: [102, 102, 102], getSourcePosition: this.props.getPosition, getTargetPosition: this.props.getPosition, getTargetPixelOffset: this.props.getPixelOffset, getSourceDashOffset: this.props.getLineSourceFillOffset, getBoundingRect: this.getBoundingRect, getRadius: this.props.getRadius, getSize: this.props.getSize, getWidth: 1, getDragged: this.props.getDragged, padding: this.props.backgroundPadding, edgeMaxCoord: this.props.edgeMaxCoord, updateTriggers: { //getColor: [activeObject], getDragged: this.props.updateTriggers.getDragged, getTargetPixelOffset: this.props.updateTriggers.getPixelOffset//[dragX, dragY] }, transitions: { getSourcePosition: this.props.transitions?.getPosition || {}, getTargetPosition: this.props.transitions?.getPosition || {}, getTargetPixelOffset: this.props.transitions?.getPosition || {}, } //pickable: true, //_dataDiff: (newData, oldData) => { // console.log("_datediff line", newData, oldData, _updateRangesLine); // return dataDiff ? playing ? _updateRangesLine : null : null; //} })), //...layers, ...super.renderLayers(), this.state.closeData?.length && new deck.TextLayer({ id: 'labelCloseTextLayer', _subLayerProps: { background: { type: LabelBackgroundLayer, cornerRadius: 12, getDragged: 1, }, characters: { type: LabelMultiIconLayer, getDragged: 1, } }, data: this.state.closeData || [], getPosition: (d) => { //console.log("close pos", d); return this.props.getPosition(d, {index: d.dataIndex}); }, getPixelOffset: (d) => { const offset = typeof this.props.getPixelOffset == "function" ? this.props.getPixelOffset(d) : this.props.getPixelOffset.slice(0); //adjust label offset if label with current offset located outside of vieport //const offset = labelOffset[key]; const pPos = this.context.viewport.project(this.props.getPosition(d, {index: d.dataIndex}).slice(0,2)); const vW = d.viewportW; const vH = d.viewportH; const [lW, lH] = d.labelSize; const [lPaddL, lPaddT, lPaddR = lPaddL, lPaddB = lPaddT] = this.props.backgroundPadding; const dragged = this.props.getDragged.name ? this.props.getDragged(d) : this.props.getDragged; if (!dragged) { if(pPos[0] + offset[0] < lW + lPaddL) { offset[0] = lW - offset[0]; } if(pPos[1] + offset[1] < lH + lPaddT) { offset[1] = lH - offset[1]; } } if(pPos[0] + offset[0] < lW + lPaddL) { offset[0] = lW + lPaddL - pPos[0]; } else if(pPos[0] + offset[0] > vW - lPaddR) { offset[0] = vW - lPaddR - pPos[0]; } if(pPos[1] + offset[1] < lH + lPaddT) { offset[1] = lH + lPaddT - pPos[1]; } else if(pPos[1] + offset[1] > vH - lPaddB) { offset[1] = vH - lPaddB - pPos[1]; } offset[0] += lPaddR + 9*0.5;//half size closecross .getSize offset[1] -= lH + lPaddT - 9*0.5;//half size closecross .getSize return offset; }, getText: x=>"❌", getColor: [255, 255, 255], getSize: 9, getTextAnchor: 'end', getAlignmentBaseline: 'bottom', getDragged: x=>1, edgeMaxCoord: this.props.edgeMaxCoord, fontSettings: { sdf: true, fontSize: 24, }, characterSet:["❌"], //getPolygonOffset: null,//({layerIndex}) => [0, layerIndex * 100], pickable: true, background: true, backgroundPadding: [8, 9, 8, 8], getBackgroundColor: [0x60, 0x78, 0x89], getBorderColor: [255, 255, 255], getBorderWidth: 2, outlineColor: [255, 255, 255], outlineWidth: 2, updateTriggers: { getPixelOffset: this.props.updateTriggers.getPixelOffset }, })] } }34:T2432,//import { ScaleLinear } from 'd3-scale'; //import { PathLayer, TextLayer } from 'deck.gl'; //import { format } from '../../helpers/format'; /*const formatsAxis: { [key: string]: string } = { heldagar: 'd', 'per person': '.1f', '%': '.0%', '%d': 'd', st: 'd', tkr: 'd', m2: 'd', }; type AxisProps = { id: string; xScale: ScaleLinear; yScale: ScaleLinear; getXLabel: () => string; getYLabel: () => string; xFormat: string; yFormat: string; nTicks?: number; labelTextSize: number; tickTextSize: number; dimLabels?: boolean; };*/ class Axis extends deck.CompositeLayer { static defaultProps = { nTicks: 6, labelTextSize: 18, tickTextSize: 12, dimLabels: false, }; static layerName = 'Axis'; /* shouldUpdateState({props, oldProps, context, changeFlags}) { console.log("axis shouldUpdateState", props, oldProps, context, changeFlags); //if (changeFlags.viewportChanged) return true; return super.shouldUpdateState({props, oldProps, context, changeFlags}); } updateState({props, oldProps, context, changeFlags}) { console.log("axis updateState", props, oldProps, context, changeFlags); super.updateState({props, oldProps, context, changeFlags}) //this.setState({modelMatrix: (new m.Matrix4()).scale(1).translate([context.viewport.position[0] - size.w*0.5, context.viewport.position[1]-size.h*0.5, -1])}) //this.setState({modelMatrix: (new m.Matrix4()).scale(1).translate([context.viewport.position[0] - size.w*0.5, context.viewport.position[1]-size.h*0.5, -1])}) } */ renderLayers() { //console.log("axis renderLayers"); const gridZValue = -1; return [ new deck.PathLayer({ id: `${this.props.id}-axis-paths`, widthUnits: "pixels", widthMinPixels: 1, data: [ // Grid ...this.props.xScale.ticks(this.props.nTicks).map((t) => ({ path: [ [ this.props.xScale(t), this.props.yScale.range()[1], gridZValue, ], [ this.props.xScale(t), this.props.yScale.range()[0], gridZValue, ], ], color: [70, 70, 70, 40], })), ...this.props.yScale.ticks(this.props.nTicks).map((t) => ({ path: [ [ this.props.xScale.range()[0], this.props.yScale(t), gridZValue, ], [ this.props.xScale.range()[1], this.props.yScale(t), gridZValue, ], ], color: [70, 70, 70, 40], })), // XAxis { path: [ [ this.props.xScale.range()[0], this.props.yScale.range()[0], ], [ this.props.xScale.range()[1], this.props.yScale.range()[0], ], ], color: [70, 70, 70, 255], width: 1, }, ...this.props.xScale.ticks(this.props.nTicks).map((t) => ({ path: [ [ this.props.xScale(t), this.props.yScale.range()[0], ], [ this.props.xScale(t), this.props.yScale.range()[0] + 10, ], ], color: [70, 70, 70, 255], })), // YAxis { path: [ [ this.props.xScale.range()[0], this.props.yScale.range()[1], ], [ this.props.xScale.range()[0], this.props.yScale.range()[0], ], ], color: [70, 70, 70, 255], width: 1, }, ...this.props.yScale.ticks(this.props.nTicks).map((t) => ({ path: [ [ this.props.xScale.range()[0], this.props.yScale(t), ], [ this.props.xScale.range()[0] - 10, this.props.yScale(t), ], ], color: [70, 70, 70, 255], })), ], getPath: (d) => d.path, getColor: (d) => d.color, getWidth: (d) => d.width ?? 1, }), new deck.TextLayer({ id: `${this.props.id}-x-labels`, data: [{}], getPosition: (d) => { return [ this.props.xScale.range()[1] - 3, this.props.yScale.range()[0], ]; }, getText: this.props.getXLabel, getColor: [70, 70, 70], getSize: this.props.labelTextSize, sizeUnits: 'pixels', getAlignmentBaseline: 'bottom', getTextAnchor: 'end', characterSet: CHARACTER_SET, //fontFamily, }), new deck.TextLayer({ id: `${this.props.id}-x-ticks`, data: this.props.xScale.ticks(this.props.nTicks).map((t) => ({ pos: [ this.props.xScale(t), this.props.yScale.range()[0] + 11, ], label: d3.format(formatsAxis[this.props.xFormat])(t), })), getPosition: (d) => d.pos, getText: (d) => String(d.label), getColor: (d) => { return [70, 70, 70, this.props.dimLabels ? 100 : 255]; }, getSize: this.props.tickTextSize, sizeUnits: 'pixels', getAlignmentBaseline: 'top', getTextAnchor: 'middle', characterSet: CHARACTER_SET, //fontFamily, updateTriggers: { getColor: [this.props.dimLabels], }, }), new deck.TextLayer({ id: `${this.props.id}-y-labels`, data: [{}], getPosition: (d) => { return [ this.props.xScale.range()[0], this.props.yScale.range()[1] + 3, ]; }, getText: this.props.getYLabel, getColor: [70, 70, 70], getSize: this.props.labelTextSize, sizeUnits: 'pixels', getAlignmentBaseline: 'bottom', getTextAnchor: 'start', getAngle: -90, characterSet: CHARACTER_SET, //fontFamily, }), new deck.TextLayer({ id: `${this.props.id}-y-ticks`, data: this.props.yScale.ticks(this.props.nTicks).map((t) => ({ pos: [ this.props.xScale.range()[0] - 11, this.props.yScale(t), ], label: d3.format(formatsAxis[this.props.yFormat])(t), })), getPosition: (d) => d.pos, getText: (d) => String(d.label), getColor: (d) => { return [70, 70, 70, this.props.dimLabels ? 100 : 255]; }, getSize: this.props.tickTextSize, sizeUnits: 'pixels', getAlignmentBaseline: 'top', getTextAnchor: 'middle', characterSet: CHARACTER_SET, getAngle: -90, //fontFamily, updateTriggers: { getColor: [this.props.dimLabels], }, }), ]; } } 35:T574,DEFAULT_CORE = (markerName) => ({ requiredEncodings: [],//["x", "y", "size"], encoding: { "selected": { modelType: "selection", data: { filter: { ref: `markers.${markerName}.encoding.trail.data.filter` } } }, "highlighted": { modelType: "selection" }, "superhighlighted": { modelType: "selection" }, "x": { scale: { allowedTypes: ["linear", "log", "genericLog", "pow", "time"] } }, "y": { modelType: "lane", scale: { allowedTypes: ["linear", "log", "genericLog", "pow", "time", "rank"] } }, "order": { modelType: "order", data: { ref: `markers.${markerName}.encoding.size.data.config` }, }, "size": { scale: { modelType: "size", allowedTypes: ["linear", "point"], range: [0, 50] } }, "color": { scale: { modelType: "color" } }, "label": { data: { modelType: "entityPropertyDataConfig", concept: "name" } }, "frame": { modelType: "frame", speed: options.speed, extrapolate:32 }, "trail": { modelType: "trail" }, "size_label": { data: { constant: "_default" }, scale: { modelType: "size", allowedTypes: ["linear", "point"] } }, "repeat": { modelType: "repeat", allowEnc: ["y", "x"] } } }); 36:T53e,features = { const map = { "missingDataColor": "none", //"#999" or "none" for transparent. "none" makes it faster "scale": 1, "preserveAspectRatio": true, "mapEngine": "mapbox", "mapStyle": "mapbox://styles/mapbox/light-v9", "showBubbles": false, "showAreas": true, "showMap": true, "offset": { "top": 0.05, "bottom": -0.12, "left": 0, "right": 0 }, "path": null, "bounds": { west: 14.91, north: 59.72, east: 19.71, south: 57.26 }, "projection": "mercator", topology: { path: "assets/shapes.json", objects: { areas: "shapes", boundaries: false }, projection: "geoMercator", geoIdProperty: "id", } }; const shapes = await model.markers.bubble.data.source.reader.getAsset(map.topology.path); const _features = topojson.feature(shapes, shapes.objects[map.topology.objects.areas]); const projection = d3[map.topology.projection](); projection.scale(1).translate([0, 0]); const d3GeoPath = d3.geoPath(projection); _features.features.forEach(f => { f.properties.centroid = projection.invert(d3GeoPath.centroid(f)); }) console.log(_features); return _features; }37:[] 2d:{"id":"181f629ec299ef7a","slug":null,"title":"Vizabi && Deck.GL reading from ddfcsv","thumbnail":"d55778d0c746e5957c0c89b7ba467ee7cadf9f7a740dbe963223cd6dcc8ced8b","access_level":"public","create_time":"$D2024-12-08T23:31:16.060Z","update_time":"$D2025-11-01T12:15:17.700Z","view_time":null,"first_public_time":"$D2024-12-09T15:38:24.858Z","fork":{"id":"8e3706b9100bbcb7","slug":null,"title":"Vizabi && Deck.GL reading a csv file from google spreadsheets","owner":{"id":"4d8f6680ddb5011c","login":"dab2000","name":"Dmitry Basov"}},"stars":0,"starred":false,"owner":{"type":"team","id":"81bb11a461e5d2b8","login":"vizabi","name":"Vizabi","avatar_url":"https://avatars-next.observableusercontent.com/c33fa9d83b5b9c0875ea6594a15f36fcce5962e6c2b0f038b340451341136c7f","tier":"starter_2024"},"version":1817,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"ade6ffd71fc78c40","login":"dab2000","name":"Dmitry Basov","avatar_url":"https://avatars-next.observableusercontent.com/9bc27828ce5145076d954fbbe486c1470a7f33db28cf9fc92d374bfb8060c04c","tier":null}],"members":[{"type":"individual","id":"ade6ffd71fc78c40","login":"dab2000","name":"Dmitry Basov","avatar_url":"https://avatars-next.observableusercontent.com/9bc27828ce5145076d954fbbe486c1470a7f33db28cf9fc92d374bfb8060c04c","tier":null,"role":"editor"},{"type":"team","id":"81bb11a461e5d2b8","login":"vizabi","name":"Vizabi","avatar_url":"https://avatars-next.observableusercontent.com/c33fa9d83b5b9c0875ea6594a15f36fcce5962e6c2b0f038b340451341136c7f","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Vizabi && Deck.GL reading from ddfcsv","cells":[{"id":0,"value":"# Vizabi && Deck.GL reading from ddfcsv","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":510,"value":"viewof url = Inputs.text({label: \"url\", value: \"https://github.com/open-numbers/ddf--ibfuu--boendebarometer\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":509,"value":"url","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1797,"value":"config = ({\n markers: {\n bubble: {\n data: {\n space: [\"geo\", \"year\"],\n filter: {\n dimensions: { \"geo\": { \"$or\": [{ \"is--regso\": true }] } }\n }\n },\n encoding: {\n y: {data: {concept: \"mean_hogskola_25_64\"}}, \n x: {data: {concept: \"median_dispink_20_64\"}, scale: {type: \"log\"}},\n z: {data: {concept: \"antal\"}}, \n size: {data: {concept: \"antal\"}}, \n color: {\n data: {space: [\"geo\"], concept: \"region\"},\n scale: { modelType: \"color\", type: \"ordinal\" }\n }\n }\n }\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":583,"value":"# Integration code","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":823,"value":"mutable stepCount = null","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":885,"value":"play0 = {\n console.log(\"play\", play);\n if (model.markers.bubble.state !== \"fulfilled\") return;\n const playing = model.markers.bubble.encoding.frame.playing;\n model.markers.bubble.encoding.frame[playing ? \"stopPlaying\" : \"startPlaying\"]();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":880,"value":"viewof play = Inputs.button(\"Play\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":691,"value":"viewof step = Inputs.range([0, mutable stepCount], {label: \"Step\", value: mutable stepCount, step: 1, width})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1389,"value":"container = html `

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1746,"value":"deck.log.level = 0","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1521,"value":"deckMap = {\n return new deck.DeckGL({\n // The HTML container to render into\n container: d3.select(\"#containerMap\").node(),\n map: mapboxgl,\n mapboxApiAccessToken: \"pk.eyJ1Ijoic2VyZ2V5ZiIsImEiOiJjaXlqeWo5YnYwMDBzMzJwZnlwZXJ2bnA2In0.e711ku9KzcFW_x5wmOZTag\",\n mapStyle: 'mapbox://styles/mapbox/light-v9',\n views: new deck.MapView({\n id: 'map', \n controller: true,\n }),\n initialViewState: {\n longitude: 16.20104449413519,\n latitude: 62.79161914246308,\n pitch: 0,\n zoom: 4.332366670400294,\n },\n controller: true,\n onViewStateChange: e => {\n //console.log(\"onviewstatechange\", e);\n },\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1418,"value":"deckBubble = {\n size.w = d3.select(\"#containerBubble\").node().offsetWidth;\n return new deck.DeckGL({\n // The HTML container to render into\n container: d3.select(\"#containerBubble\").node(),\n views: getViews(),\n initialViewState: {\n target: [size.w * 0.5, size.h * 0.5, 0],\n maxZoom: 9.5,\n minZoom: -6.9,\n zoom: 0\n },\n //controller: true,\n layerFilter: ({layer, viewport}) => {\n //console.log(\"layerFilter\", viewport.id, layer.id);\n if (viewport.id == 'axis' && layer.id === 'Axis') {\n return true;\n }\n if (viewport.id == 'bubble' && layer.id !== 'Axis') {\n return true;\n } \n return false;\n },\n onViewStateChange: e => {\n //console.log(\"onviewstatechange\", e);\n },\n\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1770,"value":"getViews = (controllerProps = true) => {\n return [\n new deck.OrthographicView({id: 'axis', \n controller: false,\n //padding: { left: 50, top: 50, bottom: 50, right: 50 },\n flipY: false, far: 1000}),\n new deck.OrthographicView({id: 'bubble', \n controller: controllerProps, \n flipY: false, far: 1000})\n ]\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1745,"value":"options = ({\n opacityNormal: 180,\n opacitySelected: 200,\n opacityNonSelected: 10,\n \n speed: 12000,\n minRadiusPx: 2,\n maxRadiusPx: 50\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":702,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1738,"value":"resortData = function(data, newData, trailsCount) {\n const keyToIndex = {};\n const trailsStartIndex = {};\n let i = 0, index;\n \n data.forEach((d, i) => {\n if (d[TRAIL_KEY]) {\n if (trailsStartIndex[d[TRAIL_KEY]] === undefined) trailsStartIndex[d[TRAIL_KEY]] = i;\n } else {\n keyToIndex[d[KEY]] = d;\n }\n });\n //console.log(\"trailsStartIndex\", trailsStartIndex);\n return newData.map(d => {\n if (d[TRAIL_KEY]) {\n index = i++;\n if (i > trailsCount) i = 0;\n return data[trailsStartIndex[d[TRAIL_KEY]] + index];\n }\n return keyToIndex[d[KEY]];\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":305,"value":"model = {\n const ddfReader = new DDFCsvReader.getDDFCsvReaderObject();\n Vizabi.stores.dataSources.createAndAddType(\"ddfcsv\", ddfReader);\n \n const model = Vizabi(mergeConfig(url, config));\n const fullMarker = model.markers.bubble;\n Vizabi.utils.applyDefaults(model.markers.bubble.config, DEFAULT_CORE(\"bubble\"));\n const frameType = Vizabi.stores.encodings.modelTypes.frame;\n const { marker, splashMarker } = frameType.splashMarker(fullMarker);\n model.markers.bubble = marker;\n\n return model;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1026,"value":"disposer = []","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":714,"value":"KEY = Symbol.for(\"key\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":965,"value":"TRAIL_KEY = Symbol.for(\"trailHeadKey\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1754,"value":"year = d3.utcFormat(\"%Y\");\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":716,"value":"size = ({\n w: 700,\n h: 600\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":728,"value":"mutable data = []","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":817,"value":"mobx.autorun(() => {\n model.markers.bubble.state == \"fulfilled\" && (mutable stepCount = model.markers.bubble.encoding.frame.stepCount - 1);\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":726,"value":"mobx.autorun(() => {\n if (model.markers.bubble.state !== \"fulfilled\") return;\n\n mutable data = model.markers.bubble;\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":699,"value":"mobx.autorun(() => {\n model.markers.bubble.state == \"fulfilled\" && model.markers.bubble.encoding.frame.setStep(step);\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1743,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1780,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1742,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1752,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1765,"value":"formatsAxis = ({\n heldagar: 'd',\n 'per person': '.1f',\n '%': '.0%',\n '%d': 'd',\n st: 'd',\n tkr: 'd',\n m2: 'd',\n});\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1764,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":581,"value":"# Chart config","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":625,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"mergeConfig = (url, custom = {}) => {\n const result = deepmerge({\n markers: {\n bubble: {\n data: { source: \"data1\" }\n }\n },\n dataSources: {\n data1: {\n path: url,\n modelType: \"ddfcsv\",\n locale: \"en\"\n }\n }\n}, custom)\nconsole.log(\"config\", result)\nreturn result;\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1359,"value":"# Load assets","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1362,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":502,"value":"# Import external files","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":407,"value":"{\n document.head.appendChild(html`\n \n \n`);\n return \"css imports\"\n}","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":570,"value":"# Dependencies","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1605,"value":"CHARACTER_SET =\n 'ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖabcdefghijklmnopqrstuvwxyzåäéö0123456789+-−–*/%,.²:() '.split('');","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":301,"value":"Vizabi = require(\"@vizabi/core@1.32.2\") ","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":576,"value":"VizabiSharedComponents = require(\"@vizabi/shared-components@1.43.2\")","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":493,"value":"deepmerge = (await require(\"lodash@4\")).merge","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":563,"value":"mobx = require('mobx@5.15.7/lib/mobx.umd.min.js')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":564,"value":"d3 = require(\"d3@latest\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":707,"value":"deck = require(\"https://unpkg.com/deck.gl@9.0.40/dist.min.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1324,"value":"DDFCsvReader = require('https://unpkg.com/@vizabi/reader-ddfcsv@4.5.3/dist/reader-ddfcsv.js')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1432,"value":"mapboxgl = require('mapbox-gl@latest')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1680,"value":"GL = (await require(\"https://unpkg.com/@luma.gl/constants/dist/dist.dev.js\")).GL","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1761,"value":"m = import(\"https://unpkg.com/@math.gl/core@latest/dist/index.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 2e:"$2d:body"