Skip to content

Commit

Permalink
Add attribution
Browse files Browse the repository at this point in the history 
visualized by Csmograph.app
  • Loading branch information
@Stukova @rokotyan
Stukova authored and rokotyan committed Dec 20, 2024
1 parent 1d9c211 commit ac20e20
Show file tree
Hide file tree
Showing 3 changed files with 37 additions and 15 deletions.
1 change: 1 addition & 0 deletions src/attribution.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export const attributionSvg = '<svg fill="currentColor" height="11" viewBox="0 0 163 11" width="163" xmlns="http://www.w3.org/2000/svg"><g fill="currentColor"><path d="m2.45674 8-1.925002-5.379h.924002l1.617 4.73h.154l1.617-4.73h.924l-1.925 5.379z"/><path d="m7.02243 8v-5.379h.869v5.379zm.44-6.215c-.19067 0-.352-.06233-.484-.187-.12467-.12467-.187-.28233-.187-.473 0-.198.06233-.359333.187-.484.132-.124667.29333-.187.484-.187.19066 0 .34833.062333.473.187.12466.124667.187.286.187.484 0 .19067-.06234.34833-.187.473-.12467.12467-.28234.187-.473.187z"/><path d="m11.8857 8.154c-.6673 0-1.232-.154-1.694-.462-.45465-.308-.72965-.79567-.82499-1.463l.82499-.187c.0587.352.1687.63067.33.836.1613.198.3593.341.594.429.242.08067.4987.121.77.121.4033 0 .7223-.08067.957-.242s.352-.37767.352-.649c0-.27867-.1137-.473-.341-.583-.22-.11733-.5243-.21267-.913-.286l-.451-.077c-.3447-.05867-.66-.15033-.946-.275s-.5133-.29333-.68199-.506c-.16866-.21267-.25299-.48033-.25299-.803 0-.484.18699-.86167.56098-1.133.374-.27133.869-.407 1.485-.407.6087 0 1.1.13933 1.474.418.3813.27133.627.65633.737 1.155l-.814.209c-.066-.38867-.2237-.66-.473-.814-.2493-.16133-.5573-.242-.924-.242s-.6563.06967-.869.209c-.2127.132-.319.33-.319.594 0 .25667.099.44733.297.572.2053.11733.4767.20533.814.264l.451.077c.3813.066.7223.15767 1.023.275.308.11.55.27133.726.484.1833.21267.275.49133.275.836 0 .528-.198.935-.594 1.221-.3887.286-.913.429-1.573.429z"/><path d="m17.5765 8.099c-.3887 0-.748-.08433-1.078-.253-.3227-.16867-.5793-.418-.77-.748-.1833-.33733-.275-.74433-.275-1.221v-3.256h.869v3.19c0 .53533.132.924.396 1.166.2713.242.6343.363 1.089.363.5133 0 .935-.16867 1.265-.506s.495-.83967.495-1.507v-2.706h.869v5.379h-.847v-.913h-.154c-.1173.25667-.319.49133-.605.704-.286.20533-.704.308-1.254.308z"/><path d="m23.9048 8.154c-.374 0-.715-.066-1.023-.198s-.55-.32267-.726-.572-.264-.55367-.264-.913c0-.36667.088-.66733.264-.902.176-.242.418-.42167.726-.539.308-.12467.6527-.187 1.034-.187h1.815v-.396c0-.38133-.1136-.682-.341-.902-.22-.22-.55-.33-.99-.33-.4326 0-.77.10633-1.012.319-.242.20533-.407.484-.495.836l-.814-.264c.088-.30067.2274-.572.418-.814.1907-.24933.4437-.44733.759-.594.3227-.154.7077-.231 1.155-.231.6894 0 1.2247.17967 1.606.539.3814.352.572.85067.572 1.496v2.431c0 .22.1027.33.308.33h.495v.737h-.759c-.242 0-.4363-.066-.583-.198-.1466-.13933-.22-.32267-.22-.55v-.055h-.132c-.0806.13933-.1906.286-.33.44-.132.14667-.3153.26767-.55.363-.2346.10267-.539.154-.913.154zm.099-.748c.5134 0 .9277-.15033 1.243-.451.3227-.308.484-.737.484-1.287v-.121h-1.782c-.3446 0-.6306.077-.858.231-.22.14667-.33.37033-.33.671s.1137.53533.341.704c.2347.16867.5354.253.902.253z"/><path d="m28.582 8v-7.7h.869v7.7z"/><path d="m31.2783 8v-5.379h.869v5.379zm.44-6.215c-.1907 0-.352-.06233-.484-.187-.1247-.12467-.187-.28233-.187-.473 0-.198.0623-.359333.187-.484.132-.124667.2933-.187.484-.187s.3483.062333.473.187.187.286.187.484c0 .19067-.0623.34833-.187.473s-.2823.187-.473.187z"/><path d="m33.7326 8v-1.122l3.421-3.377v-.121h-3.311v-.759h4.224v1.122l-3.432 3.377v.132h3.52v.748z"/><path d="m41.9601 8.154c-.5427 0-1.0194-.11367-1.43-.341-.4107-.23467-.7297-.561-.957-.979-.2274-.418-.341-.902-.341-1.452v-.132c0-.55733.1136-1.045.341-1.463.2273-.418.5426-.74067.946-.968.4033-.23467.8653-.352 1.386-.352.506 0 .9533.11 1.342.33.3886.21267.693.52067.913.924s.33.87633.33 1.419v.396h-4.389c.022.57933.209 1.034.561 1.364.352.32267.792.484 1.32.484.462 0 .8176-.10633 1.067-.319.2493-.21267.44-.46567.572-.759l.748.363c-.11.22733-.264.45467-.462.682-.1907.22733-.4437.418-.759.572-.308.154-.704.231-1.188.231zm-1.848-3.333h3.498c-.0294-.49867-.2017-.88733-.517-1.166-.308-.27867-.704-.418-1.188-.418-.4914 0-.8947.13933-1.21.418-.3154.27867-.5097.66733-.583 1.166z"/><path d="m48.2828 8.154c-.462 0-.8873-.11-1.276-.33-.3886-.22-.6966-.539-.924-.957-.2273-.418-.341-.913-.341-1.485v-.143c0-.572.1137-1.06333.341-1.474.2274-.418.5317-.737.913-.957.3887-.22733.8177-.341 1.287-.341.374 0 .6894.05133.946.154.264.09533.4767.22.638.374.1614.14667.286.30433.374.473h.154v-3.168h.869v7.7h-.847v-.891h-.154c-.1466.27133-.374.51333-.682.726s-.7406.319-1.298.319zm.231-.77c.5574 0 1.0084-.176 1.353-.528.352-.35933.528-.858.528-1.496v-.099c0-.638-.176-1.133-.528-1.485-.3446-.35933-.7956-.539-1.353-.539-.55 0-1.0046.17967-1.364.539-.352.352-.528.847-.528 1.485v.099c0 .638.176 1.13667.528 1.496.3594.352.814.528 1.364.528z"/><path d="m58.8911 8.154c-.5573 0-.9936-.10633-1.309-.319-.308-.21267-.5316-.45467-.671-.726h-.154v.891h-.847v-7.7h.869v3.168h.154c.088-.16867.2127-.32633.374-.473.1614-.154.3704-.27867.627-.374.264-.10267.583-.154.957-.154.4694 0 .8947.11367 1.276.341.3887.22.6967.539.924.957.2274.41067.341.902.341 1.474v.143c0 .572-.1173 1.067-.352 1.485-.2273.418-.5353.737-.924.957-.3813.22-.803.33-1.265.33zm-.231-.77c.5574 0 1.0084-.176 1.353-.528.352-.35933.528-.858.528-1.496v-.099c0-.638-.176-1.133-.528-1.485-.3446-.35933-.7956-.539-1.353-.539-.55 0-1.0046.17967-1.364.539-.352.352-.528.847-.528 1.485v.099c0 .638.176 1.13667.528 1.496.3594.352.814.528 1.364.528z"/><path d="m63.6382 10.2v-.77h3.08c.2127 0 .319-.11.319-.33v-1.958h-.154c-.0733.154-.187.308-.341.462-.1466.14667-.341.26767-.583.363-.242.088-.5463.132-.913.132-.3886 0-.748-.08433-1.078-.253-.3226-.16867-.5793-.418-.77-.748-.1833-.33-.275-.73333-.275-1.21v-3.267h.869v3.201c0 .528.132.913.396 1.155.2714.242.6344.363 1.089.363.5134 0 .935-.16867 1.265-.506s.495-.83967.495-1.507v-2.706h.869v6.633c0 .29333-.0843.52433-.253.693-.1613.1687-.3996.253-.715.253z"/><path d="m75.2998 8.154c-.9167 0-1.6464-.264-2.189-.792-.5427-.53533-.814-1.31267-.814-2.332v-1.76c0-1.01933.2713-1.793.814-2.321.5426-.535333 1.2723-.803 2.189-.803.9093 0 1.606.253 2.09.759.4913.506.737 1.199.737 2.079v.055h-.913v-.088c0-.57933-.1577-1.05233-.473-1.419-.308-.374-.7884-.561-1.441-.561-.6527 0-1.1624.20167-1.529.605-.3667.396-.55.95333-.55 1.672v1.804c0 .71867.1833 1.27967.55 1.683.3666.396.8763.594 1.529.594.6526 0 1.133-.18333 1.441-.55.3153-.374.473-.85067.473-1.43v-.176h.913v.143c0 .88-.2457 1.573-.737 2.079-.484.506-1.1807.759-2.09.759z"/><path d="m82.0934 8.154c-.5427 0-1.023-.11367-1.441-.341-.4107-.22733-.7333-.54633-.968-.957-.2273-.418-.341-.90933-.341-1.474v-.143c0-.55733.1137-1.045.341-1.463.2347-.418.5573-.74067.968-.968.418-.22733.8983-.341 1.441-.341s1.0193.11367 1.43.341c.418.22733.7407.55.968.968.2347.418.352.90567.352 1.463v.143c0 .56467-.1173 1.056-.352 1.474-.2273.41067-.55.72967-.968.957-.4107.22733-.8873.341-1.43.341zm0-.781c.572 0 1.0267-.17967 1.364-.539.3447-.36667.517-.858.517-1.474v-.099c0-.616-.1723-1.10367-.517-1.463-.3373-.36667-.792-.55-1.364-.55-.5647 0-1.0193.18333-1.364.55-.3447.35933-.517.847-.517 1.463v.099c0 .616.1723 1.10733.517 1.474.3447.35933.7993.539 1.364.539z"/><path d="m88.5742 8.154c-.6673 0-1.232-.154-1.694-.462-.4547-.308-.7297-.79567-.825-1.463l.825-.187c.0587.352.1687.63067.33.836.1613.198.3593.341.594.429.242.08067.4987.121.77.121.4033 0 .7223-.08067.957-.242s.352-.37767.352-.649c0-.27867-.1137-.473-.341-.583-.22-.11733-.5243-.21267-.913-.286l-.451-.077c-.3447-.05867-.66-.15033-.946-.275s-.5133-.29333-.682-.506-.253-.48033-.253-.803c0-.484.187-.86167.561-1.133s.869-.407 1.485-.407c.6087 0 1.1.13933 1.474.418.3813.27133.627.65633.737 1.155l-.814.209c-.066-.38867-.2237-.66-.473-.814-.2493-.16133-.5573-.242-.924-.242s-.6563.06967-.869.209c-.2127.132-.319.33-.319.594 0 .25667.099.44733.297.572.2053.11733.4767.20533.814.264l.451.077c.3813.066.7223.15767 1.023.275.308.11.55.27133.726.484.1833.21267.275.49133.275.836 0 .528-.198.935-.594 1.221-.3887.286-.913.429-1.573.429z"/><path d="m92.208 8v-5.379h.847v.671h.154c.1026-.19067.2713-.36667.506-.528.2346-.16133.5646-.242.99-.242.418 0 .7553.09167 1.012.275.264.18333.4546.407.572.671h.154c.1246-.264.3116-.48767.561-.671.2566-.18333.6123-.275 1.067-.275.3593 0 .6746.07333.946.22.2713.14667.484.35933.638.638.1613.27133.242.59767.242.979v3.641h-.869v-3.564c0-.35933-.1064-.64167-.319-.847-.2054-.21267-.495-.319-.869-.319-.396 0-.7224.12833-.979.385-.2494.25667-.374.627-.374 1.111v3.234h-.869v-3.564c0-.35933-.1064-.64167-.319-.847-.2054-.21267-.495-.319-.869-.319-.396 0-.7224.12833-.979.385-.2494.25667-.374.627-.374 1.111v3.234z"/><path d="m104.158 8.154c-.543 0-1.023-.11367-1.441-.341-.411-.22733-.733-.54633-.968-.957-.227-.418-.341-.90933-.341-1.474v-.143c0-.55733.114-1.045.341-1.463.235-.418.557-.74067.968-.968.418-.22733.898-.341 1.441-.341s1.019.11367 1.43.341c.418.22733.741.55.968.968.235.418.352.90567.352 1.463v.143c0 .56467-.117 1.056-.352 1.474-.227.41067-.55.72967-.968.957-.411.22733-.887.341-1.43.341zm0-.781c.572 0 1.027-.17967 1.364-.539.345-.36667.517-.858.517-1.474v-.099c0-.616-.172-1.10367-.517-1.463-.337-.36667-.792-.55-1.364-.55-.565 0-1.019.18333-1.364.55-.345.35933-.517.847-.517 1.463v.099c0 .616.172 1.10733.517 1.474.345.35933.799.539 1.364.539z"/><path d="m108.208 5.338v-.154c0-.56467.113-1.04867.341-1.452.227-.40333.535-.715.924-.935.388-.22.814-.33 1.276-.33.564 0 .997.11 1.298.33.308.21267.535.451.682.715h.154v-.891h.825v6.633c0 .29333-.081.52433-.242.693-.162.1687-.396.253-.704.253h-3.652v-.77h3.421c.22 0 .33-.11.33-.33v-2.046h-.154c-.088.16133-.213.319-.374.473-.162.154-.371.28233-.627.385-.257.09533-.576.143-.957.143-.462 0-.888-.11-1.276-.33-.389-.22-.697-.53167-.924-.935-.228-.41067-.341-.89467-.341-1.452zm2.772 1.947c.557 0 1.008-.176 1.353-.528.352-.352.528-.836.528-1.452v-.088c0-.62333-.176-1.10733-.528-1.452-.345-.352-.796-.528-1.353-.528-.55 0-1.005.176-1.364.528-.352.34467-.528.82867-.528 1.452v.088c0 .616.176 1.1.528 1.452.359.352.814.528 1.364.528z"/><path d="m115.529 8v-5.379h.847v.66h.154c.096-.23467.242-.407.44-.517s.459-.165.781-.165h.638v.792h-.693c-.388 0-.704.11-.946.33-.234.21267-.352.54633-.352 1.001v3.278z"/><path d="m121.143 8.154c-.374 0-.715-.066-1.023-.198s-.55-.32267-.726-.572-.264-.55367-.264-.913c0-.36667.088-.66733.264-.902.176-.242.418-.42167.726-.539.308-.12467.653-.187 1.034-.187h1.815v-.396c0-.38133-.114-.682-.341-.902-.22-.22-.55-.33-.99-.33-.433 0-.77.10633-1.012.319-.242.20533-.407.484-.495.836l-.814-.264c.088-.30067.227-.572.418-.814.191-.24933.444-.44733.759-.594.323-.154.708-.231 1.155-.231.689 0 1.225.17967 1.606.539.381.352.572.85067.572 1.496v2.431c0 .22.103.33.308.33h.495v.737h-.759c-.242 0-.436-.066-.583-.198-.147-.13933-.22-.32267-.22-.55v-.055h-.132c-.081.13933-.191.286-.33.44-.132.14667-.315.26767-.55.363-.235.10267-.539.154-.913.154zm.099-.748c.513 0 .928-.15033 1.243-.451.323-.308.484-.737.484-1.287v-.121h-1.782c-.345 0-.631.077-.858.231-.22.14667-.33.37033-.33.671s.114.53533.341.704c.235.16867.535.253.902.253z"/><path d="m125.82 10.2v-7.579h.847v.891h.154c.14-.27133.363-.51333.671-.726.316-.21267.752-.319 1.309-.319.462 0 .884.11367 1.265.341.389.22.697.53533.924.946.235.41067.352.90567.352 1.485v.143c0 .572-.113 1.067-.341 1.485-.227.418-.535.737-.924.957-.381.22-.806.33-1.276.33-.374 0-.693-.05133-.957-.154-.256-.09533-.465-.22-.627-.374-.161-.154-.286-.31167-.374-.473h-.154v3.047zm2.75-2.816c.558 0 1.009-.176 1.353-.528.352-.35933.528-.858.528-1.496v-.099c0-.638-.176-1.133-.528-1.485-.344-.35933-.795-.539-1.353-.539-.55 0-1.004.17967-1.364.539-.352.352-.528.847-.528 1.485v.099c0 .638.176 1.13667.528 1.496.36.352.814.528 1.364.528z"/><path d="m132.899 8v-7.7h.869v3.179h.154c.074-.16133.184-.31167.33-.451.154-.14667.349-.26767.583-.363.242-.09533.547-.143.913-.143.404 0 .763.088 1.078.264.323.16867.58.418.77.748.191.32267.286.726.286 1.21v3.256h-.869v-3.19c0-.53533-.135-.924-.407-1.166-.264-.242-.623-.363-1.078-.363-.52 0-.946.16867-1.276.506-.322.33733-.484.83967-.484 1.507v2.706z"/><path d="m140.118 8.154c-.212 0-.392-.06967-.539-.209-.139-.13933-.209-.319-.209-.539s.07-.39967.209-.539c.147-.13933.327-.209.539-.209.22 0 .4.06967.539.209.14.13933.209.319.209.539s-.069.39967-.209.539c-.139.13933-.319.209-.539.209z"/><path d="m144.078 8.154c-.374 0-.715-.066-1.023-.198s-.55-.32267-.726-.572-.264-.55367-.264-.913c0-.36667.088-.66733.264-.902.176-.242.418-.42167.726-.539.308-.12467.652-.187 1.034-.187h1.815v-.396c0-.38133-.114-.682-.341-.902-.22-.22-.55-.33-.99-.33-.433 0-.77.10633-1.012.319-.242.20533-.407.484-.495.836l-.814-.264c.088-.30067.227-.572.418-.814.19-.24933.443-.44733.759-.594.322-.154.707-.231 1.155-.231.689 0 1.224.17967 1.606.539.381.352.572.85067.572 1.496v2.431c0 .22.102.33.308.33h.495v.737h-.759c-.242 0-.437-.066-.583-.198-.147-.13933-.22-.32267-.22-.55v-.055h-.132c-.081.13933-.191.286-.33.44-.132.14667-.316.26767-.55.363-.235.10267-.539.154-.913.154zm.099-.748c.513 0 .927-.15033 1.243-.451.322-.308.484-.737.484-1.287v-.121h-1.782c-.345 0-.631.077-.858.231-.22.14667-.33.37033-.33.671s.113.53533.341.704c.234.16867.535.253.902.253z"/><path d="m148.755 10.2v-7.579h.847v.891h.154c.139-.27133.363-.51333.671-.726.315-.21267.752-.319 1.309-.319.462 0 .884.11367 1.265.341.389.22.697.53533.924.946.235.41067.352.90567.352 1.485v.143c0 .572-.114 1.067-.341 1.485s-.535.737-.924.957c-.381.22-.807.33-1.276.33-.374 0-.693-.05133-.957-.154-.257-.09533-.466-.22-.627-.374s-.286-.31167-.374-.473h-.154v3.047zm2.75-2.816c.557 0 1.008-.176 1.353-.528.352-.35933.528-.858.528-1.496v-.099c0-.638-.176-1.133-.528-1.485-.345-.35933-.796-.539-1.353-.539-.55 0-1.005.17967-1.364.539-.352.352-.528.847-.528 1.485v.099c0 .638.176 1.13667.528 1.496.359.352.814.528 1.364.528z"/><path d="m155.834 10.2v-7.579h.847v.891h.154c.139-.27133.363-.51333.671-.726.315-.21267.752-.319 1.309-.319.462 0 .884.11367 1.265.341.389.22.697.53533.924.946.235.41067.352.90567.352 1.485v.143c0 .572-.114 1.067-.341 1.485s-.535.737-.924.957c-.381.22-.807.33-1.276.33-.374 0-.693-.05133-.957-.154-.257-.09533-.466-.22-.627-.374s-.286-.31167-.374-.473h-.154v3.047zm2.75-2.816c.557 0 1.008-.176 1.353-.528.352-.35933.528-.858.528-1.496v-.099c0-.638-.176-1.133-.528-1.485-.345-.35933-.796-.539-1.353-.539-.55 0-1.005.17967-1.364.539-.352.352-.528.847-.528 1.485v.099c0 .638.176 1.13667.528 1.496.359.352.814.528 1.364.528z"/><path d="m71.6368 9.375h90.3682v.55h-90.3682z"/></g></svg>'
41 changes: 31 additions & 10 deletions src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,11 +21,14 @@ import { Store, ALPHA_MIN, MAX_POINT_SIZE, type Hovered } from '@/graph/modules/
import { Zoom } from '@/graph/modules/Zoom'
import { Drag } from '@/graph/modules/Drag'
import { defaultConfigValues, defaultScaleToZoom } from '@/graph/variables'
import { attributionSvg } from '@/graph/attribution'

export class Graph {
public config = new GraphConfig()
public graph = new GraphData(this.config)
private div: HTMLDivElement
private canvas: HTMLCanvasElement
private attributionDivElement: HTMLElement | undefined
private canvasD3Selection: Selection<HTMLCanvasElement, undefined, null, undefined>
private reglInstance: regl.Regl
private requestAnimationFrameId = 0
Expand Down Expand Up @@ -73,25 +76,23 @@ export class Graph {
private _hasClusterPositionsChanged = false
private _hasPointClusterForceChanged = false

public constructor (canvas: HTMLCanvasElement, config?: GraphConfigInterface) {
public constructor (div: HTMLDivElement, config?: GraphConfigInterface) {
if (config) this.config.init(config)

this.div = div
const canvas = document.createElement('canvas')
canvas.style.width = '100%'
canvas.style.height = '100%'
this.div.appendChild(canvas)
this.addAttribution()
const w = canvas.clientWidth
const h = canvas.clientHeight

canvas.width = w * this.config.pixelRatio
canvas.height = h * this.config.pixelRatio
// If the canvas element has no CSS width and height style, the clientWidth and the clientHeight will always
// be equal to the width and height canvas attribute.
// In order to prevent resize problem assume that canvas CSS style width and height has a value of 100%.
if (canvas.style.width === '' && canvas.style.height === '') {
select(canvas)
.style('width', '100%')
.style('height', '100%')
}

this.canvas = canvas
this.canvasD3Selection = select<HTMLCanvasElement, undefined>(canvas)
this.canvasD3Selection = select<HTMLCanvasElement, undefined>(this.canvas)
this.canvasD3Selection
.on('mouseenter.cosmos', () => { this._isMouseOnCanvas = true })
.on('mousemove.cosmos', () => { this._isMouseOnCanvas = true })
Expand Down Expand Up @@ -1103,6 +1104,26 @@ export class Graph {
else select(this.canvas).style('cursor', 'grab')
} else select(this.canvas).style('cursor', null)
}

private addAttribution (): void {
document.documentElement.style.setProperty('--cosmos-attribution-color', 'white')
this.attributionDivElement = document.createElement('div')
this.attributionDivElement.style.cssText = `
cursor: pointer;
user-select: none;
position: absolute;
margin: 0 0.6rem 0.6rem 0;
line-height: 0;
bottom: 0;
right: 0;
color: var(--cosmos-attribution-color);
`
this.attributionDivElement.onclick = (): void => window.open('https://cosmograph.app/', '_blank')?.focus()
const svgParser = new DOMParser()
const svgElement = svgParser.parseFromString(attributionSvg, 'image/svg+xml').firstChild as SVGElement
this.attributionDivElement.appendChild(svgElement)
this.div.appendChild(this.attributionDivElement)
}
}

export type { GraphConfigInterface } from './config'
10 changes: 5 additions & 5 deletions src/stories/cosmos.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,10 @@ export type CosmosStoryProps = GraphConfigInterface & {

export const createCosmos = (props: CosmosStoryProps): HTMLDivElement => {
const div = document.createElement('div')
const canvas = document.createElement('canvas')
canvas.style.height = '100vh'
canvas.style.width = '100%'
div.appendChild(canvas)
// const canvas = document.createElement('canvas')
div.style.height = '100vh'
div.style.width = '100%'
// div.appendChild(canvas)

const config: GraphConfigInterface = {
backgroundColor: '#212C42',
Expand Down Expand Up @@ -50,7 +50,7 @@ export const createCosmos = (props: CosmosStoryProps): HTMLDivElement => {

// If we initialize the graph before the canvas is added to the DOM, nothing happens
requestAnimationFrame(() => {
const graph = new Graph(canvas, config)
const graph = new Graph(div, config)

graph.setPointPositions(props.pointPositions)
graph.setPointColors(props.pointColors)
Expand Down

0 comments on commit ac20e20

Please sign in to comment.