(Svelte) Graph not rendering

New To Observable
1

Hi all,

I’ve managed to produce the following code to try and use observable/plot from within TypeScript & Svelte. It almost works, but the data for the plot won’t actually render - I just get a white box with the “Frequency” and “weight” tags in the top left and bottom right corners respectively.

REPL:

Code:

<svelte:head>
	<title>About</title>
	<meta name="description" content="About this app" />
</svelte:head>

<script lang="ts">
	import * as Plot from '@observablehq/plot'

	const getGraphData = async () =>
		(await fetch('https://gist.githubusercontent.com/saif003/f5ac8b639a34f1c87a867d83261c0330/raw/11157fe435aa3132a6b619991101b7ae9915cbe5/athletes.json'))
			.json()
			.then((athletes: any) =>
				Plot.rectY(athletes, Plot.binX({y: "count"}, {x: "weight", fill: "sex"})).plot())

	const showGraph = (node: any, graph: any) =>
		node.appendChild(graph)

</script>

<div class="text-column">
	<h1>Graph</h1>
	{#await getGraphData()}
		<p>Loading data...</p>
	{:then graph}
		<p>Loaded data</p>
		<div use:showGraph={graph}></div>
	{:catch error}
		<p style="color: red">{error.message}</p>
	{/await}
</div>

Can anybody give pointers about what I’m doing wrong, here?

3

Fixed the issue:

The URL used to get the JSON points to the wrong file
However, even when trying to access my locally stored correct file I had errors.
This was because the access to that file was denied.

Following is a fixed version of the code

<svelte:head>
	<title>About</title>
	<meta name="description" content="About this app" />
</svelte:head>

<script lang="ts">
	import * as Plot from '@observablehq/plot'
	import athletes from './athletes.json'

	const makeGraph = (node: any) =>
		node.appendChild(Plot.rectY(athletes, Plot.binX({y: "count"}, {x: "weight", fill: "sex"})).plot())
</script>

<div class="text-column">
	<h1>Graph</h1>
	<div use:makeGraph></div>
</div>