@cosmos.gl/graph 2.5.0 → 2.6.1

package/src/stories/clusters/with-labels.ts

@@ -1,53 +0,0 @@
-import { Graph } from '@cosmos.gl/graph'
-import { createClusterLabels } from '../create-cluster-labels'
-import { createCosmos } from '../create-cosmos'
-import { generateMeshData } from '../generate-mesh-data'
-
-export const withLabels = (): {div: HTMLDivElement; graph: Graph; destroy: () => void } => {
-  let nClusters = 2
-  const { pointPositions, pointColors, pointClusters } = generateMeshData(100, 100, nClusters, 1.0)
-
-  const { div, graph } = createCosmos({
-    pointPositions,
-    pointColors,
-    pointClusters,
-    simulationGravity: 2,
-    simulationCluster: 0.25,
-    simulationRepulsion: 10,
-    pointSize: 10,
-  })
-
-  const updateClusterLabels = createClusterLabels({ div })
-  graph.setZoomLevel(0.3)
-
-  graph.setConfig({
-    onZoom: updateClusterLabels.bind(this, graph),
-    onSimulationTick: updateClusterLabels.bind(this, graph),
-  })
-
-  let increasing = true
-  const interval = setInterval(() => {
-    if (increasing) {
-      nClusters += 5
-      if (nClusters >= 15) {
-        increasing = false
-      }
-    } else {
-      nClusters -= 5
-      if (nClusters <= 2) {
-        increasing = true
-      }
-    }
-
-    const nextData = generateMeshData(100, 100, nClusters, 1.0)
-    graph.setPointClusters(nextData.pointClusters)
-    graph.setPointColors(nextData.pointColors)
-    graph.render(1)
-  }, 1500)
-
-  const destroy = (): void => {
-    clearInterval(interval)
-  }
-
-  return { div, graph, destroy }
-}

package/src/stories/clusters/worm.ts

@@ -1,40 +0,0 @@
-
-import { Graph } from '@cosmos.gl/graph'
-import { createCosmos } from '../create-cosmos'
-import { generateMeshData } from '../generate-mesh-data'
-
-export const worm = (): {graph: Graph; div: HTMLDivElement} => {
-  const { pointPositions, pointColors, links, linkColors, pointClusters } = generateMeshData(100, 100, 1000, 1.0)
-
-  const { div, graph } = createCosmos({
-    simulationGravity: 0.5,
-    simulationRepulsion: 1,
-    simulationLinkSpring: 1,
-    pointPositions,
-    pointColors,
-    pointClusters,
-    links,
-    linkColors,
-    onSimulationTick: () => {
-      const currentPointColors = graph.getPointColors()
-      const newPointColors = new Float32Array(currentPointColors.length)
-      for (let i = 0; i < currentPointColors.length / 4; i++) {
-        if (i === 0) {
-          newPointColors[i * 4] = currentPointColors[currentPointColors.length - 4] as number
-          newPointColors[i * 4 + 1] = currentPointColors[currentPointColors.length - 3] as number
-          newPointColors[i * 4 + 2] = currentPointColors[currentPointColors.length - 2] as number
-          newPointColors[i * 4 + 3] = currentPointColors[currentPointColors.length - 1] as number
-        } else {
-          newPointColors[i * 4] = currentPointColors[(i - 1) * 4] as number
-          newPointColors[i * 4 + 1] = currentPointColors[(i - 1) * 4 + 1] as number
-          newPointColors[i * 4 + 2] = currentPointColors[(i - 1) * 4 + 2] as number
-          newPointColors[i * 4 + 3] = currentPointColors[(i - 1) * 4 + 3] as number
-        }
-      }
-      graph.setPointColors(newPointColors)
-      graph.render()
-    },
-  })
-
-  return { div, graph }
-}

package/src/stories/clusters.stories.ts

@@ -1,77 +0,0 @@
-import type { Meta } from '@storybook/html'
-import { CosmosStoryProps } from '@/graph/stories/create-cosmos'
-import { createStory, Story } from '@/graph/stories/create-story'
-import { withLabels } from './clusters/with-labels'
-import { worm } from './clusters/worm'
-import { radial } from './clusters/radial'
-import { polygonSelection } from './clusters/polygon-selection'
-
-import createCosmosRaw from './create-cosmos?raw'
-import generateMeshDataRaw from './generate-mesh-data?raw'
-import withLabelsStoryRaw from './clusters/with-labels?raw'
-import createClusterLabelsRaw from './create-cluster-labels?raw'
-import wormStory from './clusters/worm?raw'
-import radialStory from './clusters/radial?raw'
-import polygonSelectionStory from './clusters/polygon-selection?raw'
-import polygonSelectionStyleRaw from './clusters/polygon-selection/style.css?raw'
-import polygonSelectionPolygonRaw from './clusters/polygon-selection/polygon.ts?raw'
-
-const meta: Meta<CosmosStoryProps> = {
-  title: 'Examples/Clusters',
-  parameters: {
-    controls: {
-      disable: true,
-    },
-  },
-}
-
-const sourceCodeAddonParams = [
-  { name: 'create-cosmos', code: createCosmosRaw },
-  { name: 'generate-mesh-data', code: generateMeshDataRaw },
-]
-
-export const Worm: Story = {
-  ...createStory(worm),
-  parameters: {
-    sourceCode: [
-      { name: 'Story', code: wormStory },
-      ...sourceCodeAddonParams,
-    ],
-  },
-}
-
-export const Radial: Story = {
-  ...createStory(radial),
-  parameters: {
-    sourceCode: [
-      { name: 'Story', code: radialStory },
-      ...sourceCodeAddonParams,
-    ],
-  },
-}
-
-export const WithLabels: Story = {
-  ...createStory(withLabels),
-  parameters: {
-    sourceCode: [
-      { name: 'Story', code: withLabelsStoryRaw },
-      { name: 'create-cluster-labels', code: createClusterLabelsRaw },
-      ...sourceCodeAddonParams,
-    ],
-  },
-}
-
-export const PolygonSelection: Story = {
-  ...createStory(polygonSelection),
-  parameters: {
-    sourceCode: [
-      { name: 'Story', code: polygonSelectionStory },
-      { name: 'polygon.ts', code: polygonSelectionPolygonRaw },
-      ...sourceCodeAddonParams,
-      { name: 'style.css', code: polygonSelectionStyleRaw },
-    ],
-  },
-}
-
-// eslint-disable-next-line import/no-default-export
-export default meta

package/src/stories/create-cluster-labels.ts

@@ -1,50 +0,0 @@
-import { Graph } from '@cosmos.gl/graph'
-
-export const createClusterLabels = (props: { div: HTMLDivElement }): (graph: Graph) => void => {
-  const clusterLabelDivs: HTMLDivElement[] = []
-  return function updateClusterLabels (graph: Graph): void {
-    const clusterPositions = graph.getClusterPositions()
-    const nClusters = clusterPositions.length / 2
-    if (nClusters === 0) return
-    if (clusterLabelDivs.length !== nClusters) {
-      clusterLabelDivs.forEach((div) => div.remove())
-      for (let i = 0; i < nClusters; i++) {
-        const clusterLabelDiv = document.createElement('div')
-        const contentLabel = document.createElement('p')
-        clusterLabelDiv.appendChild(contentLabel)
-        clusterLabelDiv.style.position = 'absolute'
-        clusterLabelDiv.style.pointerEvents = 'none'
-
-        contentLabel.style.fontFamily = [
-          '"Nunito Sans"',
-          '-apple-system',
-          '".SFNSText-Regular"',
-          '"San Francisco"',
-          'BlinkMacSystemFont',
-          '"Segoe UI"',
-          '"Helvetica Neue"',
-          'Helvetica',
-          'Arial',
-          'sans-serif',
-        ].join(', ')
-        contentLabel.style.fontWeight = 'bold'
-        contentLabel.style.color = 'white'
-        contentLabel.style.transform = 'translate(-50%, -100%)'
-        contentLabel.innerText = `Cluster ${i + 1}`
-
-        props.div.appendChild(clusterLabelDiv)
-        clusterLabelDivs[i] = clusterLabelDiv
-      }
-    }
-
-    for (let i = 0; i < nClusters; i++) {
-      const clusterPosition = clusterPositions.slice(i * 2, i * 2 + 2)
-      const x = clusterPosition[0]
-      const y = clusterPosition[1]
-      const clusterLabelDiv = clusterLabelDivs[i] as HTMLDivElement
-      const screenXY = graph.spaceToScreenPosition([x ?? 0, y ?? 0])
-      clusterLabelDiv.style.top = `${screenXY[1]}px`
-      clusterLabelDiv.style.left = `${screenXY[0]}px`
-    }
-  }
-}

package/src/stories/create-cosmos.ts

@@ -1,68 +0,0 @@
-import { Graph, GraphConfigInterface } from '@cosmos.gl/graph'
-
-export type CosmosStoryProps = GraphConfigInterface & {
-  pointPositions: Float32Array;
-  pointColors?: Float32Array;
-  pointSizes?: Float32Array;
-
-  links?: Float32Array;
-  linkColors?: Float32Array;
-  linkWidths?: Float32Array;
-  // linkStrength?: Float32Array;
-
-  pointClusters?: number[];
-  clusterPositions?: number[];
-  clusterStrength?: Float32Array;
-}
-
-export const createCosmos = (props: CosmosStoryProps): { div: HTMLDivElement; graph: Graph} => {
-  const div = document.createElement('div')
-  div.style.height = '100vh'
-  div.style.width = '100%'
-
-  const config: GraphConfigInterface = {
-    backgroundColor: '#2d313a',
-    pointSize: 3,
-    pointColor: '#4B5BBF',
-    pointGreyoutOpacity: 0.1,
-    scalePointsOnZoom: true,
-    linkWidth: 0.8,
-    linkColor: '#5F74C2',
-    linkArrows: false,
-    linkGreyoutOpacity: 0,
-    curvedLinks: true,
-    renderLinks: true,
-    renderHoveredPointRing: true,
-    fitViewOnInit: false,
-    hoveredPointRingColor: '#4B5BBF',
-    enableDrag: true,
-    simulationLinkDistance: 1,
-    simulationLinkSpring: 2,
-    simulationRepulsion: 0.5,
-    simulationGravity: 0.02,
-    simulationFriction: 0.7,
-    simulationDecay: 10000000,
-    attribution: 'visualized with <a href="https://cosmograph.app/" style="color: var(--cosmosgl-attribution-color);" target="_blank">Cosmograph</a>',
-    ...props,
-  }
-
-  const graph = new Graph(div, config)
-
-  graph.setPointPositions(props.pointPositions)
-  if (props.pointColors) graph.setPointColors(props.pointColors)
-  if (props.pointSizes) graph.setPointSizes(props.pointSizes)
-
-  if (props.links) graph.setLinks(props.links)
-  if (props.linkColors) graph.setLinkColors(props.linkColors)
-  if (props.linkWidths) graph.setLinkWidths(props.linkWidths)
-  // if (props.linkStrength) graph.setLinkStrength(props.linkStrength)
-
-  if (props.pointClusters) graph.setPointClusters(props.pointClusters)
-  if (props.clusterPositions) graph.setClusterPositions(props.clusterPositions)
-  if (props.clusterStrength) graph.setPointClusterStrength(props.clusterStrength)
-
-  graph.zoom(0.9)
-  graph.render()
-
-  return { div, graph }
-}

package/src/stories/create-story.ts

@@ -1,51 +0,0 @@
-import { Graph } from '@cosmos.gl/graph'
-import type { StoryObj } from '@storybook/html'
-import { CosmosStoryProps } from '@/graph/stories/create-cosmos'
-
-export type Story = StoryObj<CosmosStoryProps & { graph: Graph; destroy?: () => void }>;
-
-export const createStory: (storyFunction: () => {
-  graph: Graph;
-  div: HTMLDivElement;
-  destroy?: () => void;
-} | Promise<{
-  graph: Graph;
-  div: HTMLDivElement;
-  destroy?: () => void;
-}>) => Story = (storyFunction) => ({
-  async beforeEach (d): Promise<() => void> {
-    return (): void => {
-      d.args.destroy?.()
-      d.args.graph?.destroy()
-    }
-  },
-  render: (args): HTMLDivElement => {
-    const result = storyFunction()
-
-    if (result instanceof Promise) {
-      // For async story functions, create a simple div and update it when ready
-      const div = document.createElement('div')
-      div.style.height = '100vh'
-      div.style.width = '100%'
-      div.innerHTML = '<div style="display: flex; align-items: center; justify-content: center; height: 100%; color: #666;">Loading story...</div>'
-
-      result.then((story) => {
-        args.graph = story.graph
-        args.destroy = story.destroy
-        // Replace the content with the actual story div
-        div.innerHTML = ''
-        div.appendChild(story.div)
-      }).catch((error) => {
-        console.error('Failed to load story:', error)
-        div.innerHTML = '<div style="display: flex; align-items: center; justify-content: center; height: 100%; color: #ff0000;">Failed to load story</div>'
-      })
-
-      return div
-    } else {
-      // Synchronous story function
-      args.graph = result.graph
-      args.destroy = result.destroy
-      return result.div
-    }
-  },
-})

package/src/stories/experiments/full-mesh.ts

@@ -1,13 +0,0 @@
-import { Graph } from '@cosmos.gl/graph'
-import { createCosmos } from '../create-cosmos'
-import { generateMeshData } from '../generate-mesh-data'
-
-export const fullMesh = (): { graph: Graph; div: HTMLDivElement} => {
-  const { pointPositions, links, pointColors } = generateMeshData(40, 30, 15, 1.0)
-
-  return createCosmos({
-    pointPositions,
-    links,
-    pointColors,
-  })
-}

package/src/stories/experiments/mesh-with-holes.ts

@@ -1,13 +0,0 @@
-import { Graph } from '@cosmos.gl/graph'
-import { createCosmos } from '../create-cosmos'
-import { generateMeshData } from '../generate-mesh-data'
-
-export const meshWithHoles = (): { graph: Graph; div: HTMLDivElement} => {
-  const { pointPositions, links, pointColors } = generateMeshData(40, 80, 15, 0.8)
-
-  return createCosmos({
-    pointPositions,
-    links,
-    pointColors,
-  })
-}

package/src/stories/experiments.stories.ts

@@ -1,43 +0,0 @@
-import type { Meta } from '@storybook/html'
-
-import { createStory, Story } from '@/graph/stories/create-story'
-import { CosmosStoryProps } from './create-cosmos'
-import { meshWithHoles } from './experiments/mesh-with-holes'
-import { fullMesh } from './experiments/full-mesh'
-
-import createCosmosRaw from './create-cosmos?raw'
-import generateMeshDataRaw from './generate-mesh-data?raw'
-import meshWithHolesRaw from './experiments/mesh-with-holes?raw'
-import fullMeshRaw from './experiments/full-mesh?raw'
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-const meta: Meta<CosmosStoryProps> = {
-  title: 'Examples/Experiments',
-}
-
-const sourceCodeAddonParams = [
-  { name: 'create-cosmos', code: createCosmosRaw },
-  { name: 'generate-mesh-data', code: generateMeshDataRaw },
-]
-
-export const FullMesh: Story = {
-  ...createStory(fullMesh),
-  parameters: {
-    sourceCode: [
-      { name: 'Story', code: fullMeshRaw },
-      ...sourceCodeAddonParams,
-    ],
-  },
-}
-export const MeshWithHoles: Story = {
-  ...createStory(meshWithHoles),
-  parameters: {
-    sourceCode: [
-      { name: 'Story', code: meshWithHolesRaw },
-      ...sourceCodeAddonParams,
-    ],
-  },
-}
-
-// eslint-disable-next-line import/no-default-export
-export default meta

package/src/stories/generate-mesh-data.ts

@@ -1,125 +0,0 @@
-import { scaleLinear, scaleSequential } from 'd3-scale'
-import { interpolateWarm } from 'd3-scale-chromatic'
-import { getRgbaColor } from '@cosmos.gl/graph'
-
-function getRandom (min: number, max: number): number {
-  return Math.random() * (max - min) + min
-}
-
-function getPositionOnCircle (radius: number, angle: number, center: number): [number, number] {
-  const x = center + radius * Math.cos(angle)
-  const y = center + radius * Math.sin(angle)
-  return [x, y]
-}
-
-export type MeshData = {
-  pointPositions: Float32Array;
-  pointColors: Float32Array;
-  pointSizes: Float32Array;
-
-  links: Float32Array;
-  linkColors: Float32Array;
-  linkWidths: Float32Array;
-  // linkStrength: Float32Array;
-
-  pointClusters: number[];
-  clusterPositions: number[];
-  clusterStrength: Float32Array;
-}
-
-export function generateMeshData (
-  n: number,
-  m: number,
-  nClusters: number,
-  wholeness: number,
-  radialness = [10, 1000]
-): MeshData {
-  const pointColorScale = scaleSequential(interpolateWarm)
-  pointColorScale.domain([0, nClusters])
-  const radius = scaleLinear(radialness)
-  radius.domain([0, nClusters])
-
-  const pointPositions = new Float32Array(n * m * 2)
-  const links: number[] = []
-  const pointClusters = new Array(n * m)
-  const clusterPositions = new Array(nClusters * 2)
-  const clusterStrength = new Float32Array(n * m)
-  const pointColors = new Float32Array(n * m * 4)
-  const pointSizes = new Float32Array(n * m)
-
-  // The maximum texture size can vary between devices and WebGL versions
-  // The space size should be less than the maximum texture size to ensure better visual quality of the generated mesh.
-  const gl = document.createElement('canvas').getContext('webgl')
-  const spaceSize = (gl?.getParameter(gl.MAX_TEXTURE_SIZE) ?? 16384) / 2
-  gl?.getExtension('WEBGL_lose_context')?.loseContext()
-
-  for (let clusterIndex = 0; clusterIndex < nClusters; clusterIndex += 1) {
-    const [x, y] = getPositionOnCircle(radius(clusterIndex), 15 * Math.PI * (clusterIndex / nClusters), spaceSize / 2)
-    clusterPositions[clusterIndex * 2] = x
-    clusterPositions[clusterIndex * 2 + 1] = y
-  }
-
-  for (let pointIndex = 0; pointIndex < n * m; pointIndex += 1) {
-    const x = spaceSize * getRandom(0.495, 0.505)
-    const y = spaceSize * getRandom(0.495, 0.505)
-    pointPositions[pointIndex * 2] = x
-    pointPositions[pointIndex * 2 + 1] = y
-
-    pointClusters[pointIndex] = pointIndex % nClusters
-    clusterStrength[pointIndex] = (nClusters - (pointIndex % nClusters)) / nClusters
-    const pointColor = pointColorScale(pointIndex % nClusters)
-    const rgba = getRgbaColor(pointColor)
-    pointColors[pointIndex * 4] = rgba[0]
-    pointColors[pointIndex * 4 + 1] = rgba[1]
-    pointColors[pointIndex * 4 + 2] = rgba[2]
-    pointColors[pointIndex * 4 + 3] = rgba[3]
-
-    pointSizes[pointIndex] = getRandom(1, 5)
-
-    const nextPointIndex = pointIndex + 1
-    const bottomPointIndex = pointIndex + n
-    const pointLine = Math.floor(pointIndex / n)
-    const nextPointLine = Math.floor(nextPointIndex / n)
-    const bottomPointLine = Math.floor(bottomPointIndex / n)
-
-    if (pointLine === nextPointLine && Math.random() < wholeness) {
-      links.push(pointIndex)
-      links.push(nextPointIndex)
-    }
-
-    if (bottomPointLine < m && Math.random() < wholeness) {
-      links.push(pointIndex)
-      links.push(bottomPointIndex)
-    }
-  }
-
-  const linkColors = new Float32Array(links.length / 2 * 4)
-  const linkWidths = new Float32Array(links.length / 2)
-  // const linkStrength = new Float32Array(links.length / 2)
-  for (let i = 0; i < links.length / 2; i++) {
-    const sourcePointIndex = links[i * 2] as number
-    const rgba = getRgbaColor(pointColorScale(sourcePointIndex % nClusters))
-    linkColors[i * 4 + 0] = rgba[0]
-    linkColors[i * 4 + 1] = rgba[1]
-    linkColors[i * 4 + 2] = rgba[2]
-    linkColors[i * 4 + 3] = 0.9
-
-    linkWidths[i] = getRandom(0.4, 0.8)
-    // linkStrength[i] = (n * m - sourcePointIndex) / (n * m)
-  }
-
-  return {
-    pointPositions,
-    pointColors,
-    pointSizes,
-
-    links: new Float32Array(links),
-    linkColors,
-    linkWidths,
-    // linkStrength,
-
-    pointClusters,
-    clusterStrength,
-    clusterPositions,
-  }
-}

package/src/stories/geospatial/moscow-metro-stations/index.ts

@@ -1,62 +0,0 @@
-import { Graph } from '@cosmos.gl/graph'
-import { moscowMetroCoords } from './moscow-metro-coords'
-import { getPointColors } from './point-colors'
-import './style.css'
-
-/**
- * This example demonstrates the importance of rescaling positions by Cosmos.
- * The Moscow Metro station coordinates are are normalized (0-1 range in both dimensions).
- * By default, cosmos.gl rescales these positions to fit the canvas.
- * When disabling rescaling (`rescalePositions: false`):
- * - Points render using raw coordinates
- * - The entire graph occupies a tiny 1x1 area in WebGL's clip space (-1 to 1)
- * - This causes visual artifacts due to WebGL's floating-point precision limitations
- * - Points cluster in the center and may exhibit rendering glitches
- */
-export const moscowMetroStations = (): {graph: Graph; div: HTMLDivElement} => {
-  const div = document.createElement('div')
-  div.className = 'app'
-
-  const graphDiv = document.createElement('div')
-  graphDiv.className = 'graph'
-  div.appendChild(graphDiv)
-
-  const actionsDiv = document.createElement('div')
-  actionsDiv.className = 'actions'
-  div.appendChild(actionsDiv)
-
-  let rescalePositions = true
-
-  const graph = new Graph(graphDiv, {
-    backgroundColor: '#2d313a',
-    scalePointsOnZoom: false,
-    rescalePositions,
-    pointColor: '#FEE08B',
-    enableSimulation: false,
-    enableDrag: false,
-    fitViewOnInit: true,
-    attribution: 'visualized with <a href="https://cosmograph.app/" style="color: var(--cosmosgl-attribution-color);" target="_blank">Cosmograph</a>',
-  })
-
-  const pointColors = getPointColors(moscowMetroCoords)
-
-  graph.setPointPositions(new Float32Array(moscowMetroCoords))
-  graph.setPointColors(pointColors)
-  graph.render()
-
-  const disableEnableRescaleButton = document.createElement('div')
-  disableEnableRescaleButton.className = 'action'
-  disableEnableRescaleButton.textContent = 'Disable Rescale'
-  actionsDiv.appendChild(disableEnableRescaleButton)
-
-  disableEnableRescaleButton.addEventListener('click', () => {
-    rescalePositions = !rescalePositions
-    disableEnableRescaleButton.textContent = rescalePositions ? 'Disable Rescale' : 'Enable Rescale'
-    graph.setConfig({ rescalePositions })
-    graph.setPointPositions(new Float32Array(moscowMetroCoords))
-    graph.render()
-    graph.fitView()
-  })
-
-  return { div, graph }
-}

package/src/stories/geospatial/moscow-metro-stations/moscow-metro-coords.ts

@@ -1 +0,0 @@
-export const moscowMetroCoords = [0.6048172222222222, 0.8100822222222221, 0.6048466666666666, 0.8100211111111111, 0.6047641666666667, 0.8099794444444445, 0.6046672222222222, 0.8099377777777779, 0.6046313888888889, 0.8098894444444444, 0.6046005555555556, 0.8098627777777778, 0.6045797222222222, 0.8098277777777778, 0.6045522222222223, 0.8098094444444445, 0.6045200000000001, 0.8097761111111111, 0.6044905555555555, 0.809765, 0.6044722222222223, 0.8097288888888888, 0.6044547222222222, 0.8096961111111111, 0.6044286111111111, 0.8096422222222223, 0.604385, 0.8095927777777777, 0.6043441666666667, 0.8095738888888888, 0.6043311111111112, 0.8095016666666666, 0.6042591666666667, 0.8094033333333334, 0.6041833333333333, 0.8093172222222222, 0.6041202777777778, 0.8092427777777778, 0.6040902777777778, 0.8091438888888888, 0.6040052777777778, 0.8090722222222223, 0.6039555555555556, 0.809015, 0.603910125, 0.8088964833333334, 0.6039827833333333, 0.8088124555555556, 0.6040537, 0.8087146833333334, 0.6040783888888889, 0.8086688666666666, 0.6041465694444444, 0.8086257777777778, 0.6041172222222222, 0.8104394444444444, 0.6041011111111112, 0.8103655555555556, 0.6041002777777777, 0.8103049999999999, 0.6041297222222222, 0.8102211111111111, 0.604161111111111, 0.8101055555555556, 0.6042091666666667, 0.8100283333333334, 0.6042580555555556, 0.8100016666666666, 0.6043277777777778, 0.8099427777777778, 0.6043986111111112, 0.8098705555555555, 0.6044327777777778, 0.809833888888889, 0.6044624999999999, 0.8098038888888889, 0.6044972222222222, 0.8097655555555556, 0.6045263888888889, 0.809675, 0.6045491666666667, 0.809613888888889, 0.6046044444444445, 0.8094855555555556, 0.6046225, 0.8094166666666667, 0.6046216666666667, 0.809325, 0.6045797222222222, 0.809195, 0.604601111111111, 0.8090877777777779, 0.6046372222222222, 0.8090077777777778, 0.6047080555555555, 0.8089622222222222, 0.6047738888888889, 0.8089488888888888, 0.6048455555555555, 0.8089649999999999, 0.6049055555555556, 0.80907, 0.6037622222222222, 0.8103127777777778, 0.6037838888888889, 0.8102538888888888, 0.6038394444444445, 0.8101966666666667, 0.6038477777777778, 0.81014, 0.6038975, 0.8100211111111111, 0.6039113888888888, 0.8097594444444444, 0.6039355555555556, 0.8096711111111111, 0.6040163888888889, 0.8096150000000001, 0.604085, 0.8096088888888889, 0.6042172222222223, 0.8096455555555555, 0.6043458333333334, 0.80969, 0.6043952777777778, 0.8097077777777778, 0.6044613888888889, 0.8097344444444445, 0.6045044444444444, 0.8097588888888888, 0.6046047222222223, 0.8097644444444444, 0.6046683333333334, 0.80985, 0.6047325, 0.8098983333333334, 0.60478, 0.8099072222222222, 0.6048627777777777, 0.8099366666666666, 0.6049483333333333, 0.8099322222222223, 0.6049980555555556, 0.8099711111111112, 0.6049961111111111, 0.8100522222222222, 0.6040163888888889, 0.8096150000000001, 0.6040752777777778, 0.8096444444444444, 0.6041202777777778, 0.8096644444444444, 0.6041602777777778, 0.8096877777777778, 0.6042083333333333, 0.8097000000000001, 0.6042622222222223, 0.8096661111111112, 0.6043008333333333, 0.8096599999999999, 0.6042608333333334, 0.8097127777777777, 0.6042799999999999, 0.8097233333333334, 0.604348611111111, 0.8096866666666668, 0.6043958333333334, 0.8097155555555556, 0.6044463888888889, 0.8097322222222222, 0.6044680555555555, 0.8097361111111111, 0.6043455555555556, 0.8096922222222221, 0.6043816666666667, 0.809785, 0.6044011111111112, 0.8098688888888889, 0.6044522222222223, 0.8098883333333333, 0.6045327777777778, 0.8098877777777778, 0.6045969444444445, 0.80986, 0.6046097222222222, 0.8097611111111112, 0.6045880555555556, 0.8096766666666667, 0.6045497222222223, 0.8096211111111111, 0.6045119444444444, 0.8096061111111112, 0.6044697222222223, 0.8096094444444445, 0.6044208333333333, 0.8096427777777778, 0.6046147222222221, 0.8104844444444445, 0.6046233333333333, 0.8103855555555555, 0.6045908333333334, 0.8103066666666666, 0.6045508333333334, 0.8102494444444445, 0.6045586111111111, 0.8101172222222223, 0.6045527777777778, 0.8100488888888888, 0.604545, 0.8099644444444445, 0.6045327777777778, 0.8098955555555556, 0.6045330555555556, 0.8098516666666667, 0.6045483333333334, 0.8098116666666666, 0.6045369444444444, 0.8097516666666666, 0.6045205555555555, 0.8096733333333332, 0.6044755555555555, 0.8096144444444445, 0.6044674999999999, 0.8095544444444444, 0.6044058333333333, 0.8094872222222221, 0.6043702777777779, 0.8093761111111112, 0.6043408333333333, 0.8093222222222222, 0.6043177777777777, 0.8092788888888889, 0.6042791666666667, 0.8092061111111112, 0.6042380555555555, 0.8091266666666667, 0.6042188888888889, 0.8090738888888889, 0.6041894444444444, 0.808995, 0.6042591666666667, 0.8089238888888889, 0.6043169444444445, 0.8088944444444445, 0.60399, 0.8103372222222223, 0.6039988888888889, 0.8102805555555557, 0.6039911111111111, 0.8101483333333335, 0.6039866666666667, 0.810101111111111, 0.6040669444444444, 0.8100477777777778, 0.6041486111111111, 0.8099638888888888, 0.60422, 0.809875, 0.6042966666666666, 0.8098544444444444, 0.6043369444444445, 0.8098055555555554, 0.6043875, 0.8097844444444444, 0.6044663888888889, 0.8098055555555554, 0.6045163888888889, 0.8097811111111112, 0.6045369444444444, 0.8097516666666666, 0.6045894444444444, 0.8096677777777779, 0.6046275, 0.8096216666666667, 0.6046858333333334, 0.809585, 0.6048100000000001, 0.8094933333333333, 0.6049044444444445, 0.8094755555555556, 0.6049813888888889, 0.8095388888888888, 0.6050502777777779, 0.8095311111111111, 0.6051458333333333, 0.8094516666666667, 0.6051563888888889, 0.8093638888888889, 0.6051616666666667, 0.8093016666666668, 0.6037075, 0.8090772222222221, 0.6037644444444444, 0.8091088888888889, 0.6038058333333334, 0.8091533333333334, 0.6038636111111111, 0.8091627777777777, 0.6039366666666667, 0.8092194444444445, 0.6040252777777777, 0.8092827777777779, 0.6041202777777778, 0.8093866666666666, 0.6041622222222223, 0.8094305555555555, 0.60421, 0.8094827777777778, 0.6041583333333334, 0.8095811111111112, 0.6042172222222223, 0.8096455555555555, 0.6042552777777778, 0.8097083333333334, 0.6045205555555555, 0.8096733333333332, 0.6045952777777778, 0.8096727777777779, 0.6046733333333333, 0.8097066666666666, 0.6047752777777777, 0.8097355555555555, 0.6048611111111111, 0.8097644444444444, 0.6049627777777777, 0.8097283333333334, 0.6050461111111111, 0.8097316666666666, 0.6051772222222223, 0.809695, 0.6044083333333333, 0.8105444444444444, 0.6044538888888888, 0.8104655555555556, 0.6044575, 0.8103516666666667, 0.6044163888888889, 0.8102627777777778, 0.6043736111111111, 0.8101950000000001, 0.6043791666666667, 0.8100977777777778, 0.6043936111111111, 0.8100383333333332, 0.6044125, 0.8099594444444445, 0.6044475, 0.8098944444444445, 0.6044963888888889, 0.8098377777777779, 0.6044713888888888, 0.8098022222222222, 0.6044644444444445, 0.8097283333333334, 0.6044944444444444, 0.809655, 0.6045127777777778, 0.8096000000000001, 0.6045080555555556, 0.8094927777777777, 0.6045066666666666, 0.80935, 0.6044733333333333, 0.8092911111111112, 0.6044597222222222, 0.8092372222222223, 0.60444, 0.80918, 0.6044630555555556, 0.8091138888888889, 0.6044694444444445, 0.8090133333333334, 0.6044566666666666, 0.8089577777777778, 0.6044455555555556, 0.8088605555555556, 0.604435, 0.8087933333333333, 0.6043802777777778, 0.8087183333333333, 0.604300925, 0.8103611111111112, 0.6043364194444444, 0.8103101833333333, 0.6043729166666667, 0.8102555555555556, 0.6043736111111111, 0.8101950000000001, 0.6044113888888889, 0.8101266666666667, 0.6044522222222223, 0.8100738888888889, 0.6044894444444444, 0.8099744444444444, 0.6044863888888888, 0.8098977777777777, 0.6045, 0.8098266666666667, 0.6045533333333334, 0.8098155555555555, 0.604603611111111, 0.8097583333333335, 0.6046719444444444, 0.8097016666666667, 0.6046313888888889, 0.8096283333333334, 0.6046555555555555, 0.8095477777777779, 0.6046808333333333, 0.8094855555555556, 0.6047972222222222, 0.8094077777777777, 0.6048694444444445, 0.8093938888888889, 0.6048938888888888, 0.8093100000000001, 0.6048625, 0.8092205555555555, 0.6048419444444444, 0.8091666666666667, 0.6048433333333334, 0.8090744444444444, 0.6048436111111111, 0.8090061111111112, 0.6048480555555555, 0.8089577777777778, 0.6046638888888889, 0.8099461111111111, 0.6047305916666667, 0.8098905111111111, 0.6047409638888889, 0.8098040999999999, 0.6047754138888889, 0.8097426111111111, 0.6048057666666666, 0.8096208222222223, 0.6048011111111111, 0.8094833333333333, 0.6047972222222222, 0.8094111111111112, 0.604736111111111, 0.8093583333333334, 0.6046794444444444, 0.8093083333333333, 0.6045797222222222, 0.809195, 0.6044983333333332, 0.809185, 0.6044397222222222, 0.8091833333333333, 0.6043669444444445, 0.8092016666666666, 0.6042775, 0.809215, 0.6042272222222221, 0.8092783333333333, 0.6041805555555555, 0.809321111111111, 0.6041252777777777, 0.80938, 0.6040672222222222, 0.809428888888889, 0.6040325000000001, 0.8095294444444445, 0.6040158333333333, 0.8096133333333333, 0.6040572222222222, 0.8097177777777778, 0.6040855555555555, 0.8097694444444444, 0.6041233333333333, 0.8098544444444444, 0.6042552777777778, 0.8097083333333334, 0.6042388888888889, 0.8097594444444444, 0.6042241666666667, 0.8098711111111112, 0.6042591666666667, 0.8099255555555556, 0.6043252777777778, 0.8099544444444444, 0.6044111111111111, 0.8099644444444445, 0.6043227777777778, 0.8088911111111111, 0.6043802777777778, 0.8087894444444444, 0.6043797222222222, 0.8087166666666668, 0.6043183333333333, 0.8086005555555555, 0.6042861111111111, 0.8085861111111111, 0.6042522222222222, 0.8085655555555555, 0.6042105555555556, 0.8085444444444445, 0.6043858333333334, 0.8101055555555556, 0.6044197222222222, 0.8101211111111111, 0.6044691666666667, 0.8101211111111111, 0.6045191666666667, 0.8101211111111111, 0.6045508333333334, 0.8101333333333334, 0.6045691666666667, 0.8101622222222223, 0.6043594444444444, 0.8102622222222221, 0.6044250000000001, 0.8102644444444445, 0.6045591666666666, 0.8102555555555556, 0.6046258333333333, 0.8102222222222223, 0.604723888888889, 0.8101666666666666, 0.6048247222222222, 0.8100955555555557, 0.60485, 0.8100216666666666, 0.604841111111111, 0.8099366666666666, 0.6048475, 0.8098411111111111, 0.6048508333333333, 0.8097722222222223, 0.6048177777777778, 0.8096727777777779, 0.6048005555555556, 0.8096233333333334, 0.6047669444444443, 0.8095772222222223, 0.6047161111111111, 0.8095461111111111, 0.6047161111111111, 0.8095461111111111, 0.6046197222222222, 0.8094794444444444, 0.6045786111111111, 0.8094350000000001, 0.6044969444444445, 0.8093888888888888, 0.6044583333333333, 0.8093888888888888, 0.604405, 0.8094827777777778, 0.6043419444444444, 0.8095572222222223, 0.6042591666666667, 0.8096711111111111, 0.6042561111111111, 0.8097066666666666, 0.6042377777777778, 0.8097638888888888, 0.6041866666666666, 0.8098733333333333, 0.6041791666666667, 0.8099322222222223, 0.6041633333333334, 0.809995, 0.6041302777777777, 0.8100755555555555, 0.6041558333333333, 0.8101433333333334, 0.6042230555555556, 0.8102205555555555, 0.6043091666666667, 0.8102622222222221, 0.6048057666666666, 0.8096208222222223, 0.6048941666666666, 0.8095833333333333, 0.6049491666666666, 0.8095477777777779, 0.6050528055555555, 0.8094720555555556, 0.6051419444444445, 0.8094627777777779, 0.60522, 0.8095, 0.6052788888888888, 0.8094916666666667, 0.6053511111111111, 0.8094644444444444]

package/src/stories/geospatial/moscow-metro-stations/point-colors.ts

@@ -1,46 +0,0 @@
-import { scaleSequential } from 'd3-scale'
-import { interpolateWarm } from 'd3-scale-chromatic'
-import { getRgbaColor } from '@cosmos.gl/graph'
-
-export const getPointColors = (pointPositions: number[]): Float32Array => {
-  const pointColorScale = scaleSequential(interpolateWarm)
-  const numPoints = pointPositions.length / 2
-
-  // Calculate center coordinates
-  let centerX = 0
-  let centerY = 0
-  for (let i = 0, idx = 0; i < numPoints; i++, idx += 2) {
-    centerX += pointPositions[idx] as number
-    centerY += pointPositions[idx + 1] as number
-  }
-  centerX /= numPoints
-  centerY /= numPoints
-
-  // Find maximum distance from center (using squared distance for optimization)
-  let maxDistanceSquared = 0
-  for (let i = 0, idx = 0; i < numPoints; i++, idx += 2) {
-    const dx = (pointPositions[idx] as number) - centerX
-    const dy = (pointPositions[idx + 1] as number) - centerY
-    const distanceSquared = dx * dx + dy * dy
-    if (distanceSquared > maxDistanceSquared) maxDistanceSquared = distanceSquared
-  }
-
-  pointColorScale.domain([0, Math.sqrt(maxDistanceSquared)])
-
-  // Calculate colors
-  const pointColors = new Float32Array(numPoints * 4)
-  for (let i = 0, posIdx = 0, colorIdx = 0; i < numPoints; i++, posIdx += 2, colorIdx += 4) {
-    const dx = (pointPositions[posIdx] as number) - centerX
-    const dy = (pointPositions[posIdx + 1] as number) - centerY
-    const distance = Math.sqrt(dx * dx + dy * dy)
-    const pointColor = pointColorScale(distance)
-    const rgba = getRgbaColor(pointColor)
-
-    pointColors[colorIdx] = rgba[0]
-    pointColors[colorIdx + 1] = rgba[1]
-    pointColors[colorIdx + 2] = rgba[2]
-    pointColors[colorIdx + 3] = rgba[3]
-  }
-
-  return pointColors
-}