51 - open-alc-map

  • Upgrade to Svelte v4
  • Move data to yaml format
    • Read file in raw format import data from "./file.yaml?raw"
    • Use yaml package to parse parse(data)
  • Change logo to circle
    • Use svg mask
    x={node.x - 20}
    y={node.y - 20}

<mask id="image-mask" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
    <circle cx="0.5" cy="0.5" r="0.5" fill="white" />
  • Show data on click
    • Use <dialog> HTML tag
    • Handle clicking outside the dialog to close, however got Typescript error on implementation
    • Declare custom attribute typing in a separate .d.ts file ref.
declare namespace svelteHTML {
	interface HTMLAttributes<T> {
		'on:outclick'?: () => void;
  • Add more entries

As there are more entries, will have to adjust D3 force simulation to make them distribute more evenly