Software artisan · Data is alive, flows, and belongs to you
An Hexgrid Web ComponentHexagonal game board with ‹hex grid› cellsH3 geospatial indexes playgroundD3 Geo — How to center the sphere on a ‹lat,lon› coord‹h3-worldmap› web componentConnecting Datascript with ObservableConnecting GUN and SEA with ObservablePlaying with Gunnery.js
Variants of the shape of the area attribute value of our ‹h3-worldmap› web component
areasCurrentForm = [ "80abfffffffffff", "80e1fffffffffff", "80a5fffffffffff",
"8035fffffffffff", "801ffffffffffff" ]
areaFutureFormTarget = [
{ area: "80abfffffffffff", title: "New Board", style: "highlighted" },
{ area: "80e1fffffffffff", title: "Existing Board 01", style: "normal" },
{ area: "80a5fffffffffff", title: "Existing Board 02", style: "normal" },
{ area: "8035fffffffffff", title: "Existing Board 03", style: "normal" },
{ area: "801ffffffffffff", title: "Existing Board 04", style: "normal" }
]
areaFutureFormAlt01 = [
[ "80abfffffffffff", "80a5fffffffffff", "8035fffffffffff", "801ffffffffffff" ],
[ "80e1fffffffffff" ]
]
areasFutureFormAlt02 = ({
g1: [ "80abfffffffffff", "80a5fffffffffff", "8035fffffffffff", "801ffffffffffff" ],
g2: [ "80e1fffffffffff" ]
})
areasFutureFormAlt03 = ({
g1: {
title: "Existing boards", style: "normal",
areas: [ "80abfffffffffff", "80e1fffffffffff", "80a5fffffffffff", "8035fffffffffff", "801ffffffffffff" ] },
g2: {
title: "New board", style: "highlighted",
areas: [ "80abfffffffffff" ] },
})
areasFutureFormAlt04 = ({
groups: {
g1: { title: "Existing boards", style: "…" },
g2: { title: "New boards", style: "…" }
},
areas: {
g1: [ "80abfffffffffff", "80a5fffffffffff", "8035fffffffffff", "801ffffffffffff" ],
g2: [ "80e1fffffffffff" ]
}
})
import {worldAtlasSrc, H3WorldMap} from "@olange/h3-worldmap"
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.
