Published
Edited
Nov 27, 2020
Importers
1 star
Also listed in…
Hello
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;
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.