Home Examples Documentation Playground Source

Stardust Example: Isotypes

An isotype-based visualization created with the Stardust library. Data is generated randomly.

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<link rel="stylesheet" href="../static/assets/style.css" type="text/css" />
<canvas id="main-canvas" /></canvas>
<div data-switch="mode">
    <button class="active" data-value="mode1">Multi-column</button><button data-value="mode2">Single-column</button>
    <div class="fps"></div>
</div>
<div class="initializing"><p>Initializing...</p></div>
<script src="//d3js.org/d3.v3.min.js" type="text/javascript"></script>
<script type="text/javascript" src="../static/stardust/stardust.bundle.min.js"></script>
<script src="../static/assets/utils.js" type="text/javascript"></script>
<script type="text/javascript">
    let canvas = document.getElementById("main-canvas");
    let width = 960;
    let height = 470;
    let platform = Stardust.platform("webgl-2d", canvas, width, height);

    // SVG file created from Adobe Illustrator:
    let svgFile = `
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="10px" height="20px">
            <polygon points="
                7.5234375,11.2519531 7.5234375,4.3295898 5.9628906,4.3295898 5.9628906,2.3691406 5.3920898,1.7827148
                4.6079102,1.7827148 4.0356445,2.3691406 4.0356445,4.3295898 2.4765625,4.3295898 2.4765625,11.2519531 3.3203125,11.7666016
                3.3779297,17.2871094 2.4765625,17.9169922 7.5234375,17.9179688 6.6230469,17.2871094 6.6796875,11.7675781
            "/>
        </svg>
    `;

    var data = [];
    [ 27, 53, 91, 52, 112, 42, 107, 91, 68, 56, 115, 86, 26, 102, 28, 23, 119, 110 ].forEach((x, index) => {
        for(let i = 0; i < x; i++) {
            data.push({
                type: index % 3,
                column: Math.floor(index / 3)
            });
        }
    });
    var typeCounter = [ 0, 0, 0 ];
    var typeColumnCounter = [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ];
    data.forEach((d) => {
        d.typeIndex = typeCounter[d.type]++;
        d.typeColumnIndex = typeColumnCounter[3 * d.column + d.type]++;
    });

    // Convert the SVG file to Stardust mark spec.
    let isotype = new Stardust.mark.isotype(svgFile);

    // Create the mark object.
    let isotypes = Stardust.mark.create(isotype, platform);

    let isotypeHeight = 18;

    let colors = [[31,119,180],[255,127,14],[44,160,44]];
    colors = colors.map((x) => [ x[0] / 255, x[1] / 255, x[2] / 255, 1 ]);

    let pScale = Stardust.scale.custom(`
        Vector2(
            20 + column * 160 + type * 45 + typeColumnIndex % 5 * 8,
            460 - floor(typeColumnIndex / 5) * 18
        )
    `)
    pScale.attr("typeColumnIndex", d => d.typeColumnIndex);
    pScale.attr("column", d => d.column);
    pScale.attr("typeIndex", d => d.typeIndex);
    pScale.attr("type", d => d.type);

    let qScale = Stardust.scale.custom(`
        Vector2(
            65 + type * 300 + typeIndex % 30 * 8,
            460 - floor(typeIndex / 30) * 18
        )
    `)
    qScale.attr("typeIndex", d => d.typeIndex);
    qScale.attr("type", d => d.type);

    let interpolateScale = Stardust.scale.interpolate("Vector2")
    interpolateScale.t(0);

    isotypes.attr("position", interpolateScale(pScale(), qScale()));
    isotypes.attr("color", d => colors[d.type]);
    isotypes.attr("size", 1.0);
    isotypes.data(data);

    function render() {
        platform.clear();
        isotypes.render();
    }

    console.log(data.length);

    render();

    switches.mode_changed = function(newValue) {
        beginTransition((t) => {
            if(newValue == "mode1")
                interpolateScale.t(1 - t);
            if(newValue == "mode2")
                interpolateScale.t(t);
            render();
        });
    };
</script>