Where to start for a simple one-page-website without UI control? #612

charnould · 2023-02-09T21:27:22Z

charnould
Feb 9, 2023

Hello,

I've discovered a few days ago SandDance while looking for the best way to visualize 14.000 scrapped newspaper headlines on a particular topic. SandDance seems tremendous (demo app is amazing, moreover in ultra-3D).
However, even if I'm not a that-a-newbie, I found super hard to get starting building something real.

More precisely, below what I'd like to build:

a one-page website
displaying (100 % width/weight) SandDance graph
without any UI controls (like in the left or top bar here)
and with some already set visualizations (e.g. grid with x=.., y=..., color=..., etc.) with a simple dropdown..

But the fact is, I do not know how to start, install what(?) with node, run what/where, etc. React or standalone... etc.

Any clue or tuto?
I didn't found anything useful on www (chapter Component architecture isn't super newbie-friendly....).

Thanks a lot for your help and this lib.

danmarshall · 2023-02-09T22:17:38Z

danmarshall
Feb 9, 2023
Maintainer

Thanks a lot for the discussion, we realize that our documentation leaves a lot to be desired and would love to improve it. So, this is great feedback. One reason that documentation is difficult is because we're trying to keep a flexible component that can work in a wide variety of scenarios. For example, we don't assume you're using WebPack or force any assumptions on how you create your app.

At the moment, we have our examples page showing several configurations. Hopefully you can match one of them with your toolchain and deployment model. The best way to emulate one of these pages is to view source and peek at the code.

Looks like you want just the sanddance component (not sanddance-explorer with the full UI). Whether you use React or not is up to you. (If you do, choose sanddance-react).

Perhaps I'll suggest copying this page: https://microsoft.github.io/SandDance/tests/v4/umd/qualBarChartTest.html
Download all its related files and open the local copy in your browser and modify as you like.

You'll want to get familiar with the Insight object which specifies the chart type and column mapping. If you use TypeScript in your project, then Intellisense may help you define these. Another way I like to create mine is to use the online app to dial in my chart, then invoke this in the JavaScript console:

SandDanceApp.explorer.getInsight()

Happy to continue the discussion if you can narrow down how you create and deploy your app.

1 reply

charnould Feb 10, 2023
Author

Hi Dan,

First, thanks for your reply!

I've done what you suggest and have made some tiny progress!
I've made my mind clearer on what I'd like to build and would be delighted to get your guidance.
If it might help the community I could try to write a simple "newbie-how-to" based on my own project if I succeed in making it real.

The project:

Build a simple one-page website (the simplest and lightest possible) allowing people to sanddance (!) with the data I've gathered: 15.000 news headlines on a particular topic from 2000 to 2023, classified by topic, sentiment, zip/region, newspapers...
People/users:
- SHOULD NOT be able to change graph format (only column type), color scheme, data displayed, etc.
- SHOULD be able to change x-axis (can be numeric or categorical), axis max bin, color by, sort by (+ bonus faced by). A kind of super-charged version of the one you suggest.
I'd like:
- to be able to overwrite sandDance UI to my own style: background, font, layout (= where are inputs), etc.
- (if possible) to NOT use heavy guns (aka: custom build, rollup & Cie).

Should I go with sanddance component as you suggest (but I didn't find how to allow user to change axis, color, sort...). The road seems to be vega spec without certainty? Or do I need a custom sanddance-explorer ?

Thanks a lot for your guidance.

danmarshall · 2023-02-10T23:52:26Z

danmarshall
Feb 10, 2023
Maintainer

Here's a complete example, with a dropdown that changes the x axis:

<!DOCTYPE html>
<html>

<head>
    <title>Single page SandDance</title>
    <link rel="stylesheet" href="https://unpkg.com/@msrvida/sanddance@4/dist/css/sanddance.css" />
    <style>
        body {
            font-family: Arial, Helvetica, sans-serif;
            padding: 1em;
        }

        #vis {
            height: 700px;
        }

        /* override SandDance styles */
        .sanddance-root {
            display: grid;
            grid-template-columns: 80% 20%;
        }

        .sanddance-gl,
        .sanddance-panel {
            position: unset;
        }

        /* hide Vega ui sliders */
        .vega-bindings {
            display: none;
        }
    </style>
    <script src="https://unpkg.com/vega@^5.22/build/vega.js" charset="utf-8"></script>
    <script src="https://unpkg.com/@msrvida/sanddance@4/dist/umd/sanddance.js"></script>
</head>

<body>
    <h1>Cars data</h1>

    X axis:
    <select id="xaxis">
        <option>Horsepower</option>
        <option>Cylinders</option>
        <option>Displacement</option>
        <option>Weight_in_lbs</option>
        <option>Acceleration</option>
    </select>

    <div id="vis"></div>

    <script>
        SandDance.use(vega);
        const viewer = new SandDance.Viewer(document.getElementById('vis'));

        //measure size of canvas, defined in style sheet above 
        var glDiv = viewer.presenter.getElement(SandDance.VegaMorphCharts.PresenterElement.gl);
        const size = {
            height: glDiv.offsetHeight,
            width: glDiv.offsetWidth
        };

        var insight = {
            columns: {
                color: 'Origin',
                x: 'Horsepower',
                y: 'Miles_per_Gallon'
            },
            scheme: 'category20',
            size,
            chart: 'scatterplot',
            view: '2d'
        };

        //fetch cars.json from vega website
        fetch('https://vega.github.io/vega-datasets/data/cars.json')
            .then(response => response.json())
            .then(data => {
                viewer.render({ insight }, data);

                //get selection and change insight column x
                document.getElementById('xaxis').addEventListener('change', function () {
                    insight.columns.x = this.value;
                    viewer.render({ insight }, data);
                });

            });

    </script>

    <p>
        Other page content
    </p>

</body>

</html>

0 replies

charnould · 2023-02-21T13:52:42Z

charnould
Feb 21, 2023
Author

Hello Dan,
Thanks a lot for this example!
I've made some progress, but I still have some questions and I didn't find answers with sandDance docs or internet resources...
If you might give me some clue, I'll be thankful!

Considering, the image, view and insight below:

      var viewer = new SandDance.Viewer(document.getElementById("vis"), {
        colors: {
          activeCube: "purple",
          defaultCube: "rgba(128,128,128,1)",
          hoveredCube: "red",
          selectedCube: "yellow",
          axisLine: "white",
          axisText: "white",
          gridLine: "snow",
          backgroundColor: "black",
        },
        fontFamily: "serif",
        collapseFacetAxes: false,
        language: {
          count: "",
        },
        onCubeClick: function ({e: onclick}) { console.log("on cube click") },               // working
        onCubeHover: function ({e: mouseover}) { console.log("on cube hover") }      // NOT working

      });

     var insight = {
        columns: {
          color: "Horsepower",
          x: "Horsepower",
          y: "Miles_per_Gallon",
          sort: "Horsepower",
          facet: null,
        },
        scheme: "rainbow",
        size,
        hideAxes: false,
        hideLegend: false,
        signalValues: {
          RoleX_BinsSignal: 10,
          RoleZ_ProportionSignal: 1,
          Text_ScaleSignal: 1.1,
          Text_AngleXSignal: 0,
          Text_AngleYSignal: 90,
          RoleColor_BinCountSignal: 20,
          Chart_PointScaleSignal: 1,
          RoleZ_Grounded: false,
        },
        chart: "barchart",
        view: "2d",
      };

My (last I hope) questions:

How do I set a backgroundColor #151515 (for example) without the transparent overlay?
Surprisingly, this overlay appears for some colors only.
Why fontFamily serif doesn't apply whereas language does?
Why signalValues:Text_AngleXSignal and signalValues:Text_AngleYSignal do not apply whereas RoleX_BinsSignal does?
Is it possible to set an inital zoom to graph to make it (i) bigger and (ii) set a x/y absolute position on the webpage?
Is it possible to set a gap between columns?
Is it possible to hide only y axis/grid? (hideAxes: false hides both axis)
(When columns number is high, x labels overlap and are unreadable.)
Would you mind giving an example how to use ~~onCubeClick~~/onCubeHover to display a div when clicking/hovering a single item?

Thanks again for your help.

EDIT : onCubeClick works

7 replies

danmarshall Feb 22, 2023
Maintainer

I think the "greyish overlay" is the #151515 color.

danmarshall Feb 22, 2023
Maintainer

The signal names removal should be raised as an issue. As of v4, the axes labels are auto-aligned by the MorphCharts library according to the user's camera position.

danmarshall Feb 22, 2023
Maintainer

The gap is actually an easy one :) it's Vega's Band Scale padding - a number between 0 and 1, currently set at 0.1: https://github.com/microsoft/SandDance/blob/main/packages/sanddance-specs/src/layouts/band.ts#L204

charnould Feb 22, 2023
Author

I think the "greyish overlay" is the #151515 color.

It's not. Issue raised :) #619

The gap is actually an easy one :) it's Vega's Band Scale padding - a number between 0 and 1, currently set at 0.1: https://github.com/microsoft/SandDance/blob/main/packages/sanddance-specs/src/layouts/band.ts#L204

Would you mind tell me how to overwrite code to "force" a bigger padding?

danmarshall Feb 22, 2023
Maintainer

When creating the Viewer, you can pass a 2nd parameter of ViewerOptions and add a handler for onVegaSpec:

        const options = {
            onVegaSpec: spec => {
                console.log(spec);
                const bandScale = spec.scales.find(s=> s.type === 'band');
                if (bandScale) {
                    bandScale.padding = 0.5;
                }
            }
        };

        const viewer = new SandDance.Viewer(document.getElementById('vis'), options);

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Where to start for a simple one-page-website without UI control? #612

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 3 comments 8 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

Where to start for a simple one-page-website without UI control? #612

charnould Feb 9, 2023

Replies: 3 comments · 8 replies

danmarshall Feb 9, 2023 Maintainer

charnould Feb 10, 2023 Author

danmarshall Feb 10, 2023 Maintainer

charnould Feb 21, 2023 Author

danmarshall Feb 22, 2023 Maintainer

danmarshall Feb 22, 2023 Maintainer

danmarshall Feb 22, 2023 Maintainer

charnould Feb 22, 2023 Author

danmarshall Feb 22, 2023 Maintainer

charnould
Feb 9, 2023

Replies: 3 comments 8 replies

danmarshall
Feb 9, 2023
Maintainer

charnould Feb 10, 2023
Author

danmarshall
Feb 10, 2023
Maintainer

charnould
Feb 21, 2023
Author

danmarshall Feb 22, 2023
Maintainer

danmarshall Feb 22, 2023
Maintainer

danmarshall Feb 22, 2023
Maintainer

charnould Feb 22, 2023
Author

danmarshall Feb 22, 2023
Maintainer