This is an example of what a node-driven, Svelte-based visualization page might look like. You can see the "published" result at https://jsoma.github.io/example-svelte-viz-page.
In reality this is just layercake-template with a little extra magic sprinkled in.
To use
npm install
npm run dev
Then take a peek at http://localhost:3000.
To publish
npm run build
Commit + push up.
To edit
The main page is found at src/routes/index.svelte
Near the top, it is displaying a layercake visual, which is a custom visualization library just for Svelte. This graphic appears thanks to the code below:
<div class="chart-container">
<LayerCake
padding={{ right: 10, bottom: 20, left: 25 }}
x={'year'}
y={'amount'}
yDomain={[0, null]}
data={points}
>
<Svg>
<AxisX/>
<AxisY/>
<Line/>
<Area/>
</Svg>
</LayerCake>
</div>
Near the bottom is an ai2html embed. It is imported through the following lines:
<Ai2html name="countries" description="An example chart to show off the framework"></Ai2html>
Instead of cutting and pasting all of the code into an HTML file, you drop the exports into a folder for ai2html files and simply tell the component which file you want.
In this case, we're importing countries.svelte (which is just an export renamed from .html to .svelte).
