The example-svelte-viz-page from ilenapeng

example-svelte-viz-page's Introduction

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).

Recommend Projects