Published
Edited
Nov 27, 2020
Importers
1 star
viewof gridMode = select({
title: "gridMode",
options: ["square", "hexagon"],
value: "hexagon",
description: "The shape of cells,<br> default: hexagon"
})
viewof zoneSize = slider({
title: "zoneSize",
min: 0,
max: 10000,
step: 10,
value: 10000,
description: "Size of the cell at a scale of 10, default: 10000"
})
viewof gridOrigin = text({
title: "gridOrigin",
value: "auto",
description:
"Setting the value of a L.latLng instance<br> will manually define the SW corner of the <br>grid. Value 'auto' will define the origin<br> based on data and gridBoundsPadding.<br> default: auto"
})
viewof gridEnd = text({
title: "gridEnd",
value: "auto",
description:
'NE corner of the grid. In case value "auto"<br> is used, corner will be calculated from data<br> and gridBoundsPadding option. default: auto'
})
viewof gridBoundsPadding = slider({
title: "gridBoundsPadding",
min: 0,
max: 1,
precision: 1,
value: 0.1,
description: "Ratio to extend bounding box of elements, default: 0.1"
})
viewof showCells = checkbox({
title: "showCells",
options: [""],
value: "showCells",
description: "turning cells off and on.<br> default: true"
})
viewof showMarkers = checkbox({
title: "showMarkers",
options: [""],
value: "showMarkers",
description: "turning markers off and on.<br> default: true"
})
viewof showTexts = checkbox({
title: "showTexts",
options: [""],
value: "showTexts",
description: "turning texts off and on.<br> default: true"
})
viewof showEmptyCells = checkbox({
title: "showEmptyCells",
options: [""],
description:
"whether display cells where no elements fall.<br> default: false"
})
// zoomShowElements (default: 10) level of zoom when to turn elements on and off
viewof zoomShowElements = slider({
title: "zoomShowElements",
min: 1,
max: 20,
step: 1,
value: 10,
description: "level of zoom when to turn elements on and off,<br> default: 10"
})
// zoomHideGrid (default: 10) level of zoom when to turn grid on and off
viewof zoomHideGrid = slider({
title: "zoomHideGrid",
min: 1,
max: 20,
step: 1,
value: 10,
description: "level of zoom when to turn grid on and off,<br> default: 10"
})
// indexSize (default: 12) for a better performence, zones and elements are pre-indexed. Option indexSize difenes the number of super-zones within each axis
viewof indexSize = slider({
title: "indexSize",
min: 1,
max: 20,
step: 1,
value: 12,
description:
" for a better performance, zones and elements<br> are pre-indexed. Option indexSize defines the<br> number of super-zones within each axis,<br> default: 12"
})
// paneElementsZ (default: 10000)
viewof paneElementsZ = slider({
title: "paneElementsZ",
min: 1,
max: 10000,
step: 1,
value: 10000,
description: "default: 10000"
})
// paneCellsZ (default: 700)
viewof paneCellsZ = slider({
title: "paneCellsZ",
min: 1,
max: 1000,
step: 1,
value: 700,
description: "z-index, default: 700"
})
// paneMarkersZ (default: 800)
viewof paneMarkersZ = slider({
title: "paneMarkersZ",
min: 1,
max: 1000,
step: 1,
value: 800,
description: "z-index, default: 800"
})
// paneTextsZ (default: 900)
viewof paneTextsZ = slider({
title: "paneTextsZ",
min: 1,
max: 1000,
step: 1,
value: 900,
description: "z-index, default: 900"
})
ruleCells = ({
fillColor: {
method: "count",
scale: "continuous",
range: ["#ffffb2", "#fecc5c", "#fd8d3c", "#e31a1c"]
},
color: "black",
fillOpacity: 0.2,
weight: 0
})
ruleMarkers = ({
color: "white",
weight: 2,
fillOpacity: 0.9,
fillColor: {
method: "count",
attribute: "",
scale: "continuous",
range: ["#ffffb2", "#fecc5c", "#fd8d3c", "#e31a1c"]
},
radius: {
method: "count",
attribute: "",
scale: "continuous",
range: [7, 17]
}
})
ruleText = ({
color: {
method: "count",
scale: "quantile",
range: ["grey", "black"]
},
fontSize: {
method: "count",
scale: "continuous",
range: [12, 22]
},
fontWeight: "bold",
text: {
method: "count",
attribute: ""
},
anchorOffsetX: {
method: "count",
scale: "continuous",
range: [3, 12]
},
anchorOffsetY: {
method: "count",
scale: "continuous",
range: [-5, -1]
}
})
rgc = {
L;
const rgc = require('https://cdn.jsdelivr.net/gh/adammertel/Leaflet.RegularGridCluster/dist/leaflet-regulargridcluster.js').catch(
() => L.regularGridCluster
);
yield rgc;
}
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.
